Home
$@(\/)(\/)Y
3D Box

3D Box

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

Spinner / Loading Animation

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

Author $@(\/)(\/)Y

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

Author:
khalidrootdevs

1 year ago

5.3k
Loading dots
Black Loading dots

Author:
Anonymous

1 year ago

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

Author:
Abhiraj

6 months ago

1.4k
Loading dots
Black Loading dots

Author:
Никита (Whiso)

6 months ago

1.3k
Ripple Animation

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

3 months ago

1.1k
Botton hover
On hover Changes text

Author:
davilaarroyo07

1 year ago

5.8k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

5 months ago

1k
car delivary
car delivary

Author:
Bonimater

1 month ago

32
E-Commerce Delivery Truck Animation
This responsive CSS animation showcases a delivery bus transporting a package to its destination, created entirely with Tailwind CSS and pure HTML. The animation features

Author:
Bonimater

1 month ago

266
Text Animation

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

3 months ago

611
3D Animated Image Gallery
3D Animated Image Gallery

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

7.5k
HOT DOGS WEB SITE
it combine the hot dogs delivary

Author:
bonheur dev

1 month ago

76

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components