Icon group

This tailwind example is contributed by Conan Hilton, on 30-Jan-2023. Component is made with Tailwind v3.4. It is responsive.

Tabs Other

Author Conan Hilton

Tailwind v3.4 10.3k 18

Fork Fullscreen

<div
    class="relative bg-white p-6 shadow-xl mx-auto w-full max-w-2xl rounded-2xl border-dashed border-2 border-gray-500">
    <div class="mx-auto flex w-full max-w-md flex-row justify-around">
        <a href="#">
            <svg xmlns="http://www.w3.org/2000/svg" height="48" width="48">
                <path
                    d="M11 39h7.5V26.5h11V39H37V19.5L24 9.75 11 19.5Zm-3 3V18L24 6l16 12v24H26.5V29.5h-5V42Zm16-17.65Z" />
            </svg>
            Home
        </a>
        <a href="#">
            <svg xmlns="http://www.w3.org/2000/svg" height="48" width="48">
                <path
                    d="M12 40q-3.3 0-5.65-2.35Q4 35.3 4 32V16q0-3.3 2.35-5.65Q8.7 8 12 8h24q3.3 0 5.65 2.35Q44 12.7 44 16v16q0 3.3-2.35 5.65Q39.3 40 36 40Zm0-23.5h24q1.45 0 2.725.45Q40 17.4 41 18.25V16q0-2.1-1.45-3.55Q38.1 11 36 11H12q-2.1 0-3.55 1.45Q7 13.9 7 16v2.25q1-.85 2.275-1.3Q10.55 16.5 12 16.5Zm-4.85 6.8L31 29.05q.35.1.725.025.375-.075.625-.325l8-6.7q-.65-1.15-1.8-1.85-1.15-.7-2.55-.7H12q-1.75 0-3.1 1.075T7.15 23.3Z" />
            </svg>
            Budget
        </a>
        <a href="#">
            <svg xmlns="http://www.w3.org/2000/svg" height="48" width="48">
                <path
                    d="M12 28.05h15.65v-3H12Zm0-6.5h24v-3H12Zm0-6.5h24v-3H12ZM4 44V7q0-1.15.9-2.075Q5.8 4 7 4h34q1.15 0 2.075.925Q44 5.85 44 7v26q0 1.15-.925 2.075Q42.15 36 41 36H12Zm3-7.25L10.75 33H41V7H7ZM7 7v29.75Z" />
            </svg>
            Message
        </a>
        <a href="#">
            <svg xmlns="http://www.w3.org/2000/svg" height="48" width="48">
                <path
                    d="M24 23.95q-3.3 0-5.4-2.1-2.1-2.1-2.1-5.4 0-3.3 2.1-5.4 2.1-2.1 5.4-2.1 3.3 0 5.4 2.1 2.1 2.1 2.1 5.4 0 3.3-2.1 5.4-2.1 2.1-5.4 2.1ZM8 40v-4.7q0-1.9.95-3.25T11.4 30q3.35-1.5 6.425-2.25Q20.9 27 24 27q3.1 0 6.15.775 3.05.775 6.4 2.225 1.55.7 2.5 2.05.95 1.35.95 3.25V40Zm3-3h26v-1.7q0-.8-.475-1.525-.475-.725-1.175-1.075-3.2-1.55-5.85-2.125Q26.85 30 24 30t-5.55.575q-2.7.575-5.85 2.125-.7.35-1.15 1.075Q11 34.5 11 35.3Zm13-16.05q1.95 0 3.225-1.275Q28.5 18.4 28.5 16.45q0-1.95-1.275-3.225Q25.95 11.95 24 11.95q-1.95 0-3.225 1.275Q19.5 14.5 19.5 16.45q0 1.95 1.275 3.225Q22.05 20.95 24 20.95Zm0-4.5ZM24 37Z" />
            </svg>
            Account
        </a>
    </div>
</div>

Related Examples

Tab navigation with alpine JS

Mr Robot

4 years ago

18k
Invoice template

Shakti

3 years ago

28.8k
Tab navigation buttons

Simon Scheffer

3 years ago

18.2k
cards
cards with background animation

Anonymous

3 years ago

12.6k
Show user details

Lucas Martinez

3 years ago

26.2k
Tab Switch
tab-switching example with tailwind and vanilla JS

Prajwal Hallale

3 years ago

7.9k
Google map iframe with tailwind

Kofi Osei

3 years ago

22.4k
Customer support chatbox
Floating chatbox

gmer33

3 years ago

12.2k
Typewriter effect
using javascript

Samuel Dawson

3 years ago

43.6k
Typewriter animation effect
Build using only Tailwind CSS; no JavaScript is required. This is a continuous typing effect. If you want to stop it after the text is typed for the first time, then you can remove 'infinite' from [typing: 'typing 2s steps(20) infinite alternate, blink .7s infinite'] from the config file.

Samuel Dawson

3 years ago

22k
Working tabs switch

Fagundo67

3 years ago

15.7k
Switch tabs button

gmer33

3 years ago

17.2k
Tabs section

Simon Scheffer

3 years ago

14.7k