Card Components

Beautiful, responsive card components built with TailwindCSS. Perfect for product displays, content showcases, and interactive elements. Copy, paste, and customize for React, Vue, or HTML.

1. Minimal Clean Card

Simple, clean card design perfect for displaying content with minimal visual noise.

Modern Design

Clean and minimal design principles for modern web applications.

Responsive Layout

Fully responsive components that work on all device sizes.

Easy Integration

Simple copy-paste integration with your existing projects.

<!-- Minimal Clean Card -->
<div class="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200 overflow-hidden">
    <div class="aspect-[16/10] bg-gradient-to-br from-violet to-purple-600"></div>
    <div class="p-6">
        <h3 class="text-lg font-semibold mb-2">Modern Design</h3>
        <p class="text-gray-600 text-sm mb-4 leading-relaxed">Clean and minimal design principles for modern web applications.</p>
        <button class="text-violet font-medium text-sm hover:underline">Learn more →</button>
    </div>
</div>

<!-- With Image -->
<div class="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200 overflow-hidden">
    <img src="https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=400&h=250&fit=crop" alt="Card Image" class="w-full aspect-[16/10] object-cover">
    <div class="p-6">
        <h3 class="text-lg font-semibold mb-2">Card Title</h3>
        <p class="text-gray-600 text-sm mb-4 leading-relaxed">Your card description goes here. Keep it concise and engaging.</p>
        <button class="text-violet font-medium text-sm hover:underline">Learn more →</button>
    </div>
</div>
<template>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <div v-for="card in cards" :key="card.id" class="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200 overflow-hidden">
      <div :class="card.gradient" class="aspect-[16/10]"></div>
      <div class="p-6">
        <h3 class="text-lg font-semibold mb-2">
        
        </h3>
        <p class="text-gray-600 text-sm mb-4 leading-relaxed">
        
        </p>
        <button @click="handleLearnMore(card)" class="text-violet font-medium text-sm hover:underline">
          Learn more →
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
const cards = [
  {
    id: 1,
    title: "Modern Design",
    description: "Clean and minimal design principles for modern web applications.",
    gradient: "bg-gradient-to-br from-violet to-purple-600"
  },
  {
    id: 2,
    title: "Responsive Layout", 
    description: "Fully responsive components that work on all device sizes.",
    gradient: "bg-gradient-to-br from-emerald-500 to-teal-600"
  },
  {
    id: 3,
    title: "Easy Integration",
    description: "Simple copy-paste integration with your existing projects.",
    gradient: "bg-gradient-to-br from-orange-500 to-red-500"
  }
]

const handleLearnMore = (card) => {
  console.log('Learn more clicked for:', card.title)
}
</script>
import React from 'react'

const MinimalCards = () => {
  const cards = [
    {
      id: 1,
      title: "Modern Design",
      description: "Clean and minimal design principles for modern web applications.",
      gradient: "bg-gradient-to-br from-violet to-purple-600"
    },
    {
      id: 2,
      title: "Responsive Layout", 
      description: "Fully responsive components that work on all device sizes.",
      gradient: "bg-gradient-to-br from-emerald-500 to-teal-600"
    },
    {
      id: 3,
      title: "Easy Integration",
      description: "Simple copy-paste integration with your existing projects.",
      gradient: "bg-gradient-to-br from-orange-500 to-red-500"
    }
  ]

  const handleLearnMore = (card) => {
    console.log('Learn more clicked for:', card.title)
  }

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {cards.map((card) => (
        <div key={card.id} className="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200 overflow-hidden">
          <div className={`${card.gradient} aspect-[16/10]`}></div>
          <div className="p-6">
            <h3 className="text-lg font-semibold mb-2">{card.title}</h3>
            <p className="text-gray-600 text-sm mb-4 leading-relaxed">{card.description}</p>
            <button onClick={() => handleLearnMore(card)} className="text-violet font-medium text-sm hover:underline">
              Learn more →
            </button>
          </div>
        </div>
      ))}
    </div>
  )
}

export default MinimalCards

2. Neobrutalist Card

Bold, high-contrast cards with thick borders and strong shadows for modern designs.

⚡
NEW

Lightning Fast

Ultra-fast performance that will blow your mind. No compromises.

$49

Premium Quality

Top-tier components built with attention to every detail.

<!-- Product Neobrutalist Card -->
<div class="bg-white border-4 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] hover:shadow-[12px_12px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-2px] hover:translate-y-[-2px] transition-all duration-200 rounded-xl flex flex-col">
    <div class="relative">
        <div class="flex items-center justify-center text-4xl font-black bg-[#ffde59] rounded-t-lg h-32">
            ⚡
        </div>
        <div class="absolute top-4 right-4 bg-black text-[#ffde59] px-3 py-1 font-black text-sm border-2 border-black rounded">
            NEW
        </div>
    </div>
    <div class="p-6 border-t-4 border-black flex-1 flex flex-col">
        <h3 class="text-xl font-black mb-2 uppercase tracking-wider">Lightning Fast</h3>
        <p class="text-gray-700 mb-4 leading-relaxed flex-1">Ultra-fast performance that will blow your mind. No compromises.</p>
        <div class="flex items-center justify-between mt-2">
            <span class="text-2xl font-black">$49</span>
            <button class="px-4 py-2 bg-black text-white font-black uppercase tracking-wider border-2 border-black hover:bg-[#ffde59] hover:text-black transition-colors rounded">
                Buy Now
            </button>
        </div>
    </div>
</div>

<!-- Feature Neobrutalist Card -->
<div class="bg-[#ff5c5c] border-4 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] hover:shadow-[12px_12px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-2px] hover:translate-y-[-2px] transition-all duration-200 rounded-xl flex flex-col">
    <div class="p-6 text-white flex-1 flex flex-col">
        <div class="w-14 h-14 bg-white text-[#ff5c5c] rounded-full flex items-center justify-center mb-4 border-4 border-black mx-auto">
            <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
            </svg>
        </div>
        <h3 class="text-xl font-black mb-2 uppercase tracking-wider text-center">Premium Quality</h3>
        <p class="mb-4 leading-relaxed flex-1 text-center">Top-tier components built with attention to every detail.</p>
        <button class="px-4 py-2 bg-white text-[#ff5c5c] font-black uppercase tracking-wider border-2 border-black hover:bg-black hover:text-white transition-colors rounded mx-auto">
            Explore
        </button>
    </div>
</div>
<template>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <!-- Product Card -->
    <div class="bg-white border-4 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] hover:shadow-[12px_12px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-2px] hover:translate-y-[-2px] transition-all duration-200 rounded-xl flex flex-col">
      <div class="relative">
        <div class="flex items-center justify-center text-4xl font-black bg-[#ffde59] rounded-t-lg h-32">
          ⚡
        </div>
        <div class="absolute top-4 right-4 bg-black text-[#ffde59] px-3 py-1 font-black text-sm border-2 border-black rounded">
          NEW
        </div>
      </div>
      <div class="p-6 border-t-4 border-black flex-1 flex flex-col">
        <h3 class="text-xl font-black mb-2 uppercase tracking-wider">Lightning Fast</h3>
        <p class="text-gray-700 mb-4 leading-relaxed flex-1">Ultra-fast performance that will blow your mind.</p>
        <div class="flex items-center justify-between mt-2">
          <span class="text-2xl font-black">$49</span>
          <button @click="handlePurchase" class="px-4 py-2 bg-black text-white font-black uppercase tracking-wider border-2 border-black hover:bg-[#ffde59] hover:text-black transition-colors rounded">
            Buy Now
          </button>
        </div>
      </div>
    </div>

    <!-- Feature Card -->
    <div class="bg-[#ff5c5c] border-4 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] hover:shadow-[12px_12px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-2px] hover:translate-y-[-2px] transition-all duration-200 rounded-xl flex flex-col">
      <div class="p-6 text-white flex-1 flex flex-col">
        <div class="w-14 h-14 bg-white text-[#ff5c5c] rounded-full flex items-center justify-center mb-4 border-4 border-black mx-auto">
          <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
          </svg>
        </div>
        <h3 class="text-xl font-black mb-2 uppercase tracking-wider text-center">Premium Quality</h3>
        <p class="mb-4 leading-relaxed flex-1 text-center">Top-tier components built with attention to every detail.</p>
        <button @click="handleExplore" class="px-4 py-2 bg-white text-[#ff5c5c] font-black uppercase tracking-wider border-2 border-black hover:bg-black hover:text-white transition-colors rounded mx-auto">
          Explore
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
const handlePurchase = () => {
  console.log('Purchase clicked')
}

const handleExplore = () => {
  console.log('Explore clicked')
}
</script>
import React from 'react'

