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

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

2 years ago

19.5k
background animation
background animation

Author:
Anonymous

1 year ago

46.9k
Lots of button examples
tailwind button examples

Author:
QQ-VVN

2 months ago

207
button animation
button animation big

Author:
QQ-VVN

2 months ago

192
5 Different Style of Button
Gradient Button outline button neon button Sliding Background pulsing Button

Author:
KULDEEP

1 month ago

43
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

3 months ago

481
Boarding Pass Design
Testing out a layout and design for a digital boarding pass

Author:
Kirsten F

1 month ago

245
Age verification 18+

Author:
Maxim

7 months ago

532
Tag links component

Author:
Arya

2 years ago

8.7k
Contact Us / Enquiry-form Responsive

Author:
KULDEEP

1 month ago

239
default template

Author:
Anonymous

2 months ago

183

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