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

10k

5

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

1 year ago

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

16.1k
background animation
background animation

Author:
Anonymous

1 year ago

37.1k
Typewriter effect in tailwindcss with this simple trick
source: https://dev.to/lazysock/make-a-typewriter-effect-with-tailwindcss-in-5-minutes-dc

Author:
Anonymous

1 year ago

9.7k
Concert ticket

Author:
Elijah Davis

1 year ago

11.8k
Disabled Button & Active Button

Author:
Dipti narayan

1 year ago

31k
Simple dialpad

Author:
Brandon D

1 year ago

10.3k
Icon group

Author:
Conan Hilton

1 year ago

8.9k
Collapsible content

Author:
Rafferty Kim

1 year ago

12.4k
Sharp corner button design
button with hover effect

Author:
Amit Pachange

1 year ago

10.8k
Button Group

Author:
TailwindFlex

2 years ago

7.9k
Chat template
fullscreen chat template suitable for mobile devices

Author:
Manon Daniel

1 year ago

14.9k

Explore components by Tags

Didn't find component you were looking for?

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

© 2024 TailwindFlex. All Rights Reserved.

v1.9