Tailwind button group style example
tailwindHere 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.
Other Article on Tag tailwind
- - Tailwind add padding in t-head and body
- - Tailwind Breadcrumb style example
- - Tailwind button group style example
- - Tailwind button style example
- - Tailwind card component example
- - Tailwind create component in an Angular project
- - Tailwind CSS accordion style example
- - Tailwind CSS advantages and disadvantages
- - Tailwind CSS dropdown style example
- - Tailwind CSS install to angular