Tailwind Glassmorphic Card

by tailkits

HTML

<!-- Cards Section -->
<section class="mb-16 bg-indigo-200 p-20">
  <h2 class="text-3xl font-bold text-white mb-8">
    💳 Cards with rounded-* Utilities
  </h2>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
    <!-- Glassmorphic Card - rounded-xl -->
    <div
      class="bg-white/20 backdrop-blur-lg rounded-xl p-6 border border-white/30 shadow-2xl hover:shadow-3xl transition-all duration-300 hover:scale-105"
    >
      <div class="text-white">
        <div
          class="w-12 h-12 bg-gradient-to-r from-pink-500 to-violet-500 rounded-lg mb-4 flex items-center justify-center"
        >
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
            <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </div>
        <h3 class="text-xl font-semibold mb-2">Glassmorphic Card</h3>
        <p class="text-white/80 mb-4">Using rounded-xl for smooth corners</p>
        <button
          class="bg-white/20 hover:bg-white/30 px-4 py-2 rounded-lg backdrop-blur-sm transition-colors"
        >
          Learn More
        </button>
      </div>
    </div>

    <!-- Sharp Modern Card - rounded-none -->
    <div
      class="bg-gray-900 rounded-none p-6 shadow-2xl hover:shadow-3xl transition-all duration-300 hover:scale-105 border-l-4 border-cyan-400"
    >
      <div class="text-white">
        <div
          class="w-12 h-12 bg-cyan-400 rounded-none mb-4 flex items-center justify-center"
        >
          <svg
            class="w-6 h-6 text-gray-900"
            fill="currentColor"
            viewBox="0 0 20 20"
          >
            <path
              d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z"
            />
          </svg>
        </div>
        <h3 class="text-xl font-semibold mb-2">Sharp Modern</h3>
        <p class="text-gray-300 mb-4">Using rounded-none for industrial look</p>
        <button
         ...