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

1.1k

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

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

11 months ago

1.3k
Image cards

Author:
Reuben Enahoro

1 year ago

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

Author:
RShubham kumar

2 years ago

4.6k
Products Layout
An ecommerce store front product list layout

Author:
Developer Kwame

6 months ago

567
Responsive Features Section

Author:
ariaw

11 months ago

963
Product card

Author:
Oliver Hansen

3 years ago

10.1k
Skill Cards with Tailwind CSS
A responsive and modern card section designed with Tailwind CSS to showcase professional skills. Each card features a smooth fade-in animation and hover scaling effect for an engaging user experience. Ideal for portfolio websites, developer profiles, and personal branding pages. Fully customizable and mobile-friendly.

Author:
irahoza daniel

10 months ago

874
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Author:
Coastal UI

11 months ago

455
A product card with size selector
Using alpine it shows a size selector when clicking in cart

Author:
farid

1 year ago

1.4k
Blog post cards
responsive blog post cards

Author:
Mr Robot

3 years ago

12.8k
card simple

Author:
Raul antonio de la cruz hernandez

1 month ago

156
Card template

Author:
Raul antonio de la cruz hernandez

2 months ago

255

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components