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

1.1k

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

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

Author:
farid

7 months ago

1.1k
Fancy blog post card

Author:
Mr Robot

2 years ago

12.3k
Cards - Users Card
This Users Card design includes: 1. Responsive layout using Flexbox 2. Indigo-800 and Blue-900 color scheme 3. Dark mode support 4. User list with avatars, names, and roles 5. Hover effects on user items 6. "Add Member" button 7. Card footer with team member count 8. Subtle animations and transitions 9. Accessibility considerations (proper heading structure, color contrast) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The card has a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - User avatars have a border color that changes in dark mode - User items have a hover effect that scales them slightly - The "Add Member" button uses Indigo-800 with a Blue-900 hover state - Dark mode is automatically applied based on system preferences - The entire card fades in on load for a smooth entrance - The card has a hover effect that enhances its shadow This design provides a clean, professional look for displaying team members while incorporating the requested color scheme and maintaining good usability across different devices and color modes.

Author:
nejaa badr

10 months ago

1.8k
cards
group of cards

Author:
TakaMorY

3 weeks ago

44
Shopping Cart -Card

Author:
ABDO-SY

5 months ago

1.2k
avtarCard3

Author:
pablitodgb

2 months ago

407
Profile Card

Author:
Crimson

7 months ago

1k
Profile Card
User Profile Card with Name and Location

Author:
Anubhav Ranjan

11 months ago

1.9k
Signup And Signin page
Signup And Signin page with tab controller

Author:
Akram Khan

1 year ago

2.5k
Responsive Tailind css card
the best Responsive Card with image

Author:
irahoza daniel

3 months ago

300
Info cards for admin panal

Author:
Sophia Baker

2 years ago

9.4k
Article card

Author:
Sienna

2 years ago

9.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components