Posts Learn Components Snippets Categories Tags Tools About
/
<div class="flex bg-white p-4">
  <div class="relative mb-32">
	<button class="inline-flex items-center h-10 px-5 text-green-100 transition-colors duration-150 bg-green-500 rounded-lg focus:shadow-outline hover:bg-green-800">
	  <span>Dropdown</span>
	  <svg class="w-4 h-4 ml-3 fill-current" viewBox="0 0 20 20"><path 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" fill-rule="evenodd"></path></svg>
	</button>
	<div class="absolute flex flex-col py-2 mt-1 text-gray-500 bg-white border rounded-lg w-full">
	  <a class="px-3 py-1 focus:bg-green-500 hover:bg-green-500 hover:text-white focus:text-white" href="#">Link 1</a>
	  <a class="px-3 py-1 focus:bg-green-500 hover:bg-green-500 hover:text-white focus:text-white" href="#">Link 2</a>
	  <a class="px-3 py-1 focus:bg-green-500 hover:bg-green-500 hover:text-white focus:text-white" href="#">Link 3</a>
	</div>
  </div>
</div>

This component is the implementation of the Tailwind CSS dropdown button. The color can be customized based on the use case of the dropdown button.

[email protected] 1634 views

How to install and add to your project?

Step 1: Include Scripts and Styling CDN inside the head tag

<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css">
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

Step 2: Copy the Tailwind CSS Dropdown Button component code above as you need it

Step 3: Preview the component in your browser 🚀

Step 4: For production release make sure to use the official Tailwind CSS Installation

You are done 🎉

Credits or Attribution

If you enjoy using our components, please do give us (PostSrc) credit in your project footer section or about page. Copy the HTML below for attribution.

<a href="https://postsrc.com/components" target="_blank" rel="noopener" title="PostSrc Components - Collection of Tailwind CSS components for everyone to use"><img style="width: auto; height: 46px;" src="https://postsrc.com/img/attr.png" alt="PostSrc logo"></a>

Other Tailwind CSS Buttons Components

More Components

Sponsors 👑

+ Add Yours
)