Home
Crimson
Pokemon!

Pokemon!

Cool Pokemon card!

This tailwind example is contributed by Crimson, on 14-Jan-2025. Component is made with Tailwind CSS v3. It is responsive.

Card

Author Crimson

997

Fork Fullscreen

.card {
            position: relative;
            transform-style: preserve-3d;
            transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
        }

.card:hover {
            transform: rotateY(10deg) rotateX(5deg) scale(1.05);
            filter: brightness(1.1);
        }

.holo-effect {
            background: linear-gradient(
                125deg,
                rgba(255,255,255,0) 0%,
                rgba(255,255,255,0.3) 10%,
                rgba(255,255,255,0.6) 45%,
                rgba(255,255,255,0.3) 90%,
                rgba(255,255,255,0) 100%
            );
            mix-blend-mode: overlay;
        }

.energy-symbol {
            background: conic-gradient(
                from 0deg,
                #ff8a00,
                #e52e71,
                #ff8a00
            );
            filter: blur(1px);
        }

.card-shine {
            background: linear-gradient(
                125deg,
                transparent 0%,
                rgba(255,255,255,0.3) 25%,
                transparent 50%
            );
        }

.sparkles::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: 
                radial-gradient(circle at 20% 30%, white 0%, transparent 2%),
                radial-gradient(circle at 80% 20%, white 0%, transparent 2%),
                radial-gradient(circle at 40% 70%, white 0%, transparent 2%),
                radial-gradient(circle at 70% 50%, white 0%, transparent 2%),
                radial-gradient(circle at 60% 30%, white 0%, transparent 2%),
                radial-gradient(circle at 30% 40%, white 0%, transparent 2%),
                radial-gradient(circle at 90% 60%, white 0%, transparent 2%);
            opacity: 0;
            animation: sparkle 4s ease-in-out infinite;
        }

.type-fire {
            background: linear-gradient(45deg, #ff8a00, #e52e71);
            animation: rainbow 6s linear infinite;
        }

.rainbow-border {
            position: absolute;
            inset: -2px;
            background: linear-gradient(45deg, #ff8a00, #e52e71, #ff8a00, #e52e71);
            background-size: 200% 200%;
            animation: shine 4s linear infinite;
            border-radius: 1rem;
            z-index: -1;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

.card:hover .rainbow-border {
            opacity: 1;
        }

.glow-effect {
            position: absolute;
            inset: -20px;
            background: radial-gradient(circle at center, rgba(255,138,0,0.3), transparent 70%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

.card:hover .glow-effect {
            opacity: 1;
            animation: pulse-glow 2s ease-in-out infinite;
        }

.shine-lines {
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(
                45deg,
                transparent,
                transparent 10px,
                rgba(255,255,255,0.1) 10px,
                rgba(255,255,255,0.1) 20px
            );
            animation: tilt-shine 1.5s ease-in-out infinite;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

.card:hover .shine-lines {
            opacity: 1;
        }

.pokemon-image {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            z-index: 10;
            transform-style: preserve-3d;
            transition: transform 0.3s ease;
            filter: drop-shadow(0 0 10px rgba(255, 138, 0, 0.3));
        }

.card:hover .pokemon-image {
            transform: scale(1.1) translateZ(20px);
            filter: drop-shadow(0 0 20px rgba(255, 138, 0, 0.5));
        }
    </style>
</head>
<body class="bg-neutral-900 min-h-screen flex items-center justify-center p-4">
    
    <div class="card-container animate-float">
        
        <div class="card w-72 sm:w-80 rounded-xl overflow-hidden">
            
            <div class="glow-effect"></div>
            
            <div class="rainbow-border"></div>
            
            <div class="relative bg-gradient-to-br from-orange-400 via-amber-500 to-rose-500 p-3 rounded-xl">
                
                <div class="shine-lines"></div>
                
                <div class="flex justify-between items-start mb-2">
                    <h2 class="text-lg font-bold text-white">Charizard</h2>
                    <div class="flex items-center gap-1">
                        <span class="text-white font-bold">HP</span>
                        <span class="text-white font-bold">120</span>
                    </div>
                </div>

<div class="relative aspect-square mb-3 rounded-lg overflow-hidden">
                    <div class="absolute inset-0 bg-gradient-to-br from-orange-200 to-rose-200"></div>
                    <div class="absolute inset-0 holo-effect animate-holo-glow"></div>
                    <div class="absolute inset-0 card-shine"></div>
                    <div class="absolute inset-0 sparkles"></div>
                    <div class="absolute inset-0 flex items-center justify-center">
                        <div class="w-48 h-48 energy-symbol rounded-full animate-energy-spin opacity-20"></div>
                    </div>
                    
                    <img 
                        src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/6.png"
                        alt="Charizard"
                        class="pokemon-image"
                    />
                </div>

<div class="bg-white/90 backdrop-blur rounded-lg p-3 space-y-3">
                    
                    <div class="flex items-center gap-2">
                        <span class="type-fire text-white text-xs px-2 py-1 rounded-full">Fire</span>
                        <span class="text-xs text-neutral-600">Stage 2</span>
                    </div>

<div class="space-y-2">
                        <div class="flex items-start gap-2">
                            <div class="flex gap-1">
                                <div class="w-4 h-4 rounded-full bg-gradient-to-br from-orange-400 to-red-500 animate-pulse-glow"></div>
                                <div class="w-4 h-4 rounded-full bg-gradient-to-br from-orange-400 to-red-500 animate-pulse-glow"></div>
                            </div>
                            <div>
                                <h3 class="font-bold text-sm">Fire Spin</h3>
                                <p class="text-xs text-neutral-600">Discard 2 Energy cards attached to Charizard in order to use this attack.</p>
                            </div>
                            <span class="font-bold ml-auto">100</span>
                        </div>
                    </div>

<div class="flex items-center justify-between text-xs pt-2 border-t border-neutral-200">
                        <div>
                            <span class="text-neutral-600">Weakness</span>
                            <span class="ml-1 type-fire text-white px-2 py-0.5 rounded-full">Water</span>
                        </div>
                        <div>
                            <span class="text-neutral-600">Resistance</span>
                            <span class="ml-1 bg-neutral-200 px-2 py-0.5 rounded-full">-30</span>
                        </div>
                        <div>
                            <span class="text-neutral-600">Retreat Cost</span>
                            <span class="ml-1 bg-neutral-800 text-white px-2 py-0.5 rounded-full">3</span>
                        </div>
                    </div>
                </div>

<div class="mt-3 text-[10px] text-white/80 text-center italic">
                    Spits fire that is hot enough to melt boulders. Known to unintentionally cause forest fires. ©2024 Pokemon
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Related Examples

Info cards for admin panal

Author:
Sophia Baker

2 years ago

9.2k
Service/Product card
Tour trip booking showcase card

Author:
JaxStone

2 years ago

12.5k
Material 3 Cards [Light]
Cards that conform to Google's Material 3 design guidelines and themes

Author:
Nick Girga

2 months ago

323
Image card with overlay text overlay

Author:
Santos78

2 years ago

30.6k
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Author:
Hamza Atig

3 months ago

328
Update Profile
Update profile page with basic informations

Author:
Sedat Kumcu

9 months ago

1.9k
Stats card with icons
Improved Code quality and added support for dark mode

Author:
Dika Rahman

10 months ago

1.4k
Showcase Card

Author:
Jaber Zarif

1 year ago

1.9k
Hover effect card

Author:
Samuel Dawson

2 years ago

30.1k
Card
Card with Likes and download Button

Author:
Mrunal Solkar

1 year ago

10k
card
card

Author:
5upreme505

9 months ago

1.2k
image

Author:
pablitodgb

1 month ago

33

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components