const NeobrutalistCards = () => {
  const handlePurchase = () => {
    console.log('Purchase clicked')
  }

  const handleExplore = () => {
    console.log('Explore clicked')
  }

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
      {/* Product Card */}
      <div className="bg-white border-4 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] hover:shadow-[12px_12px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-2px] hover:translate-y-[-2px] transition-all duration-200 rounded-xl flex flex-col">
        <div className="relative">
          <div className="flex items-center justify-center text-4xl font-black bg-[#ffde59] rounded-t-lg h-32">
            ⚡
          </div>
          <div className="absolute top-4 right-4 bg-black text-[#ffde59] px-3 py-1 font-black text-sm border-2 border-black rounded">
            NEW
          </div>
        </div>
        <div className="p-6 border-t-4 border-black flex-1 flex flex-col">
          <h3 className="text-xl font-black mb-2 uppercase tracking-wider">Lightning Fast</h3>
          <p className="text-gray-700 mb-4 leading-relaxed flex-1">Ultra-fast performance that will blow your mind.</p>
          <div className="flex items-center justify-between mt-2">
            <span className="text-2xl font-black">$49</span>
            <button onClick={handlePurchase} className="px-4 py-2 bg-black text-white font-black uppercase tracking-wider border-2 border-black hover:bg-[#ffde59] hover:text-black transition-colors rounded">
              Buy Now
            </button>
          </div>
        </div>
      </div>

      {/* Feature Card */}
      <div className="bg-[#ff5c5c] border-4 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] hover:shadow-[12px_12px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-2px] hover:translate-y-[-2px] transition-all duration-200 rounded-xl flex flex-col">
        <div className="p-6 text-white flex-1 flex flex-col">
          <div className="w-14 h-14 bg-white text-[#ff5c5c] rounded-full flex items-center justify-center mb-4 border-4 border-black mx-auto">
            <svg className="w-7 h-7" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
            </svg>
          </div>
          <h3 className="text-xl font-black mb-2 uppercase tracking-wider text-center">Premium Quality</h3>
          <p className="mb-4 leading-relaxed flex-1 text-center">Top-tier components built with attention to every detail.</p>
          <button onClick={handleExplore} className="px-4 py-2 bg-white text-[#ff5c5c] font-black uppercase tracking-wider border-2 border-black hover:bg-black hover:text-white transition-colors rounded mx-auto">
            Explore
          </button>
        </div>
      </div>
    </div>
  )
}

export default NeobrutalistCards

3. Glassmorphism Card

Modern glass-effect cards with blur, transparency, and elegant hover animations.

Analytics Dashboard

Track your performance with real-time insights and beautiful visualizations.

24.5K
Total Views
JD

John Doe

Senior Developer

React
Vue
Node
<!-- Dashboard Glass Card -->
<div class="bg-white/20 backdrop-blur-lg border border-white/30 rounded-xl p-6 shadow-lg hover:shadow-xl hover:bg-white/25 transition-all duration-300">
    <div class="flex items-center justify-between mb-4">
        <h3 class="text-lg font-semibold text-white">Analytics Dashboard</h3>
        <div class="w-10 h-10 bg-white/20 rounded-lg flex items-center justify-center">
            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
            </svg>
        </div>
    </div>
    <p class="text-white/80 text-sm mb-6 leading-relaxed">Track your performance with real-time insights and beautiful visualizations.</p>
    <div class="flex items-center justify-between">
        <div class="text-white">
            <div class="text-2xl font-bold">24.5K</div>
            <div class="text-white/60 text-xs">Total Views</div>
        </div>
        <button class="px-4 py-2 bg-white/20 border border-white/30 text-white rounded-lg hover:bg-white/30 transition-colors">
            View Details
        </button>
    </div>
</div>

<!-- Profile Glass Card -->
<div class="bg-black/20 backdrop-blur-lg border border-white/20 rounded-xl p-6 shadow-lg hover:shadow-xl hover:bg-black/25 transition-all duration-300">
    <div class="text-center">
        <div class="w-20 h-20 bg-white/20 rounded-full mx-auto mb-4 flex items-center justify-center backdrop-blur-sm">
            <span class="text-2xl font-bold text-white">JD</span>
        </div>
        <h3 class="text-lg font-semibold text-white mb-1">John Doe</h3>
        <p class="text-white/60 text-sm mb-4">Senior Developer</p>
        <div class="flex gap-2 justify-center mb-6">
            <div class="px-2 py-1 bg-white/20 rounded-full text-white/80 text-xs">React</div>
            <div class="px-2 py-1 bg-white/20 rounded-full text-white/80 text-xs">Vue</div>
            <div class="px-2 py-1 bg-white/20 rounded-full text-white/80 text-xs">Node</div>
        </div>
        <button class="w-full px-4 py-2 bg-transparent border-2 border-white/50 text-white rounded-lg hover:bg-white/20 transition-colors">
            Connect
        </button>
    </div>
