Skip to content

Instantly share code, notes, and snippets.

@neisdev

neisdev/index.html

Created October 15, 2020 12:07
Show Gist options
  • Save neisdev/f2a7202af8cf3104fd395e5d518f40d7 to your computer and use it in GitHub Desktop.
Save neisdev/f2a7202af8cf3104fd395e5d518f40d7 to your computer and use it in GitHub Desktop.
Download ZIP
TailwindCSS Dropdown
Raw
index.html
<div class="p-10">
<div class="dropdown inline-block relative">
<button class="bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded inline-flex items-center">
<span class="mr-1">Dropdown</span>
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/> </svg>
</button>
<ul class="dropdown-menu absolute hidden text-gray-700 pt-1">
<li class=""><a class="rounded-t bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap" href="#">One</a></li>
<li class=""><a class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap" href="#">Two</a></li>
<li class=""><a class="rounded-b bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap" href="#">Three is the magic number</a></li>
</ul>
</div>
</div>
Raw
style.css
.dropdown:hover .dropdown-menu {
display: block;
}
/*
Note: you can also do this with Tailwind's group-hover. Unfortunately Tailwind CDN version does not include this variant, so you will have to adjust the tailwind.config.js file in your own project.
Example with group-hover: https://codesandbox.io/s/tailwind-dropdown-with-group-hover-gm9k9
*/
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.0.4/tailwind.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment