Search Components

Cards

Rectangular containers with related information

Neon_Glow_Farming_Cards

A complex set of responsive cards for agriculture/farming websites, featuring neon/glow effects with a sunset/warm color scheme, including dark mode support.

Open Preview

                <div class="bg-gradient-to-br from-orange-50 to-red-50 text-gray-900 dark:from-gray-900 dark:to-orange-950 dark:text-gray-100 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl lg:text-5xl font-extrabold text-center mb-12 relative">
      <span class="bg-clip-text text-transparent bg-gradient-to-r from-orange-600 to-red-700 dark:from-orange-400 dark:to-red-500">
        Sustainable Farming Innovations
      </span>
      <span class="absolute inset-x-0 bottom-0 h-1 bg-gradient-to-r from-orange-400 to-red-400 dark:from-orange-600 dark:to-red-700 blur-sm opacity-75"></span>
      <span class="absolute inset-x-0 bottom-0 h-px bg-gradient-to-r from-orange-400 to-red-400 dark:from-orange-600 dark:to-red-700"></span>
    </h2>

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

      <!-- Card 1: Smart Irrigation -->
      <div class="relative group bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.02] border border-transparent hover:border-orange-400 dark:hover:border-orange-700">
        <div class="absolute -inset-0.5 rounded-lg opacity-75 bg-gradient-to-br from-orange-400 to-red-500 dark:from-orange-600 dark:to-red-700 blur group-hover:opacity-100 transition duration-1000 group-hover:duration-200 animate-pulse-slow"></div>
        <div class="relative p-6 flex flex-col h-full bg-white dark:bg-gray-800 rounded-lg">
          <img class="w-full h-48 object-cover rounded-md mb-4 brightness-95 group-hover:brightness-105 transition duration-300" src="https://picsum.photos/id/105/400/250" alt="Smart Irrigation Systems">
          <h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-orange-600 to-red-700 dark:from-orange-400 dark:to-red-500 mb-2 leading-tight">Smart Irrigation</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 flex-grow">Optimize water usage with AI-powered irrigation systems, reducing waste and boosting crop yields. Real-time data ensures precise hydration.</p>
          <div class="flex items-center space-x-2 text-sm text-gray-600 dark:text-gray-400 mb-4">
            <svg class="w-5 h-5 text-orange-500 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9.25 15C9.037 14.512 8.718 14.07 8.307 13.729L7.5 13.064M14.25 17L14.75 15C14.963 14.512 15.282 14.07 15.693 13.729L16.5 13.064M12 17V21M12 7V3M5.5 10A2.5 2.5 0 018 7.5L8.5 7A2.5 2.5 0 0111 4.5V4C11 3.44772 11.4477 3 12 3C12.5523 3 13 3.44772 13 4V4.5C13 5.32843 13.5 6 14.5 6C15.5 6 16 6.67157 16 7.5V10H17.5C18.9959 10 19.5 10.5 19.5 11.5V19.5C19.5 20.5 18.9959 21 17.5 21H6.5C5.00407 21 4.5 20.5 4.5 19.5V11.5C4.5 10.5 5.00407 10 6.5 10H8.5V7.5C8.5 6.67157 9 6 10 6C11 6 11.5 5.32843 11.5 4.5V4M12 17V21"></path></svg>
            <span>Water Efficiency</span>
          </div>
          <div class="flex justify-between items-center mt-auto pt-4 border-t border-gray-200 dark:border-gray-700">
            <div class="flex -space-x-2 overflow-hidden">
              <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Developer 1">
              <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/men/5.jpg" alt="Developer 2">
            </div>
            <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-full shadow-sm text-white bg-gradient-to-r from-orange-500 to-red-600 dark:from-orange-700 dark:to-red-800 hover:from-orange-600 hover:to-red-700 dark:hover:from-orange-600 dark:hover:to-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-gray-900 glow-on-hover">
              Learn More
              <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Card 2: Crop Health Monitoring -->
      <div class="relative group bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.02] border border-transparent hover:border-orange-400 dark:hover:border-orange-700">
        <div class="absolute -inset-0.5 rounded-lg opacity-75 bg-gradient-to-br from-red-400 to-orange-500 dark:from-red-600 dark:to-orange-700 blur group-hover:opacity-100 transition duration-1000 group-hover:duration-200 animate-pulse-slow"></div>
        <div class="relative p-6 flex flex-col h-full bg-white dark:bg-gray-800 rounded-lg">
          <img class="w-full h-48 object-cover rounded-md mb-4 brightness-95 group-hover:brightness-105 transition duration-300" src="https://picsum.photos/id/345/400/250" alt="Crop Health Monitoring">
          <h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-red-600 to-orange-700 dark:from-red-400 dark:to-orange-500 mb-2 leading-tight">Crop Health</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 flex-grow">Utilize drone imagery and multispectral analysis to detect diseases early and monitor plant vitality, ensuring optimal growth.</p>
          <div class="flex items-center space-x-2 text-sm text-gray-600 dark:text-gray-400 mb-4">
            <svg class="w-5 h-5 text-red-500 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.003 12.003 0 002.944 12c.002.096.004.192.006.288l.805 4.398a12.015 12.015 0 0017.382 0l.805-4.398c.002-.096.004-.192.006-.288a12.003 12.003 0 00-2.356-8.776z"></path></svg>
            <span>Disease Detection</span>
          </div>
          <div class="flex justify-between items-center mt-auto pt-4 border-t border-gray-200 dark:border-gray-700">
            <div class="flex -space-x-2 overflow-hidden">
              <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/men/4.jpg" alt="Developer 3">
              <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/5.jpg" alt="Developer 4">
            </div>
            <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-full shadow-sm text-white bg-gradient-to-r from-red-500 to-orange-600 dark:from-red-700 dark:to-orange-800 hover:from-red-600 hover:to-orange-700 dark:hover:from-red-600 dark:hover:to-orange-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-offset-gray-900 glow-on-hover">
              Explore Tools
              <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Card 3: Vertical Farming -->
      <div class="relative group bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.02] border border-transparent hover:border-orange-400 dark:hover:border-orange-700">
        <div class="absolute -inset-0.5 rounded-lg opacity-75 bg-gradient-to-br from-orange-400 to-red-500 dark:from-orange-600 dark:to-red-700 blur group-hover:opacity-100 transition duration-1000 group-hover:duration-200 animate-pulse-slow"></div>
        <div class="relative p-6 flex flex-col h-full bg-white dark:bg-gray-800 rounded-lg">
          <img class="w-full h-48 object-cover rounded-md mb-4 brightness-95 group-hover:brightness-105 transition duration-300" src="https://picsum.photos/id/1080/400/250" alt="Vertical Farming Grow Towers">
          <h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-orange-600 to-red-700 dark:from-orange-400 dark:to-red-500 mb-2 leading-tight">Vertical Farming</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 flex-grow">Revolutionize food production with indoor vertical farms, saving space and localizing fresh produce year-round.</p>
          <div class="flex items-center space-x-2 text-sm text-gray-600 dark:text-gray-400 mb-4">
            <svg class="w-5 h-5 text-orange-500 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.935 13.935 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            <span>Urban Agriculture</span>
          </div>
          <div class="flex justify-between items-center mt-auto pt-4 border-t border-gray-200 dark:border-gray-700">
            <div class="flex -space-x-2 overflow-hidden">
              <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Developer 5">
              <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/men/7.jpg" alt="Developer 6">
            </div>
            <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-full shadow-sm text-white bg-gradient-to-r from-orange-500 to-red-600 dark:from-orange-700 dark:to-red-800 hover:from-orange-600 hover:to-red-700 dark:hover:from-orange-600 dark:hover:to-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-gray-900 glow-on-hover">
              Discover More
              <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
            </a>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

