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

11.4k

7

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

3 years ago

11.7k
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

21.3k
background animation
background animation

Author:
Anonymous

2 years ago

50.8k
Lots of button examples
tailwind button examples

Author:
QQ-VVN

10 months ago

603
button animation
button animation big

Author:
QQ-VVN

10 months ago

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

Author:
KULDEEP

8 months ago

535
ForK blocks animations
ForK blocks animations

Author:
Yor Rodriguez

1 year ago

1.7k
Solo leveling 2
Animation & movie field,videos,games.

Author:
ORGIN_DREAMS

9 months ago

877
Attractive Feature Section
With Gradient Color 6 Features

Author:
KULDEEP

8 months ago

909
Full HTML Version
What's Included: Title*: Required input Description: Optional textarea Fully responsive and dark mode ready Simple validation (required on title)

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

762
Clean & Responsive Footer Design with Tailwind CSS With CTA Button
modern and responsive footer built with Tailwind CSS to enhance website navigation, accessibility, and user experience. Featuring quick links, social media icons, copyright info, and a sleek layout, this SEO-friendly footer improves engagement and usability across all devices. Perfect for portfolios, business websites, and eCommerce stores!

Author:
Abdul Baset Bappy

11 months ago

1.1k
Invoice
Invoice

Author:
Ameth Galarcio

1 year ago

2.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ 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

© 2026 TailwindFlex. All Rights Reserved.

v1.12