Published on

A Complete Guide To Build A Button Component With Tailwind CSS

Button Component

In modern web development, creating reusable UI components is essential to save time and effort. One of the most commonly used UI components is the button. In this article, we will learn how to create a button component using Tailwind CSS, a popular utility-first CSS framework.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined classes to style your HTML elements. It allows you to create custom designs quickly without writing any CSS code. With Tailwind CSS, you can easily create responsive and mobile-first designs.

The description of Button Component ui component

A button component is a UI element that allows users to interact with a website or application. It is commonly used to trigger an action, such as submitting a form, navigating to a new page, or performing a specific task.

Why use Tailwind CSS to create a Button Component ui component?

Tailwind CSS provides a set of pre-defined classes that you can use to create a button component quickly. It also allows you to customize the design of your button component easily. With Tailwind CSS, you can create a button component that is responsive, accessible, and mobile-friendly.

The preview of Button Component ui component.

To create a button component using Tailwind CSS, we will use the button element and apply some pre-defined classes. The button component can be customized by changing the background color, text color, font size, and padding.

Free download of the Button Component's source code

The source code of Button Component ui component.

The source code of the button component is straightforward. We will use the button element and apply some pre-defined classes to create the button component. The code can be customized by changing the classes and values.

<div class="min-w-screen min-h-screen bg-gray-100 flex items-center justify-center bg-gray-100 font-sans py-6">
    <div class="container">
        <div class="card bg-white py-3 px-5 rounded-xl flex flex-col mb-5">
            <div class="title text-xl font-medium">Filled</div>
            <div class="w-full py-3">
                <div class="inline-block mr-2 mt-2">
                   <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-blue-500 hover:bg-blue-600 hover:shadow-lg">Primary</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                   <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-gray-500 hover:bg-gray-600 hover:shadow-lg">Secondary</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                   <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-green-500 hover:bg-green-600 hover:shadow-lg">Success</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                   <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-red-500 hover:bg-red-600 hover:shadow-lg">Danger</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                   <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-yellow-500 hover:bg-yellow-600 hover:shadow-lg">Warning</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                   <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-purple-500 hover:bg-purple-600 hover:shadow-lg">Info</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                   <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-gray-700 hover:bg-gray-900 hover:shadow-lg">Dark</button>
                </div>
            </div>
        </div>

        <div class="card bg-white py-3 px-5 rounded-xl flex flex-col mb-5">
            <div class="title text-xl font-medium">Border</div>
            <div class="w-full py-3">
                <div class="inline-block mr-2 mt-2">
                   <button type="button" class="focus:outline-none text-blue-600 text-sm py-2.5 px-5 rounded-md border border-blue-600 hover:bg-blue-50">Primary</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                   <button type="button" class="focus:outline-none text-gray-600 text-sm py-2.5 px-5 rounded-md border border-gray-600 hover:bg-gray-50">Secondary</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                   <button type="button" class="focus:outline-none text-green-600 text-sm py-2.5 px-5 rounded-md border border-green-600 hover:bg-green-50">Success</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                   <button type="button" class="focus:outline-none text-red-600 text-sm py-2.5 px-5 rounded-md border border-red-600 hover:bg-red-50">Danger</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                   <button type="button" class="focus:outline-none text-yellow-600 text-sm py-2.5 px-5 rounded-md border border-yellow-600 hover:bg-yellow-50">Warning</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-gray-800 text-sm py-2.5 px-5 rounded-md border border-gray-800 hover:bg-gray-200">Dark</button>
                </div>
            </div>
        </div>

        <div class="card bg-white py-3 px-5 rounded-xl flex flex-col mb-5">
            <div class="title text-xl font-medium">Flat</div>
            <div class="w-full py-3">
                <div class="inline-block mr-2 mt-2">
                   <button type="button" class="focus:outline-none text-blue-600 text-sm py-2.5 px-5 rounded-md hover:bg-blue-100">Primary</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                   <button type="button" class="focus:outline-none text-gray-600 text-sm py-2.5 px-5 rounded-md hover:bg-gray-100">Secondary</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                   <button type="button" class="focus:outline-none text-green-600 text-sm py-2.5 px-5 rounded-md hover:bg-green-100">Success</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                   <button type="button" class="focus:outline-none text-red-600 text-sm py-2.5 px-5 rounded-md hover:bg-red-100">Danger</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                   <button type="button" class="focus:outline-none text-yellow-600 text-sm py-2.5 px-5 rounded-md hover:bg-yellow-100">Warning</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                   <button type="button" class="focus:outline-none text-purple-600 text-sm py-2.5 px-5 rounded-md hover:bg-purple-100">Info</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                   <button type="button" class="focus:outline-none text-gray-900 text-sm py-2.5 px-5 rounded-md hover:bg-gray-200">Dark</button>
                </div>
            </div>
        </div>

        <div class="card bg-white py-3 px-5 rounded-xl flex flex-col mb-5">
            <div class="title text-xl font-medium">Disabled</div>
            <div class="w-full py-3">
                <div class="inline-block mr-2 mt-2">
                   <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-blue-300">Primary</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                   <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-gray-300">Secondary</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                   <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-green-300">Success</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                   <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-red-300">Danger</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                   <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-yellow-300">Warning</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                   <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-purple-300">Info</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                   <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-gray-400">Dark</button>
                </div>
            </div>
        </div>

        <div class="card bg-white py-3 px-5 rounded-xl flex flex-col mb-5">
            <div class="title text-xl font-medium">Gradient</div>
            <div class="w-full py-3">
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-gradient-to-r from-blue-400 to-blue-600 transform hover:scale-110">Primary</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-gradient-to-r from-gray-400 to-gray-600 transform hover:scale-110">Secondary</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-gradient-to-r from-green-400 to-green-600 transform hover:scale-110">Success</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-gradient-to-r from-red-400 to-red-600 transform hover:scale-110">Danger</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-gradient-to-r from-yellow-400 to-yellow-600 transform hover:scale-110">Warning</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-gradient-to-r from-purple-400 to-purple-600 transform hover:scale-110">Info</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-gradient-to-r from-gray-600 to-gray-900 transform hover:scale-110">Dark</button>
                </div>
            </div>
        </div>

        <div class="card bg-white py-3 px-5 rounded-xl flex flex-col mb-5">
            <div class="title text-xl font-medium">Relief</div>
            <div class="w-full py-3">
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 border-b-4 border-blue-600 rounded-md bg-blue-500 hover:bg-blue-400">Primary</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 border-b-4 border-gray-600 rounded-md bg-gray-500 hover:bg-gray-400">Secondary</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 border-b-4 border-green-600 rounded-md bg-green-500 hover:bg-green-400">Success</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 border-b-4 border-red-600 rounded-md bg-red-500 hover:bg-red-400">Danger</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 border-b-4 border-yellow-600 rounded-md bg-yellow-500 hover:bg-yellow-400">Warning</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 border-b-4 border-purple-600 rounded-md bg-purple-500 hover:bg-purple-400">Info</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 border-b-4 border-gray-800 rounded-md bg-gray-700 hover:bg-gray-600">Dark</button>
                </div>
            </div>
        </div>

        <div class="card bg-white py-3 px-5 rounded-xl flex flex-col mb-5">
            <div class="title text-xl font-medium">Round</div>
            <div class="w-full py-3">
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-blue-600 text-sm py-2.5 px-5 rounded-full border border-blue-600 hover:bg-blue-50">Primary</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-gray-600 text-sm py-2.5 px-5 rounded-full border border-gray-600 hover:bg-gray-50">Secondary</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-green-600 text-sm py-2.5 px-5 rounded-full border border-green-600 hover:bg-green-50">Success</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-red-600 text-sm py-2.5 px-5 rounded-full border border-red-600 hover:bg-red-50">Danger</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-yellow-600 text-sm py-2.5 px-5 rounded-full border border-yellow-600 hover:bg-yellow-50">Warning</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-gray-800 text-sm py-2.5 px-5 rounded-full border border-gray-800 hover:bg-gray-200">Dark</button>
                </div>
            </div>
        </div>

        <div class="card bg-white py-3 px-5 rounded-xl flex flex-col mb-5">
            <div class="title text-xl font-medium">Icon</div>
            <div class="w-full py-3">
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-blue-500 hover:bg-blue-600 hover:shadow-lg flex items-center">
                        <svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
                        </svg>
                        Primary
                    </button>
                </div>
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-gray-500 hover:bg-gray-600 hover:shadow-lg flex items-center">
                        <svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        Secondary
                    </button>
                </div>
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-green-500 hover:bg-green-600 hover:shadow-lg flex items-center">
                        <svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5" />
                        </svg>
                        Success
                    </button>
                </div>
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-red-500 hover:bg-red-600 hover:shadow-lg flex items-center">
                        <svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.618 5.984A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016zM12 9v2m0 4h.01" />
                        </svg>
                        Danger
                    </button>
                </div>
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-yellow-500 hover:bg-yellow-600 hover:shadow-lg flex items-center">
                        <svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                        </svg>
                        Warning
                    </button>
                </div>
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-purple-500 hover:bg-purple-600 hover:shadow-lg flex items-center">
                        <svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        Info
                    </button>
                </div>
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-gray-700 hover:bg-gray-900 hover:shadow-lg flex items-center">
                        <svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
                        </svg>
                        Dark
                    </button>
                </div>
            </div>
            <div class="w-full py-3">
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-blue-600 text-sm py-2.5 px-5 rounded-md border border-blue-600 hover:bg-blue-50 flex items-center">
                        <svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
                        </svg>
                        Primary
                    </button>
                </div>
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-gray-600 text-sm py-2.5 px-5 rounded-md border border-gray-600 hover:bg-gray-50 flex items-center">
                        <svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        Secondary
                    </button>
                </div>
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-green-600 text-sm py-2.5 px-5 rounded-md border border-green-600 hover:bg-green-50 flex items-center">
                        <svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5" />
                        </svg>
                        Success
                    </button>
                </div>
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-red-600 text-sm py-2.5 px-5 rounded-md border border-red-600 hover:bg-red-50 flex items-center">
                        <svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.618 5.984A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016zM12 9v2m0 4h.01" />
                        </svg>
                        Danger
                    </button>
                </div>
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-yellow-600 text-sm py-2.5 px-5 rounded-md border border-yellow-600 hover:bg-yellow-50 flex items-center">
                        <svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                        </svg>
                        Warning
                    </button>
                </div>
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-purple-600 text-sm py-2.5 px-5 rounded-md border border-purple-600 hover:bg-purple-50 flex items-center">
                        <svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        Info
                    </button>
                </div>
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-gray-800 text-sm py-2.5 px-5 rounded-md border border-gray-800 hover:bg-gray-200 flex items-center">
                        <svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
                        </svg>
                        Dark
                    </button>
                </div>
            </div>
        </div>

        <div class="card bg-white py-3 px-5 rounded-xl flex flex-col mb-5">
            <div class="title text-xl font-medium">Icon only</div>
            <div class="w-full py-3">
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-blue-500 hover:bg-blue-600 hover:shadow-lg">
                        <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
                        </svg>
                    </button>
                </div>
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-gray-500 hover:bg-gray-600 hover:shadow-lg">
                        <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </button>
                </div>
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-green-500 hover:bg-green-600 hover:shadow-lg">
                        <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5" />
                        </svg>
                    </button>
                </div>
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-red-500 hover:bg-red-600 hover:shadow-lg">
                        <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.618 5.984A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016zM12 9v2m0 4h.01" />
                        </svg>
                    </button>
                </div>
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-yellow-500 hover:bg-yellow-600 hover:shadow-lg">
                        <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                        </svg>
                    </button>
                </div>
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-purple-500 hover:bg-purple-600 hover:shadow-lg">
                        <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </button>
                </div>
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-gray-700 hover:bg-gray-900 hover:shadow-lg">
                        <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>

        <div class="card bg-white py-3 px-5 rounded-xl flex flex-col mb-5">
            <div class="title text-xl font-medium">Group</div>
            <div class="w-full py-3">
                <div class="flex inline-flex mr-2" role="group">
                    <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 bg-blue-500 rounded-l-md hover:bg-blue-600 hover:shadow-lg">Left</button>
                    <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 bg-blue-500 hover:bg-blue-600 hover:shadow-lg">Middle</button>
                    <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 bg-blue-500 rounded-r-md hover:bg-blue-600 hover:shadow-lg">Right</button>
                </div>

                <div class="flex inline-flex mr-2" role="group">
                    <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 bg-green-500 rounded-l-md hover:bg-green-600 hover:shadow-lg">Left</button>
                    <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 bg-green-500 hover:bg-green-600 hover:shadow-lg">Middle</button>
                    <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 bg-green-500 rounded-r-md hover:bg-green-600 hover:shadow-lg">Right</button>
                </div>

                <div class="flex inline-flex mr-2" role="group">
                    <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 bg-purple-500 rounded-l-md hover:bg-purple-600 hover:shadow-lg">Left</button>
                    <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 bg-purple-500 hover:bg-purple-600 hover:shadow-lg">Middle</button>
                    <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 bg-purple-500 rounded-r-md hover:bg-purple-600 hover:shadow-lg">Right</button>
                </div>
            </div>
        </div>

        <div class="card bg-white py-3 px-5 rounded-xl flex flex-col mb-5">
            <div class="title text-xl font-medium">Sizes</div>
            <div class="w-full py-3">
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-white text-md py-3 px-6 rounded-md bg-blue-500 hover:bg-blue-600 hover:shadow-lg">Large</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-blue-500 hover:bg-blue-600 hover:shadow-lg">Default</button>
                </div>
                <div class="inline-block mr-2 mt-2">
                    <button type="button" class="focus:outline-none text-white text-xs py-2 px-4 rounded-md bg-blue-500 hover:bg-blue-600 hover:shadow-lg">Small</button>
                </div>
            </div>
        </div>

    </div>
</div>

How to create a Button Component with Tailwind CSS?

To create a button component with Tailwind CSS, follow these steps:

Step 1: Install Tailwind CSS

First, you need to install Tailwind CSS in your project. You can install it using npm or yarn.

npm install tailwindcss

Step 2: Create a button component

Next, create a button component using the button element and apply some pre-defined classes. Here is an example of a primary button component:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Primary Button
</button>

In this example, we have applied the following classes:

  • bg-blue-500: sets the background color of the button to blue.
  • hover:bg-blue-700: sets the background color of the button to a darker shade of blue when the user hovers over it.
  • text-white: sets the text color of the button to white.
  • font-bold: sets the font weight of the button text to bold.
  • py-2: sets the padding on the top and bottom of the button to 0.5rem.
  • px-4: sets the padding on the left and right of the button to 1rem.
  • rounded: rounds the corners of the button.

You can customize the button component by changing the classes and values. For example, to create a secondary button component, you can use the following classes:

<button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded">
  Secondary Button
</button>

In this example, we have applied the following classes:

  • bg-gray-300: sets the background color of the button to gray.
  • hover:bg-gray-400: sets the background color of the button to a lighter shade of gray when the user hovers over it.
  • text-gray-800: sets the text color of the button to dark gray.
  • font-bold: sets the font weight of the button text to bold.
  • py-2: sets the padding on the top and bottom of the button to 0.5rem.
  • px-4: sets the padding on the left and right of the button to 1rem.
  • rounded: rounds the corners of the button.

Step 3: Customize the button component

You can customize the button component by changing the classes and values. For example, to change the background color of the button component, you can use the bg-* classes, where * is a color name or a hexadecimal code. To change the text color of the button component, you can use the text-* classes, where * is a color name or a hexadecimal code.

Here is an example of a customized button component:

<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-lg shadow-md">
  Custom Button
</button>

In this example, we have applied the following classes:

  • bg-green-500: sets the background color of the button to green.
  • hover:bg-green-700: sets the background color of the button to a darker shade of green when the user hovers over it.
  • text-white: sets the text color of the button to white.
  • font-bold: sets the font weight of the button text to bold.
  • py-3: sets the padding on the top and bottom of the button to 0.75rem.
  • px-6: sets the padding on the left and right of the button to 1.5rem.
  • rounded-lg: rounds the corners of the button with a larger radius.
  • shadow-md: adds a shadow to the button to give it a 3D effect.

Conclusion

In this article, we have learned how to create a button component using Tailwind CSS. We have seen how easy it is to create a button component with pre-defined classes and how we can customize it to fit our design needs. With Tailwind CSS, we can create responsive, accessible, and mobile-friendly button components quickly and efficiently.