Back to Discover
Tailwind CSS Card Design Examples

Amelia
Created Nov 03, 2025
0 views
0 likes
0 comments
0 forks
Export Fork Like
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<body class="bg-gray-50 p-8">
  <div class="max-w-7xl mx-auto">
    <h1 class="text-3xl font-bold text-gray-900 mb-8">Card Design Examples</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

      <!-- Card 1: Basic Profile Card -->
      <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow">
        <div class="flex items-center space-x-4 mb-4">
          <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
            <ion-icon name="person" class="text-2xl text-blue-600"></ion-icon>
          </div>
          <div>
            <h3 class="font-semibold text-gray-900">John Anderson</h3>
            <p class="text-sm text-gray-500">Product Designer</p>
          </div>
        </div>
        <p class="text-gray-600 text-sm mb-4">Creating beautiful and functional user experiences for modern applications.</p>
        <button class="w-full bg-blue-600 text-white py-2 rounded-md text-sm font-medium hover:bg-blue-700 transition-colors">
          View Profile
        </button>
      </div>

      <!-- Card 2: Stats Card with Alpine.js -->
      <div x-data="{ count: 0 }" class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow">
        <div class="flex items-center justify-between mb-4">
          <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
            <ion-icon name="trending-up" class="text-2xl text-green-600"></ion-icon>
          </div>
          <span class="text-xs font-medium text-green-600 bg-green-50 px-2 py-1 rounded">+12.5%</span>
        </div>
        <h3 class="text-2xl font-bold text-gray-900" x-text="count">0</h3>
        <p class="text-sm text-gray-500 mb-4">Total Revenue</p>
        <button @click="count += 1000" class="text-sm text-blue-600 hover:text-blue-700 font-medium">
          Increment →
        </button>
      </div>

      <!-- Card 3: Feature Card -->
      <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow">
        <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
          <ion-icon name="rocket" class="text-2xl text-purple-600"></ion-icon>
        </div>
        <h3 class="font-semibold text-gray-900 mb-2">Fast Performance</h3>
        <p class="text-gray-600 text-sm">Optimized for speed with lightning-fast load times and seamless interactions.</p>
      </div>

      <!-- Card 4: Notification Card with Alpine.js -->
      <div x-data="{ show: true }" x-show="show" class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow">
        <div class="flex items-start justify-between">
          <div class="flex items-start space-x-3">
            <div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center flex-shrink-0">
              <ion-icon name="notifications" class="text-xl text-yellow-600"></ion-icon>
            </div>
            <div>
              <h3 class="font-semibold text-gray-900 mb-1">New Update Available</h3>
              <p class="text-sm text-gray-600">Version 2.0 is now ready to install.</p>
            </div>
          </div>
          <button @click="show = false" class="text-gray-400 hover:text-gray-600">
            <ion-icon name="close" class="text-xl"></ion-icon>
          </button>
        </div>
      </div>

      <!-- Card 5: Product Card -->
      <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow">
        <div class="h-48 bg-gradient-to-br from-blue-400 to-purple-500"></div>
        <div class="p-6">
          <h3 class="font-semibold text-gray-900 mb-2">Premium Package</h3>
          <p class="text-gray-600 text-sm mb-4">Everything you need to get started with our platform.</p>
          <div class="flex items-center justify-between">
            <span class="text-2xl font-bold text-gray-900">$49<span class="text-sm font-normal text-gray-500">/mo</span></span>
            <button class="bg-gray-900 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-gray-800 transition-colors">
              Subscribe
            </button>
          </div>
        </div>
      </div>

      <!-- Card 6: Interactive Toggle Card -->
      <div x-data="{ expanded: false }" class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow">
        <div class="flex items-center justify-between mb-4">
          <div class="flex items-center space-x-3">
            <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
              <ion-icon name="shield-checkmark" class="text-xl text-red-600"></ion-icon>
            </div>
            <h3 class="font-semibold text-gray-900">Security Settings</h3>
          </div>
          <button @click="expanded = !expanded" class="text-gray-400 hover:text-gray-600">
            <ion-icon :name="expanded ? 'chevron-up' : 'chevron-down'" class="text-xl"></ion-icon>
          </button>
        </div>
        <div x-show="expanded" x-transition class="space-y-3">
          <div class="flex items-center justify-between py-2 border-t border-gray-100">
            <span class="text-sm text-gray-600">Two-factor auth</span>
            <div class="w-10 h-6 bg-blue-600 rounded-full"></div>
          </div>
          <div class="flex items-center justify-between py-2 border-t border-gray-100">
            <span class="text-sm text-gray-600">Email notifications</span>
            <div class="w-10 h-6 bg-gray-300 rounded-full"></div>
          </div>
        </div>
      </div>

      <!-- Card 7: Hover Effect Card -->
      <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 hover:border-blue-500 hover:shadow-lg transition-all cursor-pointer group">
        <div class="flex items-center space-x-3 mb-4">
          <div class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center group-hover:bg-indigo-600 transition-colors">
            <ion-icon name="code-slash" class="text-xl text-indigo-600 group-hover:text-white"></ion-icon>
          </div>
          <h3 class="font-semibold text-gray-900">API Access</h3>
        </div>
        <p class="text-gray-600 text-sm mb-3">Integrate our powerful API into your applications.</p>
        <div class="flex items-center text-sm text-blue-600 font-medium">
          <span>Learn more</span>
          <ion-icon name="arrow-forward" class="ml-1"></ion-icon>
        </div>
      </div>

      <!-- Card 8: Icon List Card -->
      <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow">
        <h3 class="font-semibold text-gray-900 mb-4">Features Included</h3>
        <ul class="space-y-3">
          <li class="flex items-center space-x-3">
            <ion-icon name="checkmark-circle" class="text-xl text-green-500"></ion-icon>
            <span class="text-sm text-gray-600">Unlimited projects</span>
          </li>
          <li class="flex items-center space-x-3">
            <ion-icon name="checkmark-circle" class="text-xl text-green-500"></ion-icon>
            <span class="text-sm text-gray-600">24/7 support</span>
          </li>
          <li class="flex items-center space-x-3">
            <ion-icon name="checkmark-circle" class="text-xl text-green-500"></ion-icon>
            <span class="text-sm text-gray-600">Advanced analytics</span>
          </li>
        </ul>
      </div>

      <!-- Card 9: Action Card -->
      <div class="bg-gradient-to-br from-blue-600 to-blue-700 rounded-lg shadow-sm p-6 text-white hover:shadow-md transition-shadow">
        <div class="w-12 h-12 bg-white/20 rounded-lg flex items-center justify-center mb-4">
          <ion-icon name="gift" class="text-2xl text-white"></ion-icon>
        </div>
        <h3 class="font-semibold mb-2">Special Offer</h3>
        <p class="text-blue-100 text-sm mb-4">Get 50% off your first month. Limited time only.</p>
        <button class="bg-white text-blue-600 px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-50 transition-colors">
          Claim Offer
        </button>
      </div>

    </div>
  </div>
Comments (0)

No comments yet. Be the first!