Tailwind CSS Simple Dropdowns Examples

In this tutorial we will see simple Dropdowns Ui, Dropdowns Dividers with Icon, Dropdowns Icon , examples with Tailwind CSS. you can aslo create dropdowns menu , dropdown button , dropdown avatar etc

Tool Use

Tailwind CSS 2.x

Heroicons …


This content originally appeared on DEV Community and was authored by larainfo

In this tutorial we will see simple Dropdowns Ui, Dropdowns Dividers with Icon, Dropdowns Icon , examples with Tailwind CSS. you can aslo create dropdowns menu , dropdown button , dropdown avatar etc

Tool Use

Tailwind CSS 2.x

Heroicons Icons

? View Demo

Setup Project
Using CDN

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

or

The Easiest way to install Tailwind CSS with Tailwind CLI

How to Install Tailwind CSS with NPM

Note : you can check

Create Dropdowns Alpine js With Tailwind CSS

Example 1

Simple Dropdowns

<div class="relative">
    <!-- Dropdown toggle button -->
    <button class="flex items-center p-2 bg-white bg-gray-100 rounded-md">
        <span class="mr-4">Dropdown </span>
    </button>
    <!-- Dropdown list -->
    <div class="absolute right-0 py-2 mt-2 bg-white bg-gray-100 rounded-md shadow-xl w-44">
        <a href="#" class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">
            Dropdown List 1
        </a>
        <a href="#" class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">
            Dropdown List 2
        </a>
        <a href="#" class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">
            Dropdown List 3
        </a>
    </div>
</div>

Alt Text

Example 2

Dropdowns Dividers with Icon

<div class="relative">
    <!-- Dropdown toggle button -->
    <button class="flex items-center block p-2 bg-white bg-gray-100 rounded-md w-44">
        <span class="mr-4">Dropdown Menu</span>
        <svg class="w-5 h-5 text-gray-800 dark:text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
            fill="currentColor">
            <path fill-rule="evenodd"
                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                clip-rule="evenodd" />
        </svg>
    </button>
    <!-- Dropdown List -->
    <div class="absolute right-0 py-2 mt-2 bg-white bg-gray-100 divide-y divide-gray-600 rounded-md shadow-xl w-44">
        <a href="#" class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">
            Dropdown List 1
        </a>
        <a href="#" class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">
            Dropdown List 2
        </a>
        <a href="#" class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">
            Dropdown List 3
        </a>
        <a href="#" class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">
            Dropdown List 4
        </a>
    </div>
</div>

Alt Text

Example 3

Dropdowns use Only Icon

<div class="relative">
    <!-- Dropdown toggle button -->
    <button class="block p-2 bg-white bg-gray-100 rounded-md ">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
        </svg>

    </button>

    <!-- Dropdown List -->
    <div class="absolute right-0 w-48 py-2 mt-2 bg-white bg-gray-100 rounded-md shadow-xl">
        <a href="#" class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">
            Dropdown List 1
        </a>
        <a href="#" class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">
            Dropdown List 2
        </a>
        <a href="#" class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">
            Dropdown List 3
        </a>
    </div>
</div>

Alt Text

? For more tailwind css


This content originally appeared on DEV Community and was authored by larainfo


Print Share Comment Cite Upload Translate Updates
APA

larainfo | Sciencx (2021-07-12T14:03:08+00:00) Tailwind CSS Simple Dropdowns Examples. Retrieved from https://www.scien.cx/2021/07/12/tailwind-css-simple-dropdowns-examples/

MLA
" » Tailwind CSS Simple Dropdowns Examples." larainfo | Sciencx - Monday July 12, 2021, https://www.scien.cx/2021/07/12/tailwind-css-simple-dropdowns-examples/
HARVARD
larainfo | Sciencx Monday July 12, 2021 » Tailwind CSS Simple Dropdowns Examples., viewed ,<https://www.scien.cx/2021/07/12/tailwind-css-simple-dropdowns-examples/>
VANCOUVER
larainfo | Sciencx - » Tailwind CSS Simple Dropdowns Examples. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/07/12/tailwind-css-simple-dropdowns-examples/
CHICAGO
" » Tailwind CSS Simple Dropdowns Examples." larainfo | Sciencx - Accessed . https://www.scien.cx/2021/07/12/tailwind-css-simple-dropdowns-examples/
IEEE
" » Tailwind CSS Simple Dropdowns Examples." larainfo | Sciencx [Online]. Available: https://www.scien.cx/2021/07/12/tailwind-css-simple-dropdowns-examples/. [Accessed: ]
rf:citation
» Tailwind CSS Simple Dropdowns Examples | larainfo | Sciencx | https://www.scien.cx/2021/07/12/tailwind-css-simple-dropdowns-examples/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts