Home
Bonimater
3D card

3D card

it is a 3D card

This tailwind example is contributed by Bonimater, on 28-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Card

Author Bonimater

976

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>3D Flip Card with Tailwind</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    .flip-card {
      perspective: 1000px;
    }

.flip-inner {
      transition: transform 0.8s;
      transform-style: preserve-3d;
    }

.flipped {
      transform: rotateY(180deg);
    }

.flip-front, .flip-back {
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }

.flip-back {
      transform: rotateY(180deg);
    }
  </style>
</head>
<body class="bg-gradient-to-br from-purple-500 to-indigo-700 min-h-screen flex items-center justify-center">

<div class="flip-card w-80 h-48" onclick="flipCard(this)">
    <div class="flip-inner relative w-full h-full">
      
      <div class="flip-front absolute w-full h-full bg-white text-black flex items-center justify-center rounded-xl shadow-xl text-xl font-bold">
        Click Me (Front)
      </div>
      
      <div class="flip-back absolute w-full h-full bg-indigo-600 text-white flex items-center justify-center rounded-xl shadow-xl text-xl font-bold">
        Hello! (Back)
      </div>
    </div>
  </div>

</body>
</html>

Related Examples

3D Card
Made a 3d card using tailwind css and the js

Author:
Sufyan jutt

2 weeks ago

45
Product card

Author:
Simon Scheffer

3 years ago

31.5k
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Author:
Hamza Atig

9 months ago

1.2k
Auto-Flipping 3D Profile Card with Tailwind CSS
This project showcases a 3D auto-flipping profile card built with HTML, Tailwind CSS, and vanilla JavaScript. The front side displays the user’s photo, name, and role, while the back side reveals contact information. The card flips automatically every few seconds to add a dynamic, engaging feel—perfect for portfolios or personal websites.

Author:
irahoza daniel

8 months ago

842
Profile, Team or Testimonial
Profile, Team or Testimonial

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

1 year ago

3.7k
Cards Seaction - Services block

Author:
ABDO-SY

10 months ago

1.6k
Service/Product card
Tour trip booking showcase card

Author:
JaxStone

3 years ago

13k
Admin dashboard cards
Card groups for showing stats/info. Change it for responsiveness for small and medium screen

Author:
farisubuntu

1 year ago

2.9k
Responsive card with image

Author:
Simon Scheffer

3 years ago

11.2k
Animated cards

Author:
Michael Andreuzza

1 year ago

6.9k
card
simple card for begin

Author:
Omer fils ELENGA

11 months ago

2.1k
Coard Component 299b
un

Author:
Kaung Htet Min

3 months ago

362

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components