<!-- Custom Styles for glow-on-hover and pulse-slow animation -->
<style>
  .glow-on-hover {
    position: relative;
    z-index: 1;
  }

  .glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff8a00, #e25e00, #ff0000, #f72c00, #ff8a00, #e25e00, #ff0000, #f72c00);
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(8px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 9999px;
  }

  .dark .glow-on-hover:before {
    background: linear-gradient(45deg, #ffb74d, #e64a19, #d32f2f, #bf360c, #ffb74d, #e64a19, #d32f2f, #bf360c);
  }

  .glow-on-hover:hover:before {
    opacity: 1;
    animation: glowing 1s linear infinite;
  }

  @keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
  }

  @keyframes pulse-slow {
    0%, 100% { opacity: 0.75; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.02); }
  }

  .animate-pulse-slow {
    animation: pulse-slow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
</style>

Industrial_Farming_Cards_Component

A set of responsive cards with an industrial, raw-material aesthetic, warm neutral colors, and dark mode support, suitable for agriculture and farming websites. Features exposed elements and utilitarian design.

Open Preview

                <section class="py-12 bg-stone-100 dark:bg-stone-900 transition-colors duration-300">
  <div class="container mx-auto px-4">
    <h2 class="text-4xl font-extrabold text-center text-stone-800 dark:text-stone-200 mb-12 uppercase tracking-wide font-mono">
      Farm Operations At A Glance
    </h2>
    <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">

      <!-- Card 1: Crop Monitoring -->
      <div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden border-t-4 border-l-4 border-stone-400 dark:border-stone-600 group hover:shadow-2xl hover:scale-105 transition duration-300 ease-in-out transform relative h-full flex flex-col">
        <div class="absolute -top-3 -left-3 w-8 h-8 bg-stone-400 dark:bg-stone-600 rounded-full flex items-center justify-center text-stone-900 dark:text-stone-100 text-lg font-bold font-mono">1</div>
        <img class="w-full h-48 object-cover object-center border-b-2 border-stone-300 dark:border-stone-700" src="https://picsum.photos/id/1015/400/300" alt="Farm field with crops">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="font-bold text-2xl text-stone-800 dark:text-stone-100 mb-2 font-mono uppercase tracking-wide">Crop Monitoring</h3>
          <p class="text-stone-700 dark:text-stone-300 text-base mb-4 flex-grow">
            Real-time data on soil moisture, temperature, and nutrient levels. Optimize irrigation and fertilization for maximum yield.
          </p>
          <div class="mt-4 pt-4 border-t border-stone-300 dark:border-stone-700 flex items-center justify-between text-stone-600 dark:text-stone-400">
            <span class="flex items-center text-sm">
              <svg class="w-4 h-4 mr-1 text-yellow-600 dark:text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
              Updated daily
            </span>
            <a href="#" class="text-stone-900 dark:text-stone-100 hover:text-orange-700 dark:hover:text-amber-500 font-semibold text-sm underline-offset-4 hover:underline transition-colors duration-200">
              View Analytics
            </a>
          </div>
        </div>
      </div>

      <!-- Card 2: Livestock Management -->
      <div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden border-t-4 border-l-4 border-stone-400 dark:border-stone-600 group hover:shadow-2xl hover:scale-105 transition duration-300 ease-in-out transform relative h-full flex flex-col">
        <div class="absolute -top-3 -left-3 w-8 h-8 bg-stone-400 dark:bg-stone-600 rounded-full flex items-center justify-center text-stone-900 dark:text-stone-100 text-lg font-bold font-mono">2</div>
        <img class="w-full h-48 object-cover object-center border-b-2 border-stone-300 dark:border-stone-700" src="https://picsum.photos/id/1084/400/300" alt="Cows grazing in a field">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="font-bold text-2xl text-stone-800 dark:text-stone-100 mb-2 font-mono uppercase tracking-wide">Livestock Health</h3>
          <p class="text-stone-700 dark:text-stone-300 text-base mb-4 flex-grow">
            Track animal health, feeding schedules, and breeding cycles. Ensure optimal welfare and productivity.
          </p>
          <div class="mt-4 pt-4 border-t border-stone-300 dark:border-stone-700 flex items-center justify-between text-stone-600 dark:text-stone-400">
            <span class="flex items-center text-sm">
              <svg class="w-4 h-4 mr-1 text-green-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              Healthy metrics
            </span>
            <a href="#" class="text-stone-900 dark:text-stone-100 hover:text-orange-700 dark:hover:text-amber-500 font-semibold text-sm underline-offset-4 hover:underline transition-colors duration-200">
              Manage Herds
            </a>
          </div>
        </div>
      </div>

      <!-- Card 3: Equipment Maintenance -->
      <div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden border-t-4 border-l-4 border-stone-400 dark:border-stone-600 group hover:shadow-2xl hover:scale-105 transition duration-300 ease-in-out transform relative h-full flex flex-col">
        <div class="absolute -top-3 -left-3 w-8 h-8 bg-stone-400 dark:bg-stone-600 rounded-full flex items-center justify-center text-stone-900 dark:text-stone-100 text-lg font-bold font-mono">3</div>
        <img class="w-full h-48 object-cover object-center border-b-2 border-stone-300 dark:border-stone-700" src="https://picsum.photos/id/106/400/300" alt="Heavy farm machinery">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="font-bold text-2xl text-stone-800 dark:text-stone-100 mb-2 font-mono uppercase tracking-wide">Machinery Hub</h3>
          <p class="text-stone-700 dark:text-stone-300 text-base mb-4 flex-grow">
            Monitor equipment usage, schedule maintenance, and track fuel consumption. Minimize downtime and costs.
          </p>
          <div class="mt-4 pt-4 border-t border-stone-300 dark:border-stone-700 flex items-center justify-between text-stone-600 dark:text-stone-400">
            <span class="flex items-center text-sm">
              <svg class="w-4 h-4 mr-1 text-red-600 dark:text-rose-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.32a1 1 0 01.743-.32h2a1 1 0 01.743.32l.995 1.194a.25.25 0 00.176.079h4.053A2.75 2.75 0 0118 7.32v7.74a2.75 2.75 0 01-2.75 2.75H4.75A2.75 2.75 0 012 15.06V7.32a2.75 2.75 0 012.75-2.75h4.053a.25.25 0 00.176-.079l.995-1.194zM12 9a1 1 0 10-2 0v2a1 1 0 102 0V9z" clip-rule="evenodd"></path></svg>
              Service required
            </span>
            <a href="#" class="text-stone-900 dark:text-stone-100 hover:text-orange-700 dark:hover:text-amber-500 font-semibold text-sm underline-offset-4 hover:underline transition-colors duration-200">
              Schedule Service
            </a>
          </div>
        </div>
      </div>

      <!-- Card 4: Farm Management -->
      <div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden border-t-4 border-l-4 border-stone-400 dark:border-stone-600 group hover:shadow-2xl hover:scale-105 transition duration-300 ease-in-out transform relative h-full flex flex-col">
        <div class="absolute -top-3 -left-3 w-8 h-8 bg-stone-400 dark:bg-stone-600 rounded-full flex items-center justify-center text-stone-900 dark:text-stone-100 text-lg font-bold font-mono">4</div>
        <img class="w-full h-48 object-cover object-center border-b-2 border-stone-300 dark:border-stone-700" src="https://picsum.photos/id/194/400/300" alt="Barn and farm landscape">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="font-bold text-2xl text-stone-800 dark:text-stone-100 mb-2 font-mono uppercase tracking-wide">Supply Chain</h3>
          <p class="text-stone-700 dark:text-stone-300 text-base mb-4 flex-grow">
            Manage inventory, orders, and sales. Streamline your farm's entire production and distribution process.
          </p>
          <div class="mt-4 pt-4 border-t border-stone-300 dark:border-stone-700 flex items-center justify-between text-stone-600 dark:text-stone-400">
            <span class="flex items-center text-sm">
              <svg class="w-4 h-4 mr-1 text-blue-600 dark:text-sky-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1h2a1 1 0 110 2h-2v2a1 1 0 11-2 0V6H6a1 1 0 010-2h2V3a1 1 0 011-1z"/><path fill-rule="evenodd" d="M4 7h12a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V9a2 2 0 012-2zm0 2v6h12V9H4z" clip-rule="evenodd"></path></svg>
              New orders
            </span>
            <a href="#" class="text-stone-900 dark:text-stone-100 hover:text-orange-700 dark:hover:text-amber-500 font-semibold text-sm underline-offset-4 hover:underline transition-colors duration-200">
              View Reports
            </a>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>

Forum_Community_Cards_Component

A responsive and interactive cards component for a forum or community platform, featuring a retro/vintage color scheme and subtle hover effects for microinteractions. Includes dark mode support and semantic HTML.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-6 text-center">Latest Discussions</h2>

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

      <!-- Card 1 -->
      <article class="relative group bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg dark:hover:shadow-xl transition-all duration-300 overflow-hidden
                      transform hover:-translate-y-1 hover:scale-[1.01] active:scale-[0.99]">
        <div class="p-5 flex flex-col h-full">
          <div class="flex items-center mb-3">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-semibold text-gray-700 dark:text-gray-200">John Doe</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</p>
            </div>
          </div>
          <h3 class="text-lg font-bold text-teal-700 dark:text-teal-400 mb-2 leading-tight group-hover:text-teal-600 dark:group-hover:text-teal-300 transition-colors duration-200">
            <a href="#" class="before:absolute before:inset-0 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 rounded-md">Exploring the future of web development</a>
          </h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-4 line-clamp-3">What new technologies are you excited about? Discuss the potential impacts of AI, WebAssembly, and more!</p>

          <div class="flex flex-wrap gap-2 mb-4 text-xs">
            <span class="px-2 py-1 bg-yellow-100 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-200 rounded-full">#Tech</span>
            <span class="px-2 py-1 bg-orange-100 dark:bg-orange-800 text-orange-800 dark:text-orange-200 rounded-full">#AI</span>
            <span class="px-2 py-1 bg-purple-100 dark:bg-purple-800 text-purple-800 dark:text-purple-200 rounded-full">#WebDev</span>
          </div>

          <div class="mt-auto flex items-center justify-between text-gray-500 dark:text-gray-400 text-sm">
            <div class="flex items-center">
              <svg class="w-4 h-4 mr-1 text-blue-500 dark:text-blue-400 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7s-8-3.134-8-7 3.582-7 8-7 8 3.134 8 7zM9 9a1 1 0 000 2h2a1 1 0 100-2H9z" clip-rule="evenodd"></path></svg>
              <span>15 Comments</span>
            </div>
            <div class="flex items-center">
              <svg class="w-4 h-4 mr-1 text-red-500 dark:text-red-400 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v1a1 1 0 11-2 0V4a1 1 0 10-2 0v1a1 1 0 11-2 0V4zm-1 0a1 1 0 000 2h.01a1 1 0 000-2H6zm7 0a1 1 0 000 2h.01a1 1 0 000-2H13zM6 10a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm-1 5a1 1 0 000 2h2a1 1 0 000-2H5zm7 0a1 1 0 000 2h2a1 1 0 000-2h-2z" clip-rule="evenodd"></path></svg>
              <span>6 Likes</span>
            </div>
          </div>
        </div>
      </article>

      <!-- Card 2 -->
      <article class="relative group bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg dark:hover:shadow-xl transition-all duration-300 overflow-hidden
                      transform hover:-translate-y-1 hover:scale-[1.01] active:scale-[0.99]">
        <div class="p-5 flex flex-col h-full">
          <div class="flex items-center mb-3">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/17.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-semibold text-gray-700 dark:text-gray-200">Jane Smith</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">5 hours ago</p>
            </div>
          </div>
          <h3 class="text-lg font-bold text-teal-700 dark:text-teal-400 mb-2 leading-tight group-hover:text-teal-600 dark:group-hover:text-teal-300 transition-colors duration-200">
            <a href="#" class="before:absolute before:inset-0 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 rounded-md">Best practices for responsive design</a>
          </h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-4 line-clamp-3">Share your favorite tips and tricks for building truly responsive and accessible web experiences across all devices.</p>

          <div class="flex flex-wrap gap-2 mb-4 text-xs">
            <span class="px-2 py-1 bg-purple-100 dark:bg-purple-800 text-purple-800 dark:text-purple-200 rounded-full">#Design</span>
            <span class="px-2 py-1 bg-cyan-100 dark:bg-cyan-800 text-cyan-800 dark:text-cyan-200 rounded-full">#Frontend</span>
            <span class="px-2 py-1 bg-yellow-100 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-200 rounded-full">#CSS</span>
          </div>

          <div class="mt-auto flex items-center justify-between text-gray-500 dark:text-gray-400 text-sm">
            <div class="flex items-center">
              <svg class="w-4 h-4 mr-1 text-blue-500 dark:text-blue-400 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7s-8-3.134-8-7 3.582-7 8-7 8 3.134 8 7zM9 9a1 1 0 000 2h2a1 1 0 100-2H9z" clip-rule="evenodd"></path></svg>
              <span>22 Comments</span>
            </div>
            <div class="flex items-center">
              <svg class="w-4 h-4 mr-1 text-red-500 dark:text-red-400 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v1a1 1 0 11-2 0V4a1 1 0 10-2 0v1a1 1 0 11-2 0V4zm-1 0a1 1 0 000 2h.01a1 1 0 000-2H6zm7 0a1 1 0 000 2h.01a1 1 0 000-2H13zM6 10a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm-1 5a1 1 0 000 2h2a1 1 0 000-2H5zm7 0a1 1 0 000 2h2a1 1 0 000-2h-2z" clip-rule="evenodd"></path></svg>
              <span>10 Likes</span>
            </div>
          </div>
        </div>
      </article>

      <!-- Card 3 -->
      <article class="relative group bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg dark:hover:shadow-xl transition-all duration-300 overflow-hidden
                      transform hover:-translate-y-1 hover:scale-[1.01] active:scale-[0.99]">
        <div class="p-5 flex flex-col h-full">
          <div class="flex items-center mb-3">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/lego/7.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-semibold text-gray-700 dark:text-gray-200">RetroFan_99</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">1 day ago</p>
            </div>
          </div>
          <h3 class="text-lg font-bold text-teal-700 dark:text-teal-400 mb-2 leading-tight group-hover:text-teal-600 dark:group-hover:text-teal-300 transition-colors duration-200">
            <a href="#" class="before:absolute before:inset-0 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 rounded-md">Nostalgia trip: Favorite 80s arcade games</a>
          </h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-4 line-clamp-3">Let's reminisce about the golden age of arcade gaming! What were your go-to machines and high scores?</p>

          <div class="flex flex-wrap gap-2 mb-4 text-xs">
            <span class="px-2 py-1 bg-yellow-100 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-200 rounded-full">#Retro</span>
            <span class="px-2 py-1 bg-orange-100 dark:bg-orange-800 text-orange-800 dark:text-orange-200 rounded-full">#Gaming</span>
            <span class="px-2 py-1 bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-200 rounded-full">#80s</span>
          </div>

          <div class="mt-auto flex items-center justify-between text-gray-500 dark:text-gray-400 text-sm">
            <div class="flex items-center">
              <svg class="w-4 h-4 mr-1 text-blue-500 dark:text-blue-400 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7s-8-3.134-8-7 3.582-7 8-7 8 3.134 8 7zM9 9a1 1 0 000 2h2a1 1 0 100-2H9z" clip-rule="evenodd"></path></svg>
              <span>30 Comments</span>
            </div>
            <div class="flex items-center">
              <svg class="w-4 h-4 mr-1 text-red-500 dark:text-red-400 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v1a1 1 0 11-2 0V4a1 1 0 10-2 0v1a1 1 0 11-2 0V4zm-1 0a1 1 0 000 2h.01a1 1 0 000-2H6zm7 0a1 1 0 000 2h.01a1 1 0 000-2H13zM6 10a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm-1 5a1 1 0 000 2h2a1 1 0 000-2H5zm7 0a1 1 0 000 2h2a1 1 0 000-2h-2z" clip-rule="evenodd"></path></svg>
              <span>20 Likes</span>
            </div>
          </div>
        </div>
      </article>

      <!-- Card 4 -->
      <article class="relative group bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg dark:hover:shadow-xl transition-all duration-300 overflow-hidden
                      transform hover:-translate-y-1 hover:scale-[1.01] active:scale-[0.99]">
        <div class="p-5 flex flex-col h-full">
          <div class="flex items-center mb-3">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-semibold text-gray-700 dark:text-gray-200">FoodExplorer</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">3 days ago</p>
            </div>
          </div>
          <h3 class="text-lg font-bold text-teal-700 dark:text-teal-400 mb-2 leading-tight group-hover:text-teal-600 dark:group-hover:text-teal-300 transition-colors duration-200">
            <a href="#" class="before:absolute before:inset-0 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 rounded-md">Top 5 comfort food recipes for fall</a>
          </h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-4 line-clamp-3">Share your most beloved, heartwarming recipes that are perfect for chilly autumn evenings. </p>

          <div class="flex flex-wrap gap-2 mb-4 text-xs">
            <span class="px-2 py-1 bg-cyan-100 dark:bg-cyan-800 text-cyan-800 dark:text-cyan-200 rounded-full">#Food</span>
            <span class="px-2 py-1 bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-200 rounded-full">#Cooking</span>
            <span class="px-2 py-1 bg-purple-100 dark:bg-purple-800 text-purple-800 dark:text-purple-200 rounded-full">#Recipes</span>
          </div>

          <div class="mt-auto flex items-center justify-between text-gray-500 dark:text-gray-400 text-sm">
            <div class="flex items-center">
              <svg class="w-4 h-4 mr-1 text-blue-500 dark:text-blue-400 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7s-8-3.134-8-7 3.582-7 8-7 8 3.134 8 7zM9 9a1 1 0 000 2h2a1 1 0 100-2H9z" clip-rule="evenodd"></path></svg>
              <span>18 Comments</span>
            </div>
            <div class="flex items-center">
              <svg class="w-4 h-4 mr-1 text-red-500 dark:text-red-400 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v1a1 1 0 11-2 0V4a1 1 0 10-2 0v1a1 1 0 11-2 0V4zm-1 0a1 1 0 000 2h.01a1 1 0 000-2H6zm7 0a1 1 0 000 2h.01a1 1 0 000-2H13zM6 10a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm-1 5a1 1 0 000 2h2a1 1 0 000-2H5zm7 0a1 1 0 000 2h2a1 1 0 000-2h-2z" clip-rule="evenodd"></path></svg>
              <span>12 Likes</span>
            </div>
          </div>
        </div>
      </article>

    </div>
  </div>
</div>

Retro_E_commerce_Cards_Component

A responsive e-commerce product card component with a retro/vintage aesthetic, earth tones, and dark mode support, suitable for online shopping experiences. Features include product image, name, price, and a call-to-action button.

Open Preview

                <div class="font-sans bg-amber-50 dark:bg-stone-900 text-stone-800 dark:text-stone-200 py-12 px-4 transition-colors duration-300">
  <div class="max-w-6xl mx-auto">
    <h2 class="text-4xl md:text-5xl font-extrabold text-center mb-12 text-stone-900 dark:text-stone-50 drop-shadow-md tracking-wider">
      Our Featured Retro Finds
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Product Card 1 -->
      <div class="bg-stone-100 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-all duration-300 border-4 border-amber-300 dark:border-amber-600 relative group">
        <div class="absolute top-0 left-0 bg-red-500 text-white text-xs font-bold px-3 py-1 rounded-br-lg shadow-md tracking-wider -rotate-3 transform origin-top-left group-hover:scale-110 transition-transform duration-200 z-10">
          SALE!
        </div>
        <img src="https://picsum.photos/400/300?random=1" alt="Vintage Record Player" class="w-full h-48 object-cover border-b-4 border-amber-300 dark:border-amber-600 filter grayscale group-hover:grayscale-0 transition-all duration-300">
        <div class="p-6">
          <h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-50 tracking-wide">Vinyl Player '86</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 font-mono">Authentic analogue sound, built to last.</p>
          <div class="flex items-baseline justify-between mb-4">
            <p class="text-lg font-extrabold text-amber-700 dark:text-amber-300 line-through mr-2">$299.99</p>
            <p class="text-2xl font-extrabold text-green-700 dark:text-green-400">$199.99</p>
          </div>
          <button class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-4 rounded-lg shadow-md transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 uppercase tracking-widest text-lg">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-stone-100 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-all duration-300 border-4 border-amber-300 dark:border-amber-600 relative group">
        <img src="https://picsum.photos/400/300?random=2" alt="Retro Game Console" class="w-full h-48 object-cover border-b-4 border-amber-300 dark:border-amber-600 filter grayscale group-hover:grayscale-0 transition-all duration-300">
        <div class="p-6">
          <h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-50 tracking-wide">Pixel Console DX</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 font-mono">Relive 8-bit glory days, re-engineered.</p>
          <div class="flex items-baseline justify-between mb-4">
            <p class="text-2xl font-extrabold text-amber-700 dark:text-amber-300">$149.99</p>
          </div>
          <button class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-4 rounded-lg shadow-md transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 uppercase tracking-widest text-lg">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-stone-100 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-all duration-300 border-4 border-amber-300 dark:border-amber-600 relative group">
        <img src="https://picsum.photos/400/300?random=3" alt="Vintage Typewriter" class="w-full h-48 object-cover border-b-4 border-amber-300 dark:border-amber-600 filter grayscale group-hover:grayscale-0 transition-all duration-300">
        <div class="p-6">
          <h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-50 tracking-wide">Classic Typewriter B4</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 font-mono">For the writer who loves the tactile feel.</p>
          <div class="flex items-baseline justify-between mb-4">
            <p class="text-2xl font-extrabold text-amber-700 dark:text-amber-300">$249.00</p>
          </div>
          <button class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-4 rounded-lg shadow-md transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 uppercase tracking-widest text-lg">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="bg-stone-100 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-all duration-300 border-4 border-amber-300 dark:border-amber-600 relative group">
        <img src="https://picsum.photos/400/300?random=4" alt="Old School Camera" class="w-full h-48 object-cover border-b-4 border-amber-300 dark:border-amber-600 transition-all filter grayscale group-hover:grayscale-0 duration-300 ">
        <div class="p-6">
          <h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-50 tracking-wide">SnapCam 1990</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 font-mono">Capture moments the classic way.</p>
          <div class="flex items-baseline justify-between mb-4">
            <p class="text-2xl font-extrabold text-amber-700 dark:text-amber-300">$119.50</p>
          </div>
          <button class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-4 rounded-lg shadow-md transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 uppercase tracking-widest text-lg">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 5 -->
      <div class="bg-stone-100 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-all duration-300 border-4 border-amber-300 dark:border-amber-600 relative group">
        <div class="absolute top-0 right-0 bg-blue-500 text-white text-xs font-bold px-3 py-1 rounded-bl-lg shadow-md tracking-wider rotate-3 transform origin-top-right group-hover:scale-110 transition-transform duration-200 z-10">
          NEW!
        </div>
        <img src="https://picsum.photos/400/300?random=5" alt="Portable Cassette Player" class="w-full h-48 object-cover border-b-4 border-amber-300 dark:border-amber-600 transition-all filter grayscale group-hover:grayscale-0 duration-300 ">
        <div class="p-6">
          <h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-50 tracking-wide">Walkman Classic</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 font-mono">Your favorite tunes on the go.</p>
          <div class="flex items-baseline justify-between mb-4">
            <p class="text-2xl font-extrabold text-amber-700 dark:text-amber-300">$89.00</p>
          </div>
          <button class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-4 rounded-lg shadow-md transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 uppercase tracking-widest text-lg">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 6 -->
      <div class="bg-stone-100 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-all duration-300 border-4 border-amber-300 dark:border-amber-600 relative group">
        <img src="https://picsum.photos/400/300?random=6" alt="Boombox" class="w-full h-48 object-cover border-b-4 border-amber-300 dark:border-amber-600 transition-all filter grayscale group-hover:grayscale-0 duration-300 ">
        <div class="p-6">
          <h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-50 tracking-wide">Street Blaster '92</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 font-mono">Bring the party wherever you go.</p>
          <div class="flex items-baseline justify-between mb-4">
            <p class="text-2xl font-extrabold text-amber-700 dark:text-amber-300">$175.00</p>
          </div>
          <button class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-4 rounded-lg shadow-md transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 uppercase tracking-widest text-lg">
            Add to Cart
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Social Media Cards Component

A minimalist and vibrant card component suitable for social media interfaces, displaying user posts with images, likes, comments, and sharing options. It is fully responsive and supports dark mode.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen">
  <div class="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 max-w-7xl mx-auto">

    <!-- Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-in-out hover:shadow-lg dark:hover:shadow-xl">
      <div class="p-4 flex items-center justify-between border-b border-gray-200 dark:border-gray-700">
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-3 border-2 border-fuchsia-500" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-lg text-gray-900 dark:text-white">Jane Doe</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</p>
          </div>
        </div>
        <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
          </svg>
        </button>
      </div>
      <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1018/600/400" alt="Post Image">
      <div class="p-4">
        <p class="text-gray-800 dark:text-gray-200 mb-3 text-base">Exploring the vibrant streets of Lisbon! So much beauty and history around every corner. #Travel #Lisbon #Portugal</p>
        <div class="flex items-center justify-between text-gray-500 dark:text-gray-400 mb-4">
          <div class="flex items-center space-x-4">
            <a href="#" class="flex items-center hover:text-pink-600 dark:hover:text-pink-400 transition-colors duration-200">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
              </svg>
              <span>120 Likes</span>
            </a>
            <a href="#" class="flex items-center hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
              </svg>
              <span>25 Comments</span>
            </a>
          </div>
          <a href="#" class="flex items-center hover:text-green-600 dark:hover:text-green-400 transition-colors duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.882 13.07 9.283 13 9.683 13h4.634c.4 0 .702.07.9.342M17 14v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1m-6 9v-3h-2m.02-6l.075-.98.74-1.243A3 3 0 0117.25 4H20a2 2 0 012 2v6a2 2 0 01-2 2h-3L13 19l-1-7h-5z" />
            </svg>
            <span>Share</span>
          </a>
        </div>
      </div>
    </div>

    <!-- Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-in-out hover:shadow-lg dark:hover:shadow-xl">
      <div class="p-4 flex items-center justify-between border-b border-gray-200 dark:border-gray-700">
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-3 border-2 border-emerald-500" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-lg text-gray-900 dark:text-white">John Smith</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">4 hours ago</p>
          </div>
        </div>
        <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
          </svg>
        </button>
      </div>
      <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1025/600/400" alt="Post Image">
      <div class="p-4">
        <p class="text-gray-800 dark:text-gray-200 mb-3 text-base">Morning run views! Nothing beats a cool breeze and a clear sky to start the day. #Fitness #MorningRun #Nature</p>
        <div class="flex items-center justify-between text-gray-500 dark:text-gray-400 mb-4">
          <div class="flex items-center space-x-4">
            <a href="#" class="flex items-center hover:text-pink-600 dark:hover:text-pink-400 transition-colors duration-200">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
              </svg>
              <span>85 Likes</span>
            </a>
            <a href="#" class="flex items-center hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
              </svg>
              <span>10 Comments</span>
            </a>
          </div>
          <a href="#" class="flex items-center hover:text-green-600 dark:hover:text-green-400 transition-colors duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.882 13.07 9.283 13 9.683 13h4.634c.4 0 .702.07.9.342M17 14v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1m-6 9v-3h-2m.02-6l.075-.98.74-1.243A3 3 0 0117.25 4H20a2 2 0 012 2v6a2 2 0 01-2 2h-3L13 19l-1-7h-5z" />
            </svg>
            <span>Share</span>
          </a>
        </div>
      </div>
    </div>

    <!-- Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-in-out hover:shadow-lg dark:hover:shadow-xl">
      <div class="p-4 flex items-center justify-between border-b border-gray-200 dark:border-gray-700">
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-3 border-2 border-orange-500" src="https://randomuser.me/api/portraits/women/3.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-lg text-gray-900 dark:text-white">Emily White</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">1 day ago</p>
          </div>
        </div>
        <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
          </svg>
        </button>
      </div>
      <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1043/600/400" alt="Post Image">
      <div class="p-4">
        <p class="text-gray-800 dark:text-gray-200 mb-3 text-base">Such a creative afternoon in the studio! Love bringing new ideas to life. #Art #Creative #StudioLife</p>
        <div class="flex items-center justify-between text-gray-500 dark:text-gray-400 mb-4">
          <div class="flex items-center space-x-4">
            <a href="#" class="flex items-center hover:text-pink-600 dark:hover:text-pink-400 transition-colors duration-200">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
              </svg>
              <span>150 Likes</span>
            </a>
            <a href="#" class="flex items-center hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
              </svg>
              <span>30 Comments</span>
            </a>
          </div>
          <a href="#" class="flex items-center hover:text-green-600 dark:hover:text-green-400 transition-colors duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.882 13.07 9.283 13 9.683 13h4.634c.4 0 .702.07.9.342M17 14v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1m-6 9v-3h-2m.02-6l.075-.98.74-1.243A3 3 0 0117.25 4H20a2 2 0 012 2v6a2 2 0 01-2 2h-3L13 19l-1-7h-5z" />
            </svg>
            <span>Share</span>
          </a>
        </div>
      </div>
    </div>

    <!-- Card 4 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-in-out hover:shadow-lg dark:hover:shadow-xl">
      <div class="p-4 flex items-center justify-between border-b border-gray-200 dark:border-gray-700">
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-3 border-2 border-violet-500" src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-lg text-gray-900 dark:text-white">Michael Brown</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">5 days ago</p>
          </div>
        </div>
        <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
          </svg>
        </button>
      </div>
      <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1053/600/400" alt="Post Image">
      <div class="p-4">
        <p class="text-gray-800 dark:text-gray-200 mb-3 text-base">Coffee and codes, my favorite combination to kick off the week! #DeveloperLife #CoffeeLover #Coding</p>
        <div class="flex items-center justify-between text-gray-500 dark:text-gray-400 mb-4">
          <div class="flex items-center space-x-4">
            <a href="#" class="flex items-center hover:text-pink-600 dark:hover:text-pink-400 transition-colors duration-200">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
              </svg>
              <span>200 Likes</span>
            </a>
            <a href="#" class="flex items-center hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
              </svg>
              <span>45 Comments</span>
            </a>
          </div>
          <a href="#" class="flex items-center hover:text-green-600 dark:hover:text-green-400 transition-colors duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.882 13.07 9.283 13 9.683 13h4.634c.4 0 .702.07.9.342M17 14v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1m-6 9v-3h-2m.02-6l.075-.98.74-1.243A3 3 0 0117.25 4H20a2 2 0 012 2v6a2 2 0 01-2 2h-3L13 19l-1-7h-5z" />
            </svg>
            <span>Share</span>
          </a>
        </div>
      </div>
    </div>

  </div>
</div>

Cards Component

A responsive portfolio card component with a brutalist design style, utilizing a pastel color scheme and moderate complexity with interactive features. This card showcases work or products and supports dark mode.

Open Preview

                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 p-6 bg-gray-50 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-900 border-2 border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300 ease-in-out">
        <img class="w-full h-32 object-cover" src="https://picsum.photos/300/200?random=1" alt="Portfolio Image" />
        <div class="p-4">
            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Project Title</h2>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the project. This project showcases some amazing work or product.</p>
            <div class="mt-4 flex space-x-2">
                <a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">View</a>
                <a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">Code</a>
            </div>
        </div>
    </div>

    <div class="bg-white dark:bg-gray-900 border-2 border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300 ease-in-out">
        <img class="w-full h-32 object-cover" src="https://picsum.photos/300/200?random=2" alt="Portfolio Image" />
        <div class="p-4">
            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Project Title</h2>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the project. This project showcases some amazing work or product.</p>
            <div class="mt-4 flex space-x-2">
                <a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">View</a>
                <a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">Code</a>
            </div>
        </div>
    </div>

    <div class="bg-white dark:bg-gray-900 border-2 border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300 ease-in-out">
        <img class="w-full h-32 object-cover" src="https://picsum.photos/300/200?random=3" alt="Portfolio Image" />
        <div class="p-4">
            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Project Title</h2>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the project. This project showcases some amazing work or product.</p>
            <div class="mt-4 flex space-x-2">
                <a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">View</a>
                <a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">Code</a>
            </div>
        </div>
    </div>
</div>

Cards Component

A responsive blog/content card component designed with skeuomorphic style and earth tones. Includes a title, an image, a brief description, and an avatar for author information. Supports dark mode.

Open Preview

                <div class="max-w-3xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg space-y-4">
    <div class="bg-green-200 dark:bg-green-700 rounded-lg overflow-hidden">
        <img src="https://picsum.photos/400/200" alt="Blog Post Image" class="w-full h-48 object-cover">
    </div>
    <div class="p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title</h2>
        <p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the blog post. It provides a summary of the content and encourages users to read more.</p>
    </div>
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
        <div class="text-gray-800 dark:text-gray-200">
            <p class="font-semibold">Author Name</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Date Published</p>
        </div>
    </div>
</div>

Cards Component

Responsive cards component with microinteractions and dark theme support.

Open Preview

                <div class="container mx-auto p-4">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum1/600/400" alt="Card image cap">
      <div class="p-4">
        <h5 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Card title</h5>
        <p class="text-gray-700 dark:text-gray-300 text-base mb-4">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.
        </p>
        <a href="#" class="inline-block bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition-colors duration-300">Read more</a>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum2/600/400" alt="Card image cap">
      <div class="p-4">
        <h5 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Card title</h5>
        <p class="text-gray-700 dark:text-gray-300 text-base mb-4">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.
        </p>
        <a href="#" class="inline-block bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded transition-colors duration-300">Read more</a>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum3/600/400" alt="Card image cap">
      <div class="p-4">
        <h5 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Card title</h5>
        <p class="text-gray-700 dark:text-gray-300 text-base mb-4">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.
        </p>
        <a href="#" class="inline-block bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded transition-colors duration-300">Read more</a>
      </div>
    </div>
  </div>
</div>

Skeuomorphic Cards Component

A simple cards component designed in a skeuomorphic style, using an analogous color scheme for reading and content consumption. This component is responsive and supports dark theme.

Open Preview

                <div class="flex flex-col items-center justify-center p-6 space-y-4 md:flex-row md:flex-wrap md:space-x-4 md:space-y-0">
  <div class="bg-gradient-to-br from-green-300 to-blue-400 rounded-lg shadow-lg p-4 w-full max-w-xs dark:from-green-600 dark:to-blue-700">
    <img class="rounded-t-lg" src="https://picsum.photos/300/200?random=1" alt="Card Image" />
    <div class="p-4">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card Title</h2>
      <p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <div class="flex items-center mt-4">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
        <p class="ml-2 text-gray-700 dark:text-gray-300">Author Name</p>
      </div>
    </div>
  </div>
  <div class="bg-gradient-to-br from-green-300 to-blue-400 rounded-lg shadow-lg p-4 w-full max-w-xs dark:from-green-600 dark:to-blue-700">
    <img class="rounded-t-lg" src="https://picsum.photos/300/200?random=2" alt="Card Image" />
    <div class="p-4">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card Title</h2>
      <p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <div class="flex items-center mt-4">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" />
        <p class="ml-2 text-gray-700 dark:text-gray-300">Author Name</p>
      </div>
    </div>
  </div>
</div>

Cards Component

A complex cards component designed for dark mode, suitable for blog and content consumption with a triadic color scheme.

Open Preview

                <div class="bg-gray-900 p-8 rounded-lg shadow-lg space-y-6 dark:bg-gray-800">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
        <div class="text-white">
            <h2 class="text-xl font-bold">Author Name</h2>
            <p class="text-gray-400">March 1, 2023</p>
        </div>
    </div>
    <img src="https://picsum.photos/600/400" alt="Blog Post" class="w-full rounded-lg">
    <h3 class="text-white text-2xl font-semibold">Blog Post Title</h3>
    <p class="text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
    <div class="flex justify-between items-center">
        <span class="bg-green-600 text-white py-1 px-3 rounded-full">Category</span>
        <button class="bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-700">Read More</button>
    </div>
</div>
<div class="bg-gray-900 p-8 rounded-lg shadow-lg space-y-6 dark:bg-gray-800">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
        <div class="text-white">
            <h2 class="text-xl font-bold">Author Name</h2>
            <p class="text-gray-400">March 2, 2023</p>
        </div>
    </div>
    <img src="https://picsum.photos/600/401" alt="Blog Post" class="w-full rounded-lg">
    <h3 class="text-white text-2xl font-semibold">Another Blog Post Title</h3>
    <p class="text-gray-300">Suspense is best enjoyed with plenty of space as you travel up the textual ladders of creativeness.</p>
    <div class="flex justify-between items-center">
        <span class="bg-pink-600 text-white py-1 px-3 rounded-full">Category</span>
        <button class="bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-700">Read More</button>
    </div>
</div>

Search Components

Categories

Cards