3D Box

This tailwind example is contributed by $@(\/)(\/)¥, on 12-Apr-2024. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are loading, loader,Transitions

Spinner / Loading Animation

$$@(\/)(\/)¥ profile image$

Author $@(\/)(\/)¥

Tailwind v3.4 6.6k 10

Fork Fullscreen

<div class="w-full mx-auto h-screen [perspective:1000px] bg-[radial-gradient(rgb(5,_221,_245),_rgb(6,_150,_253))]">
    <div
        class="font-sans sm:h-[250px] sm:w-[250px] xs:h-[150px] xs:w-[150px] absolute sm:top-[30%] sm:left-[30%] xs:top-[40%] xs:left-[30%] [transform-style:preserve-3d] animate-[roll_5s_infinite]">
        <div
            class="box sm:[transform:translateZ(125px)] xs:[transform:translateZ(75px)]">
            Front</div>
        <div
            class="box sm:[transform:translateZ(-125px)] xs:[transform:translateZ(-75px)]">
            Back</div>
        <div
            class="box sm:right-[125px] xs:right-[75px] [transform:rotateY(-90deg)]">
            Left</div>
        <div
            class="box sm:left-[125px] xs:left-[75px] [transform:rotateY(90deg)]">
            Right</div>
        <div
            class="box sm:bottom-[125px] xs:bottom-[75px] [transform:rotateX(90deg)]">
            Top</div>
        <div
            class="box sm:top-[125px] xs:top-[75px] [transform:rotateX(-90deg)]">
            Bottom</div>
    </div>
</div>

Related Examples

Matha ghurainna Ball
Tailwind Spinner

khalidrootdevs

2 years ago

6.4k
Loading dots
Black Loading dots

Anonymous

2 years ago

40.6k
Spinner
The Spinner is a simple and visually appealing component that indicates ongoing processes like loading or data fetching. It's a great way to improve user engagement and reduce frustration during wait times. Different styles and animations (circular, dots, pulsating). Customizable size, color, and speed. Easy to integrate with loading states in any app. Lightweight and responsive.

Abhiraj

1 year ago

2.4k
Loading dots
Black Loading dots

Никита (Whiso)

1 year ago

2.7k
Ripple Animation

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.3k
Loading Spinner Component - Animated Circle Loader
Loading spinner component featuring a smooth animated circle loader with dashed border animation. Perfect for website loading states, content loading indicators, and improving user experience during page transitions. Easy to implement and customize for any project.

Homayoun

1 year ago

1.4k
Marquee animation with tailwind css

Anonymous

2 years ago

9.8k
change background color on scroll with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

3.6k
Animated Coming Soon Page 3

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.2k
Animated Profile Card
Animated profile card with profile completion circle

Shivam Vishwakarma

1 year ago

2.3k
Login Form
A modern Tailwind CSS animated login form featuring smooth transitions, premium UI styling, responsive layout, and interactive input effects. Designed for admin panels, SaaS dashboards, and secure web applications, this login template delivers a clean light-theme interface with professional animations and a high-end user experience.

shrenik khule

8 months ago

747
Responsive Cards with Hover Text Reveal Animation - Built with Tailwind CSS
nhance your website with these sleek, responsive cards designed using Tailwind CSS! Featuring a stylish hover animation, the text smoothly reveals when you hover over the card, adding a dynamic touch to your user interface. Perfect for portfolios, team profiles, or project showcases, this design adapts seamlessly to all screen sizes.

Abdul Baset Bappy

1 year ago

2.3k