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

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

10.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

1 year ago

18.1k
background animation
background animation

Author:
Anonymous

1 year ago

41.9k
Customer support chatbox
Floating chatbox

Author:
gmer33

1 year ago

10.3k
Updated customer details page
Customer details page

Author:
Olivia Smith

9 months ago

2.4k
Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Author:
Coastal UI

1 month ago

175
Calculator
This calculator uses CSS although it can be passed directly to tailwind

Author:
Ameth Galarcio

7 months ago

1.5k
free tailwind resume template
free tailwind resume template

Author:
Geoffrey Callaghan

1 year ago

3.1k
Skill showcase section for resume / porfolio website
show skill progression

Author:
Ava Brown

1 year ago

12.4k
color blur
blur

Author:
BocchiChan

1 month ago

218
Marquee Slider of Client Logos – Smooth Scrolling Brand Showcase
Enhance your website's credibility with a sleek marquee slider displaying client logos. This continuously scrolling slider provides a dynamic and engaging way to showcase your trusted partnerships, ensuring a professional and visually appealing design. Perfect for businesses, portfolios, and service-based websites.

Author:
SANJAY SINGH GARIYA

2 weeks ago

62
Tag Input field
This code creates a dynamic tag input field using HTML, JavaScript, and TailwindCSS. Users can type tags into the input field and press "Enter" to add them. Each tag is displayed inside the input field as a styled container with a remove button. The tag input is limited to a maximum of 5 tags, and an error message is shown if the limit is exceeded. Users can remove tags to free up space for new ones. The input field and tags are styled using TailwindCSS, ensuring a clean and responsive design.

Author:
Ranit Saha

2 months ago

422

Explore components by Tags

Didn't find component you were looking for?

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