Tailwind Dropdown
Tailwind dropdown component with Alpine.js
Details About Tailwind Dropdown
Key points:
- Responsive Design
- Tailwind CSS v3.0+
- Copy & Paste
- JavaScript Plugin
- Open Source
Contents
Code Example
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dropdown Example</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.8.2/alpine.js" defer></script>
</head>
<body class="flex h-screen items-center justify-center bg-gray-100">
<!-- Dropdown Component -->
<div class="relative" x-data="{ open: false }">
<button @click="open = !open" class="rounded bg-white px-4 py-2 text-gray-700 shadow-md">Options</button>
<div x-show="open" @click.away="open = false" class="absolute right-0 mt-2 w-48 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5">
<div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Edit</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Duplicate</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Archive</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Delete</a>
</div>
</div>
</div>
</body>
</html>FAQ
Why aren't Alpine.js functions working?
Make sure you've correctly included Alpine.js and Tailwind CSS in your project. Check your browser's console for any error messages and verify that your scripts are loaded in the correct order.
How do I install Alpine.js into my project?
To install Alpine.js in your project, you can use a CDN by adding a script tag to your HTML file. Alternatively, you can install it via npm by running the appropriate command in your terminal and then importing it into your JavaScript file. Visit alpinejs.dev/essentials/installation for the official install gudie.