</div>
<template>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <!-- Dashboard Card -->
    <div class="bg-white/20 backdrop-blur-lg border border-white/30 rounded-xl p-6 shadow-lg hover:shadow-xl hover:bg-white/25 transition-all duration-300">
      <div class="flex items-center justify-between mb-4">
        <h3 class="text-lg font-semibold text-white">Analytics Dashboard</h3>
        <div class="w-10 h-10 bg-white/20 rounded-lg flex items-center justify-center">
          <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
          </svg>
        </div>
      </div>
      <p class="text-white/80 text-sm mb-6 leading-relaxed">Track your performance with real-time insights.</p>
      <div class="flex items-center justify-between">
        <div class="text-white">
          <div class="text-2xl font-bold">
          
          </div>
          <div class="text-white/60 text-xs">Total Views</div>
        </div>
        <button @click="handleViewDetails" class="px-4 py-2 bg-white/20 border border-white/30 text-white rounded-lg hover:bg-white/30 transition-colors">
          View Details
        </button>
      </div>
    </div>

    <!-- Profile Card -->
    <div class="bg-black/20 backdrop-blur-lg border border-white/20 rounded-xl p-6 shadow-lg hover:shadow-xl hover:bg-black/25 transition-all duration-300">
      <div class="text-center">
        <div class="w-20 h-20 bg-white/20 rounded-full mx-auto mb-4 flex items-center justify-center backdrop-blur-sm">
          <span class="text-2xl font-bold text-white">
          
          </span>
        </div>
        <h3 class="text-lg font-semibold text-white mb-1">
        
        </h3>
        <p class="text-white/60 text-sm mb-4">
        
        </p>
        <div class="flex gap-2 justify-center mb-6">
          <div v-for="skill in user.skills" :key="skill" class="px-2 py-1 bg-white/20 rounded-full text-white/80 text-xs">
            
          </div>
        </div>
        <button @click="handleConnect" class="w-full px-4 py-2 bg-transparent border-2 border-white/50 text-white rounded-lg hover:bg-white/20 transition-colors">
          Connect
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
const stats = {
  views: '24.5K'
}

const user = {
  name: 'John Doe',
  role: 'Senior Developer',
  initials: 'JD',
  skills: ['React', 'Vue', 'Node']
}

const handleViewDetails = () => {
  console.log('View details clicked')
}

const handleConnect = () => {
  console.log('Connect clicked')
}
</script>
import React from 'react'

const GlassmorphismCards = () => {
  const stats = {
    views: '24.5K'
  }

  const user = {
    name: 'John Doe',
    role: 'Senior Developer',
    initials: 'JD',
    skills: ['React', 'Vue', 'Node']
  }

  const handleViewDetails = () => {
    console.log('View details clicked')
  }

  const handleConnect = () => {
    console.log('Connect clicked')
  }

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
      {/* Dashboard Card */}
      <div className="bg-white/20 backdrop-blur-lg border border-white/30 rounded-xl p-6 shadow-lg hover:shadow-xl hover:bg-white/25 transition-all duration-300">
        <div className="flex items-center justify-between mb-4">
          <h3 className="text-lg font-semibold text-white">Analytics Dashboard</h3>
          <div className="w-10 h-10 bg-white/20 rounded-lg flex items-center justify-center">
            <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
            </svg>
          </div>
        </div>
        <p className="text-white/80 text-sm mb-6 leading-relaxed">Track your performance with real-time insights.</p>
        <div className="flex items-center justify-between">
          <div className="text-white">
            <div className="text-2xl font-bold">{stats.views}</div>
            <div className="text-white/60 text-xs">Total Views</div>
          </div>
          <button onClick={handleViewDetails} className="px-4 py-2 bg-white/20 border border-white/30 text-white rounded-lg hover:bg-white/30 transition-colors">
            View Details
          </button>
        </div>
      </div>

      {/* Profile Card */}
      <div className="bg-black/20 backdrop-blur-lg border border-white/20 rounded-xl p-6 shadow-lg hover:shadow-xl hover:bg-black/25 transition-all duration-300">
        <div className="text-center">
          <div className="w-20 h-20 bg-white/20 rounded-full mx-auto mb-4 flex items-center justify-center backdrop-blur-sm">
            <span className="text-2xl font-bold text-white">{user.initials}</span>
          </div>
          <h3 className="text-lg font-semibold text-white mb-1">{user.name}</h3>
          <p className="text-white/60 text-sm mb-4">{user.role}</p>
          <div className="flex gap-2 justify-center mb-6">
            {user.skills.map((skill) => (
              <div key={skill} className="px-2 py-1 bg-white/20 rounded-full text-white/80 text-xs">
                {skill}
              </div>
            ))}
          </div>
          <button onClick={handleConnect} className="w-full px-4 py-2 bg-transparent border-2 border-white/50 text-white rounded-lg hover:bg-white/20 transition-colors">
            Connect
          </button>
        </div>
      </div>
    </div>
  )
}

export default GlassmorphismCards

🚀 How to Use These Components

Requirements

  • TailwindCSS v3.0+ installed (Install Guide)
  • AlpineJS for interactivity (HTML version)
  • React/Vue for framework versions

Installation

# Install TailwindCSS
npm install -D tailwindcss
# Install Heroicons (for icons)
npm install @heroicons/react

Pro Tip: These card components work great for product listings, dashboards, user profiles, and feature highlights. Customize colors, sizes, and layouts to match your brand identity.

We use cookies to improve your experience and analytics. You can accept all cookies or reject non-essential ones.

Learn More