Button Group

This tailwind example is contributed by TailwindFlex, on 25-Sep-2022. Component is made with Tailwind v3.4.

Tailwind v3.4 10k 10

<nav class="flex gap-3 flex-wrap justify-center text-lg">
    <a class="text-center my-2 inline-block w-40 rounded-full bg-blue-800 bg-opacity-10 px-4 py-2 font-semibold text-blue-800 duration-200 hover:bg-opacity-95 hover:text-white hover:no-underline sm:w-48"
        href="/react">React</a>
    <a class="text-center my-2 inline-block w-40 rounded-full bg-blue-800 bg-opacity-10 px-4 py-2 font-semibold text-blue-800 duration-200 hover:bg-opacity-95 hover:text-white hover:no-underline sm:w-48"
        href="/solid">Solid</a>
    <a class="text-center my-2 inline-block w-40 rounded-full bg-blue-800 bg-opacity-10 px-4 py-2 font-semibold text-blue-800 duration-200 hover:bg-opacity-95 hover:text-white hover:no-underline sm:w-48"
        href="/svelte">Svelte</a>
    <a class="text-center my-2 inline-block w-40 rounded-full bg-blue-800 bg-opacity-10 px-4 py-2 font-semibold text-blue-800 duration-200 hover:bg-opacity-95 hover:text-white hover:no-underline sm:w-48"
        href="/vue">Vue</a>
    <a class="text-center my-2 inline-block w-40 rounded-full bg-blue-800 bg-opacity-10 px-4 py-2 font-semibold text-blue-800 duration-200 hover:bg-opacity-95 hover:text-white hover:no-underline sm:w-48"
        href="/angular">Angular</a>
</nav>

Related Examples

Tag Cloud
Tag cloud with sub-sections

Prajwal Hallale

3 years ago

13.2k
Radio Button Group for Search Filters
set of radio buttons grouped for selecting different search filters

Prajwal Hallale

2 years ago

5.7k
Tag/Button Cloud
Responsive tag cloud. Made with Flex-Box

TailwindFlex

4 years ago

12.5k
Button cloud for categories,tags etc

Kris Showen

3 years ago

14k
Minimal tag cloud design with heading text

Rafferty Kim

3 years ago

10.9k
Tag links component

Arya

3 years ago

10.2k
Hashtag Pills
Minimal hastag cloud

TailwindFlex

4 years ago

13.6k
Button with hover to button shadow
A beautiful button with a special shadow

Zayed Hossain

2 years ago

1.9k
GitHub

МОЙДОЫР

11 months ago

1k
Acode Master
Acode Master is a skilled and passionate software developer known for mastering coding and creating innovative tech solutions. Specializing in modern web technologies like React.js, Node.js, PHP, and databases such as MySQL and PostgreSQL, Acode Master builds practical, efficient, and scalable applications. Beyond coding, Acode Master is dedicated to continuous learning, sharing knowledge, and empowering others through technology-driven projects and education.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

2.1k
Button group involves using utility classes
Background colors, hover effects, and animations to the button group using only Tailwind CSS

zobaidul kaziex

1 year ago

1.8k
Sign in with buttons

Simon Scheffer

3 years ago

12k