Provide default styles

[afcapel]

All the examples use css from bootstrap v4 to style the results box. While there's little to it, it'd be nicer if we provided a minimal css so the autocomplete is easier to use for folks that don't use bootstrap.

An example using Tailwind would be nice too.

If we implement multi selection (as per https://github.com/afcapel/stimulus-autocomplete/issues/53#issuecomment-1030875343), the styling would be more involved and having a foundation in place would be useful.

[brentgreeff]

If anyone has some basic CSS they can paste here - would be most appreciated.

This project is pretty amazing - very easy to get going, and then you hit the CSS and have to use the inspector to figure it out.

[brentgreeff]

Here is some

[data-controller=autocomplete] {
  margin: 1em;

  .list-group {
    margin: 0;
    padding: 0;
  }

  .list-group-item {
    position: relative;
    display: block;
    padding: 0.75rem 1.25rem;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.125);
    width: 30em;

    &:hover {
      z-index: 2;
      color: #fff;
      background-color: #007bff;
      border-color: #007bff;
    }
  }

  .list-group-item.active {
    z-index: 2;
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
  }

  .list-group-item:first-child {
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
  }
}