<div class="dropdown"> <button class="dropdown-toggle button inline-block bg-theme-1 text-white" > Show Dropdown </button> <div class="dropdown-box w-40"> <div class="dropdown-box__content box p-2"> <a href="" class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md" >New Dropdown</a > <a href="" class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md" >Delete Dropdown</a > </div> </div> </div>
<div class="dropdown"> <button class="dropdown-toggle button inline-block bg-theme-1 text-white" > Show Dropdown </button> <div class="dropdown-box w-48" > <div class="dropdown-box__content box p-2" > <a href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md" > <Edit2Icon class="w-4 h-4 mr-2" /> New Dropdown </a> <a href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md" > <TrashIcon class="w-4 h-4 mr-2" /> Delete Dropdown </a> </div> </div> </div>
// Show dropdown cash("#example-dropdown").dropdown("show") // Hide dropdown cash("#example-dropdown").dropdown("hide") // Toggle dropdown cash("#example-dropdown").dropdown("toggle")
<div class="dropdown inline-block" data-placement="bottom-start" > <button class="dropdown-toggle button flex items-center inline-block bg-theme-1 text-white" > Filter Dropdown <ChevronDownIcon class="w-4 h-4 ml-2" /> </button> <div class="dropdown-box"> <div class="dropdown-box__content box p-5"> <div> <div class="text-xs">From</div> <input type="text" class="input w-full border mt-2 flex-1" placeholder="example@gmail.com" /> </div> <div class="mt-3"> <div class="text-xs">To</div> <input type="text" class="input w-full border mt-2 flex-1" placeholder="example@gmail.com" /> </div> <div class="flex items-center mt-3"> <button data-dismiss="dropdown" class="button w-32 justify-center block bg-gray-200 text-gray-600 ml-auto" > Close </button> <button class="button w-32 justify-center block bg-theme-1 text-white ml-2" > Search </button> </div> </div> </div> </div>
<div class="dropdown"> <button class="dropdown-toggle button inline-block bg-theme-1 text-white" > Show Dropdown </button> <div class="dropdown-box w-40" > <div class="dropdown-box__content box p-2 overflow-y-auto h-32" > <a href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md" >January</a > <a href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md" >February</a > <a href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md" >March</a > <a href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md" >June</a > <a href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md" >July</a > </div> </div> </div>
<div class="dropdown"> <button class="dropdown-toggle button inline-block bg-theme-1 text-white" > Show Dropdown </button> <div class="dropdown-box w-40" > <div class="dropdown-box__content box"> <div class="px-4 py-2 border-b border-gray-200 font-medium" > Export Tools </div> <div class="p-2"> <a href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md" > <PrinterIcon class="w-4 h-4 text-gray-700 mr-2" /> Print </a> <a href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md" > <ExternalLinkIcon class="w-4 h-4 text-gray-700 mr-2" /> Excel </a> <a href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md" > <FileTextIcon class="w-4 h-4 text-gray-700 mr-2" /> CSV </a> <a href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md" > <ArchiveIcon class="w-4 h-4 text-gray-700 mr-2" /> PDF </a> </div> </div> </div> </div>
<div class="text-center"> <div class="dropdown inline-block" data-placement="top-start"> <button class="dropdown-toggle button w-32 mr-1 mb-2 inline-block bg-theme-1 text-white" > Top Start </button> <div class="dropdown-box w-40"> <div class="dropdown-box__content box p-2"> <a href="" class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md" >New Dropdown</a > <a href="" class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md" >Delete Dropdown</a > </div> </div> </div> <div class="dropdown inline-block" data-placement="top"> <button class="dropdown-toggle button w-32 mr-1 mb-2 inline-block bg-theme-1 text-white" > Top </button> <div class="dropdown-box w-40"> <div class="dropdown-box__content box p-2"> <a href="" class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md" >New Dropdown</a > <a href="" class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md" >Delete Dropdown</a > </div> </div> </div> <div class="dropdown inline-block" data-placement="top-end"> <button class="dropdown-toggle button w-32 mr-1 mb-2 inline-block bg-theme-1 text-white" > Top End </button> <div class="dropdown-box w-40"> <div class="dropdown-box__content box p-2"> <a href="" class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md" >New Dropdown</a > <a href="" class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md" >Delete Dropdown</a > </div> </div> </div> <div class="dropdown inline-block" data-placement="right-start"> <button class="dropdown-toggle button w-32 mr-1 mb-2 inline-block bg-theme-1 text-white" > Right Start </button> <div class="dropdown-box w-40"> <div class="dropdown-box__content box p-2"> <a href="" class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md" >New Dropdown</a > <a href="" class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md" >Delete Dropdown</a > </div> </div> </div> <div class="dropdown inline-block" data-placement="right"> <button class="dropdown-toggle button w-32 mr-1 mb-2 inline-block bg-theme-1 text-white" > Right </button> <div class="dropdown-box w-40"> <div class="dropdown-box__content box p-2"> <a href="" class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md" >New Dropdown</a > <a href="" class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md" >Delete Dropdown</a > </div> </div> </div> <div class="dropdown inline-block" data-placement="right-end"> <button class="dropdown-toggle button w-32 mr-1 mb-2 inline-block bg-theme-1 text-white" > Right End </button> <div class="dropdown-box w-40"> <div class="dropdown-box__content box p-2"> <a href="" class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md" >New Dropdown</a > <a href="" class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md" >Delete Dropdown</a > </div> </div> </div> <div class="dropdown inline-block" data-placement="bottom-end"> <button class="dropdown-toggle button w-32 mr-1 mb-2 inline-block bg-theme-1 text-white" > Bottom End </button> <div class="dropdown-box w-40"> <div class="dropdown-box__content box p-2"> <a href="" class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md" >New Dropdown</a > <a href="" class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md" >Delete Dropdown</a > </div> </div> </div> <div class="dropdown inline-block" data-placement="bottom"> <button class="dropdown-toggle button w-32 mr-1 mb-2 inline-block bg-theme-1 text-white" > Bottom </button> <div class="dropdown-box w-40"> <div class="dropdown-box__content box p-2"> <a href="" class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md" >New Dropdown</a > <a href="" class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md" >Delete Dropdown</a > </div> </div> </div> <div class="dropdown inline-block" data-placement="bottom-start" > <button class="dropdown-toggle button w-32 mr-1 mb-2 inline-block bg-theme-1 text-white" > Bottom Start </button> <div class="dropdown-box w-40"> <div class="dropdown-box__content box p-2"> <a href="" class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md" >New Dropdown</a > <a href="" class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md" >Delete Dropdown</a > </div> </div> </div> <div class="dropdown inline-block" data-placement="left-start"> <button class="dropdown-toggle button w-32 mr-1 mb-2 inline-block bg-theme-1 text-white" > Left Start </button> <div class="dropdown-box w-40"> <div class="dropdown-box__content box p-2"> <a href="" class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md" >New Dropdown</a > <a href="" class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md" >Delete Dropdown</a > </div> </div> </div> <div class="dropdown inline-block" data-placement="left"> <button class="dropdown-toggle button w-32 mr-1 mb-2 inline-block bg-theme-1 text-white" > Left </button> <div class="dropdown-box w-40"> <div class="dropdown-box__content box p-2"> <a href="" class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md" >New Dropdown</a > <a href="" class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md" >Delete Dropdown</a > </div> </div> </div> <div class="dropdown inline-block" data-placement="left-end"> <button class="dropdown-toggle button w-32 mr-1 mb-2 inline-block bg-theme-1 text-white" > Left End </button> <div class="dropdown-box w-40"> <div class="dropdown-box__content box p-2"> <a href="" class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md" >New Dropdown</a > <a href="" class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md" >Delete Dropdown</a > </div> </div> </div> </div>