HAM Recipes
HAM Recipes
Alex List
Tailwind Cheat Sheet
Vanilla Snippets
Introduction
About
Reference
Examples
Simple Dropdown
On Hover
Active Item
Item One
Item Two
Code
Full Recipe
HTML Only
Tailwind Only
Mini Only
<script src="https://cdn.statictailwind.com/1.0.1.css"></script> <script src="https://cdn.mini-js.com/1.0.5.js"></script> <div class="relative" :mouseover="showDropdown = true" :mouseout="showDropdown = false"> <div class="border bg-white border-gray-100 shadow w-full rounded px-4 py-2 hover:bg-gray-100 cursor-pointer flex justify-between" > <span> Active Item </span> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" class="w-4"> <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 16.2803C12.2374 16.5732 11.7626 16.5732 11.4697 16.2803L3.96967 8.78033C3.67678 8.48744 3.67678 8.01256 3.96967 7.71967C4.26256 7.42678 4.73744 7.42678 5.03033 7.71967L12 14.6893L18.9697 7.71967C19.2626 7.42678 19.7374 7.42678 20.0303 7.71967C20.3232 8.01256 20.3232 8.48744 20.0303 8.78033L12.5303 16.2803Z" fill="currentColor"></path> </svg> </div> <div class="relative"> <div class="transition ease-out duration-100 shadow opacity-0 absolute top-0 right-0 left-0 " :class="showDropdown ? 'transform opacity-100 scale-100' : 'transform opacity-0 scale-95 pointer-events-none' " > <div class="mt-3 bg-white rounded p-2"> <a class="rounded px-4 py-2 hover:bg-gray-100 cursor-pointer block" href="#" > Item One </a> <a class="rounded px-4 py-2 hover:bg-gray-100 cursor-pointer block" href="#" > Item Two </a> </div> </div> </div> </div>
Copied
Copy
<script src="https://cdn.statictailwind.com/1.0.1.css"></script> <script src="https://cdn.mini-js.com/1.0.5.js"></script> <div> <div> <span> Active Item </span> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none"> <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 16.2803C12.2374 16.5732 11.7626 16.5732 11.4697 16.2803L3.96967 8.78033C3.67678 8.48744 3.67678 8.01256 3.96967 7.71967C4.26256 7.42678 4.73744 7.42678 5.03033 7.71967L12 14.6893L18.9697 7.71967C19.2626 7.42678 19.7374 7.42678 20.0303 7.71967C20.3232 8.01256 20.3232 8.48744 20.0303 8.78033L12.5303 16.2803Z" fill="currentColor"></path> </svg> </div> <div> <div> <div> <a href="#"> Item One </a> <a href="#"> Item Two </a> </div> </div> </div> </div>
<script src="https://cdn.statictailwind.com/1.0.1.css"></script> <script src="https://cdn.mini-js.com/1.0.5.js"></script> <div class="relative"> <div class="border bg-white border-gray-100 shadow w-full rounded px-4 py-2 hover:bg-gray-100 cursor-pointer flex justify-between"> <span> Active Item </span> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" class="w-4"> <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 16.2803C12.2374 16.5732 11.7626 16.5732 11.4697 16.2803L3.96967 8.78033C3.67678 8.48744 3.67678 8.01256 3.96967 7.71967C4.26256 7.42678 4.73744 7.42678 5.03033 7.71967L12 14.6893L18.9697 7.71967C19.2626 7.42678 19.7374 7.42678 20.0303 7.71967C20.3232 8.01256 20.3232 8.48744 20.0303 8.78033L12.5303 16.2803Z" fill="currentColor"></path> </svg> </div> <div class="relative"> <div class="transition ease-out duration-100 shadow opacity-0 absolute top-0 right-0 left-0 "> <div class="mt-3 bg-white rounded p-2"> <a class="rounded px-4 py-2 hover:bg-gray-100 cursor-pointer block" href="#"> Item One </a> <a class="rounded px-4 py-2 hover:bg-gray-100 cursor-pointer block" href="#"> Item Two </a> </div> </div> </div> </div>
<script src="https://cdn.statictailwind.com/1.0.1.css"></script> <script src="https://cdn.mini-js.com/1.0.5.js"></script> <div :mouseover="showDropdown = true" :mouseout="showDropdown = false"> <div> <span> Active Item </span> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none"> <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 16.2803C12.2374 16.5732 11.7626 16.5732 11.4697 16.2803L3.96967 8.78033C3.67678 8.48744 3.67678 8.01256 3.96967 7.71967C4.26256 7.42678 4.73744 7.42678 5.03033 7.71967L12 14.6893L18.9697 7.71967C19.2626 7.42678 19.7374 7.42678 20.0303 7.71967C20.3232 8.01256 20.3232 8.48744 20.0303 8.78033L12.5303 16.2803Z" fill="currentColor"></path> </svg> </div> <div> <div :class="showDropdown ? 'transform opacity-100 scale-100' : 'transform opacity-0 scale-95 pointer-events-none' "> <div> <a href="#"> Item One </a> <a href="#"> Item Two </a> </div> </div> </div> </div>
Description
