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

672

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

cards
group of cards

Author:
TakaMorY

3 months ago

249
Info cards for admin panel

Author:
Sophia Baker

2 years ago

11.7k
Avtar Cards
this is cards, for the profile section

Author:
pablitodgb

5 months ago

233
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

7 months ago

979
Gridaient Card Information Section
a card in neon design

Author:
Akram Khan

1 year ago

2.3k
Card

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

10 months ago

1.5k
Card
Jobs recommended for you LinkedIn Clone

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

7 months ago

906
Tailwind Card Components
A collection of 20+ copy-paste ready card components built with pure HTML and Tailwind CSS. Includes product cards, profile cards, article cards, pricing cards, testimonials, and notifications.

Author:
Ijila Itunu

2 months ago

208
Image Card
An image. Shows title and description info when hovering. Image zooms and darkens when hovering.

Author:
Nick Girga

7 months ago

754
Form package

Author:
Hunter Guru

1 year ago

2.6k
Info card for admin panal
Show stats on your dashboard

Author:
Arya

3 years ago

12.9k
Issue card
card designed to display the details of a technical issue

Author:
ABDO-SY

9 months ago

2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components