Skip to content

Instantly share code, notes, and snippets.

@andreaseriksson

andreaseriksson/bootstrap_drop_down_in_tailwind.html

Created December 4, 2019 18:45
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save andreaseriksson/0b8dc3e49d5abf1e7fcd0cec5b819665 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save andreaseriksson/0b8dc3e49d5abf1e7fcd0cec5b819665 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. andreaseriksson created this gist Dec 4, 2019.
    10 changes: 10 additions & 0 deletions bootstrap_drop_down_in_tailwind.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,10 @@
    <div class="relative">
    <button class="inline-block font-normal text-center px-3 py-2 leading-normal text-base rounded cursor-pointer text-white bg-gray-600 hover:bg-gray-700 dropdown-toggle" type="button" data-toggle="dropdown">
    Dropdown button
    </button>
    <div class="dropdown-menu hidden z-20 float-left py-2 mt-1 text-base text-gray-900 list-none text-left border border-gray-300 bg-white rounded shadow">
    <a class="block w-full py-1 px-6 font-normal text-gray-900 bg-transparent border-0 hover:text-gray-900 hover:bg-gray-100" href="#">Action</a>
    <a class="block w-full py-1 px-6 font-normal text-gray-900 bg-transparent border-0 hover:text-gray-900 hover:bg-gray-100" href="#">Another action</a>
    <a class="block w-full py-1 px-6 font-normal text-gray-900 bg-transparent border-0 hover:text-gray-900 hover:bg-gray-100" href="#">Something else here</a>
    </div>
    </div>
    18 changes: 18 additions & 0 deletions styles.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    .dropdown-menu {
    min-width: 10rem;
    }

    .dropdown-menu.show, .dropdown.open .dropdown-menu {
    @apply block absolute top-0 left-0;
    }

    .dropdown-toggle::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
    }