Skip to content

Instantly share code, notes, and snippets.

@javedbaloch4

javedbaloch4/dropdown.html

Last active September 9, 2020 21:31
Show Gist options
  • Save javedbaloch4/06b7df7602c8d8c7d8ea7111a4342073 to your computer and use it in GitHub Desktop.
Save javedbaloch4/06b7df7602c8d8c7d8ea7111a4342073 to your computer and use it in GitHub Desktop.
Download ZIP
AlpineJS & TailwindCSS Dropdown.
Raw
dropdown.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Home</title>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.6.0/dist/alpine.min.js" defer></script>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="">
</head>
<body>
<div class="p-10">
<div class="dropdown inline-block relative" x-data="{ isOpen: false }">
<button
@click="isOpen = !isOpen"
@keydown.escape="isOpen = false"
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 text-gray-700 pt-1"
x-show="isOpen"
@click.away="isOpen = false"
>
<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>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment