Tailwind button group style example

tailwind

Here is an example of a button group styled using Tailwind CSS classes:


<div class="flex justify-center space-x-4">
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">
        Button 1
    </button>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">
        Button 2
    </button>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">
        Button 3
    </button>
</div>

In this example, the flex class makes the button group a flex container, the justify-center class aligns the buttons horizontally in the center of the container, the space-x-4 class adds spacing between the buttons horizontally, and the bg-blue-500, hover:bg-blue-700, text-white, font-bold, py-2, px-4, and rounded-full classes style the buttons as described in the previous answer.

You can customize this button group by modifying the classes used or by adding additional classes as needed. For example, you can use the focus:outline-none class to remove the focus outline from the buttons, or the transition-colors class to add a smooth color transition when the buttons are hovered or focused.

Here is an example of a customized button group:


<div class="flex justify-center space-x-4">
    <button
        class="bg-pink-500 hover:bg-pink-700 focus:bg-pink-800 text-white font-bold py-2 px-4 rounded-full focus:outline-none transition-colors duration-150">
        Button 1
    </button>
    <button
        class="bg-pink-500 hover:bg-pink-700 focus:bg-pink-800 text-white font-bold py-2 px-4 rounded-full focus:outline-none transition-colors duration-150">
        Button 2
    </button>
    <button
        class="bg-pink-500 hover:bg-pink-700 focus:bg-pink-800 text-white font-bold py-2 px-4 rounded-full focus:outline-none transition-colors duration-150">
        Button 3
    </button>
</div>

In this example, the focus:bg-pink-800 class sets the background color to a light pink on focus, the focus:outline-none class removes the focus outline, and the transition-colors class adds a smooth color transition when the buttons are hovered or focused with a duration of 150 milliseconds.