Home
Lukas Müller
Play, Pause and Stop buttons

Play, Pause and Stop buttons

This tailwind example is contributed by Lukas Müller, on 11-Jan-2023. Component is made with Tailwind CSS v3.

Button Group Other

Author Lukas Müller

10.7k

6

Fork Fullscreen

<div class="flex flex-wrap justify-center gap-10 grow">
    <div
        class="w-12 h-12 flex flex-row items-center gap-2 justify-center bg-slate-200 rounded-full shadow-lg hover:cursor-pointer hover:shadow-xl hover:bg-slate-300 hover:scale-105">
        <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24"
            class="text-slate-500 font-bold" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M12.48,3.43A9.09,9.09,0,0,1,18.3,5.55V2.35h1.64v6.5h-6.5V7.21H17.7a7.46,7.46,0,1,0,1.47,8.65l1.46.73A9.11,9.11,0,1,1,12.48,3.43Z">
            </path>
        </svg>
    </div>
    <div
        class="w-16 h-16 flex flex-row items-center gap-2 justify-center bg-red-500 rounded-full shadow-lg hover:cursor-pointer hover:drop-shadow-xl hover:bg-red-600 hover:scale-105">
        <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512"
            class="text-slate-200 hover:scale-125" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z">
            </path>
        </svg>
    </div>
    <div
        class="w-12 h-12 flex flex-row items-center gap-2 justify-center bg-slate-200 rounded-full shadow-lg hover:cursor-pointer hover:shadow-xl hover:bg-slate-300 hover:scale-105">
        <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" class="text-slate-500"
            height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48z">
            </path>
        </svg>
    </div>

</div>

Related Examples

Upvote downvote buttons

Author:
Lucas Martinez

2 years ago

11.1k
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.

Author:
Samuel Dawson

1 year ago

19k
background animation
background animation

Author:
Anonymous

1 year ago

44.6k
Lots of button examples
tailwind button examples

Author:
QQ-VVN

2 weeks ago

131
button animation
button animation big

Author:
QQ-VVN

2 weeks ago

102
Chat template
fullscreen chat template suitable for mobile devices

Author:
Manon Daniel

2 years ago

16.8k
Old style Button Designs

Author:
Amit Pachange

2 years ago

9.4k
Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Author:
Abhiraj

4 months ago

488
Table CRUD
CRUD TABLE DESIGN

Author:
Abhiraj

3 months ago

1.4k
Buttons in pair

Author:
Amit Pachange

2 years ago

10.1k
coffee
a beverage brewed from the roasted and ground seeds of the tropical evergreen coffee plant. Coffee is one of the three most popular beverages in the world (alongside water and tea), and it is one of the most profitable international commodities

Author:
Augustin

1 week ago

172
Simple Login & Register Page
Login and Register Page using Tailwind, Alpine JS, and Fontawesome

Author:
Ahita Bisma Adlula

3 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1