3D Card | Faisal Husain

Global Bank

4242 4242 4242 4242

Card Holder

John Doe

Expires

12/25

Authorized Signature

Bank Info

Your Bank Details

CVV

123

The above card you looking at is made from code below . This is made using Tailwind CSS .This is the closest I got with TailwindCSS .Please let me know if it can be improved.

import Image from 'next/image'
 
interface Final3DCardProps {
  cardNumber: string
  cardHolder: string
  bankName: string
  expiryDate: string
  cvv: string
}
 
const Final3DCard = ({
  cardNumber = '4242 4242 4242 4242',
  cardHolder = 'John Doe',
  bankName = 'Global Bank',
  expiryDate = '12/25',
  cvv = '123',
}: Final3DCardProps) => {
  return (
    <div className="flex items-center justify-center">
      <div className="group aspect-video w-96 my-20 [perspective:1000px] ">
        <div className="relative h-full rounded-xl transition-all duration-500 [transform-style:preserve-3d] hover:[transform:rotateY(180deg)]">
          <div className="absolute h-full w-full bg-gradient-to-br from-blue-800 to-purple-900 rounded-xl [backface-visibility:hidden] [transform:rotateY(0deg)] shadow-xl">
            <div className="p-6">
              <div className="text-lg font-bold text-white">{bankName}</div>
              <div className="flex items-center ">
                <Image
                  src={'/chip.png'}
                  alt="chip"
                  height={50}
                  width={50}
                  className="mt-2 mb-2 "
                />
              </div>
              <div className="mt-1 text-xl font-mono tracking-widest text-white">
                {cardNumber}
              </div>
              {/* Card Holder and Expiry */}
              <div className="mt-4 flex justify-between text-white">
                <div>
                  <div className="text-xs uppercase">Card Holder</div>
                  <div className="text-sm font-semibold">{cardHolder}</div>
                </div>
                <div>
                  <div className="text-xs uppercase">Expires</div>
                  <div className="text-sm font-semibold">{expiryDate}</div>
                </div>
              </div>
            </div>
          </div>
 
          <div className="absolute h-full w-full bg-gray-800 rounded-xl p-6 text-slate-200 [backface-visibility:hidden] shadow-xl [transform:rotateY(180deg)] ">
            <div className="h-12 w-full bg-black rounded-sm"></div>
            <div className="mt-4">
              <div className="text-xs uppercase text-gray-400">
                Authorized Signature
              </div>
              <div className="mt-2 h-8 bg-gray-700 rounded-sm"></div>
            </div>
            <div className="mt-3 flex justify-between text-white">
              <div>
                <div className="text-xs uppercase text-gray-400">Bank Info</div>
                <div className="text-sm font-semibold">Your Bank Details</div>
              </div>
              <div>
                <div className="text-xs uppercase text-gray-400">CVV</div>
                <div className="text-sm font-semibold">{cvv}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
 
export default Final3DCard

This is all fancy stuff I did to make a basic card you need this only

Basic Card

Front Side

Back Side

Below is the code for a basic card.

"use client";
import React from "react";
 
const Basic3DCard = () => {
  return (
    <div
      className="bg-black h-[400px] flex items-center justify-center w-full [perspective:1000px]"
    >
      <div
        className="relative aspect-video w-[300px] transition-transform duration-500 group [transform-style:preserve-3d] hover:[transform:rotateY(180deg)]"
      >
        <div
          className="absolute inset-0 h-full w-full bg-green-600 grid place-items-center text-lg font-bold rounded-lg [backface-visibility:hidden] [transform:rotateY(0deg)]"
        >
          Front Side
        </div>
 
        <div
          className="absolute inset-0 h-full w-full bg-blue-300 grid place-items-center text-lg font-bold rounded-lg [backface-visibility:hidden] [transform:rotateY(180deg)]"
        >
          Back Side
        </div>
      </div>
    </div>
  );
};
 
export default Basic3DCard;