Search Components

Cards

Rectangular containers with related information

Skeuomorphic_Crypto_Cards

A set of responsive, skeuomorphic cards designed for cryptocurrency or blockchain applications. Features pastel colors, subtle shadows and highlights, and dark mode support.

Open Preview

                <div class="p-4 sm:p-8 bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 min-h-screen dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 flex flex-col items-center justify-center font-sans">

  <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-gray-800 mb-10 text-center tracking-tight drop-shadow-lg dark:text-gray-100">
    <span class="block">Crypto Portfolio</span>
    <span class="block text-2xl sm:text-3xl text-gray-600 dark:text-gray-300 font-medium mt-2">Your Digital Assets</span>
  </h1>

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 w-full max-w-6xl">

    <!-- Card 1: Bitcoin -->
    <div class="relative flex flex-col justify-between p-6 rounded-3xl backdrop-filter backdrop-blur-sm bg-gradient-to-br from-white/80 to-gray-50/80 shadow-[inset_0_1px_0px_rgba(255,255,255,0.7),_0_4px_16px_rgba(0,0,0,0.1),_0_12px_48px_rgba(0,0,0,0.05)] dark:from-gray-700/80 dark:to-gray-800/80 dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.05),_0_4px_16px_rgba(0,0,0,0.4),_0_12px_48px_rgba(0,0,0,0.2)] transform transition-all duration-300 hover:scale-[1.02] active:scale-[0.98]">
      <div class="absolute inset-0 rounded-3xl border-2 border-white/50 dark:border-gray-600/50 pointer-events-none"></div>
      <div class="flex items-center mb-4">
        <img src="https://www.picsum.photos/id/60/60" alt="Bitcoin Icon" class="w-16 h-16 rounded-full shadow-lg border-2 border-white dark:border-gray-600 drop-shadow-md">
        <h2 class="ml-4 text-3xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-sm">Bitcoin</h2>
      </div>
      <p class="text-gray-600 dark:text-gray-300 mb-4 text-lg">The first and most well-known cryptocurrency.</p>
      <div class="grid grid-cols-2 gap-2 text-sm mb-4">
        <div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
          <span class="block font-medium">Price:</span>
          <span class="block text-pink-600 dark:text-pink-400 font-bold text-lg">$65,432.10</span>
        </div>
        <div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
          <span class="block font-medium">Change (24h):</span>
          <span class="block text-green-600 dark:text-green-400 font-bold text-lg">+3.15%</span>
        </div>
        <div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
          <span class="block font-medium">Holdings:</span>
          <span class="block text-purple-600 dark:text-purple-400 font-bold text-lg">0.5 BTC</span>
        </div>
        <div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
          <span class="block font-medium">Value:</span>
          <span class="block text-yellow-600 dark:text-yellow-400 font-bold text-lg">$32,716.05</span>
        </div>
      </div>
      <button class="w-full flex items-center justify-center px-6 py-3 rounded-full text-lg font-semibold text-white bg-gradient-to-br from-pink-400 to-purple-500 shadow-lg shadow-purple-300/50 dark:shadow-purple-800/50 active:shadow-inner-sm border border-white/50 active:border-white/80 active:from-pink-500 active:to-purple-600 transition-all duration-150 transform active:scale-98 relative overflow-hidden group">
        <span class="relative z-10 group-hover:scale-105 transition-transform duration-200">Trade Bitcoin</span>
        <span class="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 group-active:opacity-0 transition-opacity duration-200"></span>
      </button>
    </div>

    <!-- Card 2: Ethereum -->
    <div class="relative flex flex-col justify-between p-6 rounded-3xl backdrop-filter backdrop-blur-sm bg-gradient-to-br from-white/80 to-gray-50/80 shadow-[inset_0_1px_0px_rgba(255,255,255,0.7),_0_4px_16px_rgba(0,0,0,0.1),_0_12px_48px_rgba(0,0,0,0.05)] dark:from-gray-700/80 dark:to-gray-800/80 dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.05),_0_4px_16px_rgba(0,0,0,0.4),_0_12px_48px_rgba(0,0,0,0.2)] transform transition-all duration-300 hover:scale-[1.02] active:scale-[0.98]">
      <div class="absolute inset-0 rounded-3xl border-2 border-white/50 dark:border-gray-600/50 pointer-events-none"></div>
      <div class="flex items-center mb-4">
        <img src="https://www.picsum.photos/id/65/60" alt="Ethereum Icon" class="w-16 h-16 rounded-full shadow-lg border-2 border-white dark:border-gray-600 drop-shadow-md">
        <h2 class="ml-4 text-3xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-sm">Ethereum</h2>
      </div>
      <p class="text-gray-600 dark:text-gray-300 mb-4 text-lg">The decentralized platform for smart contracts.</p>
      <div class="grid grid-cols-2 gap-2 text-sm mb-4">
        <div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
          <span class="block font-medium">Price:</span>
          <span class="block text-teal-600 dark:text-teal-400 font-bold text-lg">$3,456.78</span>
        </div>
        <div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
          <span class="block font-medium">Change (24h):</span>
          <span class="block text-red-600 dark:text-red-400 font-bold text-lg">-1.50%</span>
        </div>
        <div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
          <span class="block font-medium">Holdings:</span>
          <span class="block text-purple-600 dark:text-purple-400 font-bold text-lg">3.0 ETH</span>
        </div>
        <div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
          <span class="block font-medium">Value:</span>
          <span class="block text-yellow-600 dark:text-yellow-400 font-bold text-lg">$10,370.34</span>
        </div>
      </div>
      <button class="w-full flex items-center justify-center px-6 py-3 rounded-full text-lg font-semibold text-white bg-gradient-to-br from-green-400 to-teal-500 shadow-lg shadow-teal-300/50 dark:shadow-teal-800/50 active:shadow-inner-sm border border-white/50 active:border-white/80 active:from-green-500 active:to-teal-600 transition-all duration-150 transform active:scale-98 relative overflow-hidden group">
        <span class="relative z-10 group-hover:scale-105 transition-transform duration-200">Trade Ethereum</span>
        <span class="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 group-active:opacity-0 transition-opacity duration-200"></span>
      </button>
    </div>

    <!-- Card 3: BNB -->
    <div class="relative flex flex-col justify-between p-6 rounded-3xl backdrop-filter backdrop-blur-sm bg-gradient-to-br from-white/80 to-gray-50/80 shadow-[inset_0_1px_0px_rgba(255,255,255,0.7),_0_4px_16px_rgba(0,0,0,0.1),_0_12px_48px_rgba(0,0,0,0.05)] dark:from-gray-700/80 dark:to-gray-800/80 dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.05),_0_4px_16px_rgba(0,0,0,0.4),_0_12px_48px_rgba(0,0,0,0.2)] transform transition-all duration-300 hover:scale-[1.02] active:scale-[0.98]">
      <div class="absolute inset-0 rounded-3xl border-2 border-white/50 dark:border-gray-600/50 pointer-events-none"></div>
      <div class="flex items-center mb-4">
        <img src="https://www.picsum.photos/id/70/60" alt="BNB Icon" class="w-16 h-16 rounded-full shadow-lg border-2 border-white dark:border-gray-600 drop-shadow-md">
        <h2 class="ml-4 text-3xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-sm">BNB</h2>
      </div>
      <p class="text-gray-600 dark:text-gray-300 mb-4 text-lg">The native cryptocurrency of the Binance Smart Chain.</p>
      <div class="grid grid-cols-2 gap-2 text-sm mb-4">
        <div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
          <span class="block font-medium">Price:</span>
          <span class="block text-red-600 dark:text-red-400 font-bold text-lg">$589.99</span>
        </div>
        <div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
          <span class="block font-medium">Change (24h):</span>
          <span class="block text-green-600 dark:text-green-400 font-bold text-lg">+0.80%</span>
        </div>
        <div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
          <span class="block font-medium">Holdings:</span>
          <span class="block text-purple-600 dark:text-purple-400 font-bold text-lg">10.0 BNB</span>
        </div>
        <div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
          <span class="block font-medium">Value:</span>
          <span class="block text-yellow-600 dark:text-yellow-400 font-bold text-lg">$5,899.90</span>
        </div>
      </div>
      <button class="w-full flex items-center justify-center px-6 py-3 rounded-full text-lg font-semibold text-white bg-gradient-to-br from-blue-400 to-indigo-500 shadow-lg shadow-indigo-300/50 dark:shadow-indigo-800/50 active:shadow-inner-sm border border-white/50 active:border-white/80 active:from-blue-500 active:to-indigo-600 transition-all duration-150 transform active:scale-98 relative overflow-hidden group">
        <span class="relative z-10 group-hover:scale-105 transition-transform duration-200">Trade BNB</span>
        <span class="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 group-active:opacity-0 transition-opacity duration-200"></span>
      </button>
    </div>

  </div>

  <footer class="mt-12 text-center text-gray-600 dark:text-gray-400 text-sm">
    <p>&copy; 2023 Crypto Portfolio. All rights reserved.</p>
  </footer>

</div>

ArtDeco_EarthTones_Cards_Technology_SaaS

A simple, responsive cards component for Technology/SaaS applications, inspired by Art Deco geometric patterns and a natural earth tones color scheme. Includes dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-900 dark:to-stone-950 min-h-screen flex items-center justify-center font-serif">
  <div class="container mx-auto px-4 py-8 sm:py-12 md:py-16">
    <h2 class="text-center text-3xl sm:text-4xl md:text-5xl font-extrabold text-stone-800 dark:text-stone-100 mb-6 sm:mb-8 md:mb-12 tracking-wide">
      <span class="block">Our <span class="text-amber-700 dark:text-amber-500">SaaS</span> Offerings</span>
    </h2>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-10">

      <!-- Card 1: Core Analytics -->
      <div class="group bg-stone-50 dark:bg-stone-800 rounded-lg overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 ease-in-out transform hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-amber-500/30 border-2 border-stone-200 dark:border-stone-700 relative">
        <div class="absolute inset-0 bg-gradient-to-br from-amber-100/30 via-stone-100/30 to-zinc-100/30 dark:from-amber-900/20 dark:via-stone-900/20 dark:to-zinc-900/20 rounded-lg opacity-0 transition-opacity duration-300 group-hover:opacity-100" style="clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 80% 100%, 0% 100%);"></div>
        <div class="relative p-6 sm:p-8 z-10">
          <img class="w-16 h-16 mb-4 sm:mb-6 mx-auto" src="https://picsum.photos/id/25/64/64" alt="Analytics Icon">
          <h3 class="text-2xl sm:text-3xl font-bold text-amber-800 dark:text-amber-500 mb-3 text-center tracking-wider">Core Analytics</h3>
          <p class="text-stone-700 dark:text-stone-300 text-base sm:text-lg leading-relaxed mb-6 text-center">
            Gain profound insights with our advanced, real-time data analytics. Understand patterns, predict trends.
          </p>
          <ul class="space-y-3 mb-6">
            <li class="flex items-center text-stone-600 dark:text-stone-400">
              <svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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>
              Intuitive Dashboards
            </li>
            <li class="flex items-center text-stone-600 dark:text-stone-400">
              <svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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>
              Real-time Processing
            </li>
            <li class="flex items-center text-stone-600 dark:text-stone-400">
              <svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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>
              Customizable Reports
            </li>
          </ul>
          <button class="block w-full py-3 px-6 rounded-md bg-amber-700 text-stone-50 font-semibold text-lg uppercase tracking-wider shadow-md hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:bg-amber-600 dark:hover:bg-amber-700 dark:focus:ring-amber-400 transition-colors duration-300">
            Learn More
          </button>
        </div>
      </div>

      <!-- Card 2: Secure Cloud Storage -->
      <div class="group bg-stone-50 dark:bg-stone-800 rounded-lg overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 ease-in-out transform hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-amber-500/30 border-2 border-stone-200 dark:border-stone-700 relative">
        <div class="absolute inset-0 bg-gradient-to-br from-amber-100/30 via-stone-100/30 to-zinc-100/30 dark:from-amber-900/20 dark:via-stone-900/20 dark:to-zinc-900/20 rounded-lg opacity-0 transition-opacity duration-300 group-hover:opacity-100" style="clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 80% 100%, 0% 100%);"></div>
        <div class="relative p-6 sm:p-8 z-10">
          <img class="w-16 h-16 mb-4 sm:mb-6 mx-auto" src="https://picsum.photos/id/29/64/64" alt="Storage Icon">
          <h3 class="text-2xl sm:text-3xl font-bold text-amber-800 dark:text-amber-500 mb-3 text-center tracking-wider">Secure Cloud Storage</h3>
          <p class="text-stone-700 dark:text-stone-300 text-base sm:text-lg leading-relaxed mb-6 text-center">
            Keep your data safe with our robust, encrypted cloud storage solutions.
          </p>
          <ul class="space-y-3 mb-6">
            <li class="flex items-center text-stone-600 dark:text-stone-400">
              <svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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>
              End-to-End Encryption
            </li>
            <li class="flex items-center text-stone-600 dark:text-stone-400">
              <svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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>
              Automated Backups
            </li>
            <li class="flex items-center text-stone-600 dark:text-stone-400">
              <svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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>
              Access Controls
            </li>
          </ul>
          <button class="block w-full py-3 px-6 rounded-md bg-amber-700 text-stone-50 font-semibold text-lg uppercase tracking-wider shadow-md hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:bg-amber-600 dark:hover:bg-amber-700 dark:focus:ring-amber-400 transition-colors duration-300">
            Explore Features
          </button>
        </div>
      </div>

      <!-- Card 3: Collaborative Workspace -->
      <div class="group bg-stone-50 dark:bg-stone-800 rounded-lg overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 ease-in-out transform hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-amber-500/30 border-2 border-stone-200 dark:border-stone-700 relative">
        <div class="absolute inset-0 bg-gradient-to-br from-amber-100/30 via-stone-100/30 to-zinc-100/30 dark:from-amber-900/20 dark:via-stone-900/20 dark:to-zinc-900/20 rounded-lg opacity-0 transition-opacity duration-300 group-hover:opacity-100" style="clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 80% 100%, 0% 100%);"></div>
        <div class="relative p-6 sm:p-8 z-10">
          <img class="w-16 h-16 mb-4 sm:mb-6 mx-auto" src="https://picsum.photos/id/35/64/64" alt="Collaboration Icon">
          <h3 class="text-2xl sm:text-3xl font-bold text-amber-800 dark:text-amber-500 mb-3 text-center tracking-wider">Collaborate Seamlessly</h3>
          <p class="text-stone-700 dark:text-stone-300 text-base sm:text-lg leading-relaxed mb-6 text-center">
            Empower your team with a shared, dynamic workspace for optimal productivity.
          </p>
          <ul class="space-y-3 mb-6">
            <li class="flex items-center text-stone-600 dark:text-stone-400">
              <svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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>
              Live Document Editing
            </li>
            <li class="flex items-center text-stone-600 dark:text-stone-400">
              <svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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>
              Integrated Communication
            </li>
            <li class="flex items-center text-stone-600 dark:text-stone-400">
              <svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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>
              Task Management
            </li>
          </ul>
          <button class="block w-full py-3 px-6 rounded-md bg-amber-700 text-stone-50 font-semibold text-lg uppercase tracking-wider shadow-md hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:bg-amber-600 dark:hover:bg-amber-700 dark:focus:ring-amber-400 transition-colors duration-300">
            Start Collaborating
          </button>
        </div>
      </div>

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

Crypto_Blockchain_Cards_Component

A set of responsive cards designed for cryptocurrency and blockchain applications, featuring a warm neutral color scheme, Material-inspired shadows, and dark mode support.

Open Preview

                <div class="bg-stone-50 dark:bg-stone-900 min-h-screen p-4 sm:p-6 lg:p-8 flex items-center justify-center font-sans">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-7xl mx-auto">

    <!-- Card 1: Asset Overview -->
    <div class="bg-white dark:bg-stone-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden perspective group">
      <div class="p-6 relative z-10">
        <div class="flex items-center justify-between mb-4">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-100">Bitcoin (BTC)</h3>
          <span class="text-stone-500 dark:text-stone-400 text-sm">Your Balance</span>
        </div>
        <div class="flex items-center space-x-3 mb-2">
          <img class="w-8 h-8 rounded-full shadow-md" src="https://picsum.photos/id/1043/40/40" alt="Bitcoin Logo">
          <p class="text-3xl font-bold text-stone-900 dark:text-stone-50">0.05 BTC</p>
        </div>
        <p class="text-stone-600 dark:text-stone-300 text-lg mb-6">$ 3,450.78 <span class="text-emerald-600 dark:text-emerald-400 text-base font-semibold">+1.2%</span></p>
        <div class="flex justify-between items-center text-sm">
          <span class="text-stone-500 dark:text-stone-400">24h Change:</span>
          <span class="text-emerald-600 dark:text-emerald-400 font-medium">+ $45.21</span>
        </div>
        <div class="flex justify-end mt-4">
          <button class="px-4 py-2 bg-amber-600 text-white rounded-md shadow-md hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-200">
            View Details
          </button>
        </div>
      </div>
    </div>

    <!-- Card 2: Recent Transactions -->
    <div class="bg-white dark:bg-stone-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden perspective group">
      <div class="p-6 relative z-10">
        <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-4">Recent Transactions</h3>
        <ul class="space-y-4">
          <li class="flex items-center justify-between">
            <div class="flex items-center space-x-3">
              <div class="bg-emerald-100 dark:bg-emerald-900 p-2 rounded-full">
                <svg class="w-5 h-5 text-emerald-600 dark:text-emerald-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="M7 11c.902-1.705 2.128-3.037 3.551-4L15 8l-3 4m0 0l3 4m-3-4c-1.423.963-2.649 2.295-3.551 4"></path></svg>
              </div>
              <div>
                <p class="text-stone-800 dark:text-stone-100 font-medium">Received ETH</p>
                <p class="text-stone-500 dark:text-stone-400 text-sm">From: 0x...abc</p>
              </div>
            </div>
            <span class="text-emerald-600 dark:text-emerald-400 font-semibold">+0.15 ETH</span>
          </li>
          <li class="flex items-center justify-between">
            <div class="flex items-center space-x-3">
              <div class="bg-rose-100 dark:bg-rose-900 p-2 rounded-full">
                <svg class="w-5 h-5 text-rose-600 dark:text-rose-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="M17 13l-5 5m0 0l-5-5m5 5V6"></path></svg>
              </div>
              <div>
                <p class="text-stone-800 dark:text-stone-100 font-medium">Sent BTC</p>
                <p class="text-stone-500 dark:text-stone-400 text-sm">To: 0x...def</p>
              </div>
            </div>
            <span class="text-rose-600 dark:text-rose-400 font-semibold">-0.002 BTC</span>
          </li>
          <li class="flex items-center justify-between">
            <div class="flex items-center space-x-3">
              <div class="bg-blue-100 dark:bg-blue-900 p-2 rounded-full">
                <svg class="w-5 h-5 text-blue-600 dark:text-blue-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 7h6m-3 2v4m-3 3h6m-3-6h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              </div>
              <div>
                <p class="text-stone-800 dark:text-stone-100 font-medium">Staked ADA</p>
                <p class="text-stone-500 dark:text-stone-400 text-sm">Pool: CardanoStake</p>
              </div>
            </div>
            <span class="text-blue-600 dark:text-blue-400 font-semibold">+50 ADA</span>
          </li>
        </ul>
        <div class="flex justify-end mt-4">
          <button class="px-4 py-2 border border-stone-300 dark:border-stone-600 text-stone-700 dark:text-stone-300 rounded-md hover:bg-stone-100 dark:hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-opacity-75 transition duration-200">
            View All
          </button>
        </div>
      </div>
    </div>

    <!-- Card 3: Blockchain News / Updates -->
    <div class="bg-white dark:bg-stone-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden perspective group">
      <div class="relative pb-2/3 overflow-hidden rounded-t-lg">
        <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/29/600/400" alt="Blockchain News">
        <div class="absolute inset-0 bg-gradient-to-t from-stone-900 to-transparent opacity-75"></div>
        <div class="absolute bottom-0 left-0 p-4 w-full">
          <span class="text-xs font-semibold text-stone-200 dark:text-stone-400 uppercase tracking-wide">News</span>
          <h3 class="text-lg font-semibold text-white dark:text-stone-50 leading-tight">Ethereum 'Merge' Success: A New Era for Crypto</h3>
        </div>
      </div>
      <div class="p-6 relative z-10">
        <p class="text-stone-700 dark:text-stone-300 mb-4 text-sm leading-relaxed">The highly anticipated Ethereum 'Merge' has been successfully completed, transitioning the network to Proof-of-Stake. This marks a significant milestone...</p>
        <div class="flex items-center justify-between text-xs text-stone-500 dark:text-stone-400">
          <span>September 15, 2023</span>
          <a href="#" class="text-amber-600 hover:underline dark:text-amber-500">Read more</a>
        </div>
      </div>
    </div>

  </div>
</div>

Bauhaus Weather Cards Component

A simple, responsive weather/climate cards component inspired by Bauhaus design principles, featuring geometric forms and a triadic color scheme. Includes dark mode support.

Open Preview

                <div class="p-4 sm:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans tracking-wide">
  <div class="container max-w-7xl grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">

    <!-- Today's Weather Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-b-4 border-l-4 border-red-500 dark:border-red-600 transform transition-transform duration-300 hover:scale-[1.02] flex flex-col">
      <div class="p-6 flex-grow flex flex-col justify-between">
        <div>
          <h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white capitalize">Today</h2>
          <p class="text-4xl font-extrabold text-blue-600 dark:text-blue-400 mb-4">28°C</p>
          <p class="text-lg text-gray-600 dark:text-gray-300 mb-4">Sunny with scattered clouds</p>
        </div>
        <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 grid grid-cols-2 gap-2 text-sm text-gray-700 dark:text-gray-400">
          <div>
            <span class="font-semibold block">Humidity:</span> 65%
          </div>
          <div>
            <span class="font-semibold block">Wind:</span> 12 km/h NE
          </div>
          <div>
            <span class="font-semibold block">UV Index:</span> Low
          </div>
          <div>
            <span class="font-semibold block">Precip:</span> 0%
          </div>
        </div>
      </div>
      <div class="px-6 py-3 bg-yellow-500 dark:bg-yellow-600 text-sm font-semibold text-white uppercase text-center">
        Current Conditions
      </div>
    </div>

    <!-- Tomorrow's Forecast Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-b-4 border-l-4 border-blue-500 dark:border-blue-600 transform transition-transform duration-300 hover:scale-[1.02] flex flex-col">
      <div class="p-6 flex-grow flex flex-col justify-between">
        <div>
          <h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white capitalize">Tomorrow</h2>
          <p class="text-4xl font-extrabold text-red-600 dark:text-red-400 mb-4">25°C</p>
          <p class="text-lg text-gray-600 dark:text-gray-300 mb-4">Partly cloudy, chance of showers</p>
        </div>
        <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 grid grid-cols-2 gap-2 text-sm text-gray-700 dark:text-gray-400">
          <div>
            <span class="font-semibold block">Humidity:</span> 78%
          </div>
          <div>
            <span class="font-semibold block">Wind:</span> 15 km/h NW
          </div>
          <div>
            <span class="font-semibold block">UV Index:</span> Moderate
          </div>
          <div>
            <span class="font-semibold block">Precip:</span> 30%
          </div>
        </div>
      </div>
      <div class="px-6 py-3 bg-red-500 dark:bg-red-600 text-sm font-semibold text-white uppercase text-center">
        Expected Forecast
      </div>
    </div>

    <!-- Day After Tomorrow's Forecast Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-b-4 border-l-4 border-yellow-500 dark:border-yellow-600 transform transition-transform duration-300 hover:scale-[1.02] flex flex-col">
      <div class="p-6 flex-grow flex flex-col justify-between">
        <div>
          <h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white capitalize">Fri, May 24</h2>
          <p class="text-4xl font-extrabold text-blue-600 dark:text-blue-400 mb-4">22°C</p>
          <p class="text-lg text-gray-600 dark:text-gray-300 mb-4">Mostly cloudy, few showers</p>
        </div>
        <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 grid grid-cols-2 gap-2 text-sm text-gray-700 dark:text-gray-400">
          <div>
            <span class="font-semibold block">Humidity:</span> 85%
          </div>
          <div>
            <span class="font-semibold block">Wind:</span> 10 km/h W
          </div>
          <div>
            <span class="font-semibold block">UV Index:</span> Low
          </div>
          <div>
            <span class="font-semibold block">Precip:</span> 60%
          </div>
        </div>
      </div>
      <div class="px-6 py-3 bg-blue-500 dark:bg-blue-600 text-sm font-semibold text-white uppercase text-center">
        Long Range Outlook
      </div>
    </div>

    <!-- Climate Data Card (Example with Placeholder Image) -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-b-4 border-l-4 border-green-500 dark:border-green-600 transform transition-transform duration-300 hover:scale-[1.02] flex flex-col">
      <img src="https://picsum.photos/400/250?random=1" alt="Climate Data Visualization" class="w-full h-40 object-cover border-b-4 border-green-500 dark:border-green-600 group-hover:scale-105 transition duration-300" loading="lazy">
      <div class="p-6 flex-grow flex flex-col justify-between">
        <div>
          <h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white capitalize">Climate Trends</h2>
          <p class="text-lg text-gray-600 dark:text-gray-300 mb-4">Analyzing global temperature shifts</p>
        </div>
        <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 text-sm text-gray-700 dark:text-gray-400">
          <p class="font-semibold">Average Anomaly:</p>
          <p class="mb-2">+0.85°C (past decade)</p>
          <p class="font-semibold">CO2 Levels:</p>
          <p>420 ppm (rising)</p>
        </div>
      </div>
      <div class="px-6 py-3 bg-green-500 dark:bg-green-600 text-sm font-semibold text-white uppercase text-center">
        Environmental Impact
      </div>
    </div>

  </div>
</div>

Music_Cards_Component

A responsive music/audio card component featuring rich jewel-tone gradients and smooth transitions, with dark mode support. Simple layout for album or track display.

Open Preview

                <div class="p-4 sm:p-8 bg-gradient-to-br from-purple-950 via-indigo-950 to-black dark:from-gray-950 dark:via-blue-950 dark:to-teal-950 min-h-screen flex items-center justify-center font-sans">
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 w-full max-w-7xl">

    <!-- Card 1 -->
    <div class="group relative overflow-hidden rounded-2xl shadow-xl transform transition-all duration-500 ease-in-out hover:scale-105 hover:shadow-2xl
                bg-gradient-to-tr from-fuchsia-700 via-purple-700 to-indigo-700 dark:from-fuchsia-900 dark:via-purple-900 dark:to-indigo-900">
      <div class="relative p-6 z-10 flex flex-col items-center text-center">
        <img src="https://picsum.photos/seed/music1/200/200" alt="Album Art" class="rounded-full w-32 h-32 object-cover mb-4 ring-4 ring-white dark:ring-gray-300 transition-transform duration-300 group-hover:scale-110">
        <h3 class="text-2xl font-bold text-white mb-2">Groovy Rhythms</h3>
        <p class="text-lg text-indigo-100 mb-4">Artist Name</p>
        <button class="px-6 py-3 rounded-full bg-white text-indigo-800 font-semibold text-lg shadow-md hover:bg-gray-100 hover:text-indigo-900 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-75">
          Play Now
        </button>
      </div>
      <div class="absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-black opacity-30 group-hover:opacity-60 transition-opacity duration-500"></div>
    </div>

    <!-- Card 2 -->
    <div class="group relative overflow-hidden rounded-2xl shadow-xl transform transition-all duration-500 ease-in-out hover:scale-105 hover:shadow-2xl
                bg-gradient-to-tr from-purple-700 via-blue-700 to-cyan-700 dark:from-purple-900 dark:via-blue-900 dark:to-cyan-900">
      <div class="relative p-6 z-10 flex flex-col items-center text-center">
        <img src="https://picsum.photos/seed/music2/200/200" alt="Album Art" class="rounded-full w-32 h-32 object-cover mb-4 ring-4 ring-white dark:ring-gray-300 transition-transform duration-300 group-hover:scale-110">
        <h3 class="text-2xl font-bold text-white mb-2">Electric Dreams</h3>
        <p class="text-lg text-blue-100 mb-4">Another Artist</p>
        <button class="px-6 py-3 rounded-full bg-white text-blue-800 font-semibold text-lg shadow-md hover:bg-gray-100 hover:text-blue-900 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-75">
          Play Now
        </button>
      </div>
      <div class="absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-black opacity-30 group-hover:opacity-60 transition-opacity duration-500"></div>
    </div>

    <!-- Card 3 -->
    <div class="group relative overflow-hidden rounded-2xl shadow-xl transform transition-all duration-500 ease-in-out hover:scale-105 hover:shadow-2xl
                bg-gradient-to-tr from-emerald-700 via-teal-700 to-sky-700 dark:from-emerald-900 dark:via-teal-900 dark:to-sky-900">
      <div class="relative p-6 z-10 flex flex-col items-center text-center">
        <img src="https://picsum.photos/seed/music3/200/200" alt="Album Art" class="rounded-full w-32 h-32 object-cover mb-4 ring-4 ring-white dark:ring-gray-300 transition-transform duration-300 group-hover:scale-110">
        <h3 class="text-2xl font-bold text-white mb-2">Jazzy Beats</h3>
        <p class="text-lg text-teal-100 mb-4">New Age Jazz Ensemble</p>
        <button class="px-6 py-3 rounded-full bg-white text-teal-800 font-semibold text-lg shadow-md hover:bg-gray-100 hover:text-teal-900 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-75">
          Play Now
        </button>
      </div>
      <div class="absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-black opacity-30 group-hover:opacity-60 transition-opacity duration-500"></div>
    </div>

    <!-- Card 4 -->
    <div class="group relative overflow-hidden rounded-2xl shadow-xl transform transition-all duration-500 ease-in-out hover:scale-105 hover:shadow-2xl
                bg-gradient-to-tr from-red-700 via-pink-700 to-purple-700 dark:from-red-900 dark:via-pink-900 dark:to-purple-900">
      <div class="relative p-6 z-10 flex flex-col items-center text-center">
        <img src="https://picsum.photos/seed/music4/200/200" alt="Album Art" class="rounded-full w-32 h-32 object-cover mb-4 ring-4 ring-white dark:ring-gray-300 transition-transform duration-300 group-hover:scale-110">
        <h3 class="text-2xl font-bold text-white mb-2">Melody Flow</h3>
        <p class="text-lg text-pink-100 mb-4">The Sound Weavers</p>
        <button class="px-6 py-3 rounded-full bg-white text-red-800 font-semibold text-lg shadow-md hover:bg-gray-100 hover:text-red-900 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-75">
          Play Now
        </button>
      </div>
      <div class="absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-black opacity-30 group-hover:opacity-60 transition-opacity duration-500"></div>
    </div>

  </div>
</div>

Luxury_Sepia_SaaS_Cards_Component

A complex, responsive cards component with a luxury/premium design style, sepia/brown color scheme, optimized for Technology/SaaS applications, including dark mode support and interactive elements.

Open Preview

                <div class="font-sans bg-amber-50 text-stone-800 dark:bg-stone-900 dark:text-stone-100 py-16 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto">
    <div class="text-center mb-16">
      <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-stone-900 dark:text-stone-50 mb-6 leading-tight tracking-tight">
        Elevate Your Platform
      </h2>
      <p class="text-lg sm:text-xl text-stone-700 dark:text-stone-300 max-w-3xl mx-auto">
        Discover how our cutting-edge solutions empower businesses to achieve unprecedented efficiency and growth.
      </p>
    </div>

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

      <!-- Card 1: Advanced Analytics -->
      <div class="bg-white dark:bg-stone-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden flex flex-col group">
        <div class="relative w-full h-56 overflow-hidden">
          <img src="https://picsum.photos/id/1015/600/400" alt="Advanced Analytics" class="absolute inset-0 w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500 rounded-t-3xl">
          <div class="absolute inset-0 bg-gradient-to-t from-stone-900/60 to-transparent rounded-t-3xl"></div>
          <div class="absolute bottom-0 left-0 p-6">
            <h3 class="text-white text-3xl font-bold mb-2">Advanced Analytics</h3>
            <span class="text-amber-300 text-sm font-semibold uppercase tracking-wider">Data Intelligence</span>
          </div>
        </div>
        <div class="p-8 flex-grow flex flex-col">
          <p class="text-stone-600 dark:text-stone-300 leading-relaxed mb-6 flex-grow">
            Unlock profound insights with our sophisticated analytics suite. Transform raw data into actionable strategies that drive business growth and optimize performance.
          </p>
          <ul class="space-y-3 mb-6 text-stone-700 dark:text-stone-200">
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" 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>Real-time data processing</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" 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>Predictive modeling tools</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" 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 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Customizable dashboards</li>
          </ul>
          <a href="#" class="mt-auto inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 transition-colors duration-300 self-start">
            Learn More
            <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><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>

      <!-- Card 2: Secure Cloud Infrastructure -->
      <div class="bg-white dark:bg-stone-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden flex flex-col group">
        <div class="relative w-full h-56 overflow-hidden">
          <img src="https://picsum.photos/id/1041/600/400" alt="Secure Cloud Infrastructure" class="absolute inset-0 w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500 rounded-t-3xl">
          <div class="absolute inset-0 bg-gradient-to-t from-stone-900/60 to-transparent rounded-t-3xl"></div>
          <div class="absolute bottom-0 left-0 p-6">
            <h3 class="text-white text-3xl font-bold mb-2">Secure Cloud</h3>
            <span class="text-amber-300 text-sm font-semibold uppercase tracking-wider">Infrastructure</span>
          </div>
        </div>
        <div class="p-8 flex-grow flex flex-col">
          <p class="text-stone-600 dark:text-stone-300 leading-relaxed mb-6 flex-grow">
            Protect your valuable data with our robust and secure cloud infrastructure. Enjoy peace of mind knowing your operations are fortified against modern threats.
          </p>
          <ul class="space-y-3 mb-6 text-stone-700 dark:text-stone-200">
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" 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>End-to-end encryption</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" 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>Compliance certifications</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" 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>24/7 Threat monitoring</li>
          </ul>
          <a href="#" class="mt-auto inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 transition-colors duration-300 self-start">
            Explore Security
            <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><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>

      <!-- Card 3: Seamless Integration -->
      <div class="bg-white dark:bg-stone-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden flex flex-col group">
        <div class="relative w-full h-56 overflow-hidden">
          <img src="https://picsum.photos/id/1043/600/400" alt="Seamless Integration" class="absolute inset-0 w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500 rounded-t-3xl">
          <div class="absolute inset-0 bg-gradient-to-t from-stone-900/60 to-transparent rounded-t-3xl"></div>
          <div class="absolute bottom-0 left-0 p-6">
            <h3 class="text-white text-3xl font-bold mb-2">Seamless Integration</h3>
            <span class="text-amber-300 text-sm font-semibold uppercase tracking-wider">Ecosystem Harmony</span>
          </div>
        </div>
        <div class="p-8 flex-grow flex flex-col">
          <p class="text-stone-600 dark:text-stone-300 leading-relaxed mb-6 flex-grow">
            Connect effortlessly with your existing tools and workflows. Our platform is designed for maximum compatibility, ensuring a smooth transition and enhanced productivity.
          </p>
          <ul class="space-y-3 mb-6 text-stone-700 dark:text-stone-200">
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" 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>API-first architecture</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" 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>Pre-built connectors</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" 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>Developer-friendly documentation</li>
          </ul>
          <a href="#" class="mt-auto inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 transition-colors duration-300 self-start">
            View Integrations
            <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><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 class="mt-16 text-center">
      <h3 class="text-3xl font-semibold text-stone-900 dark:text-stone-50 mb-6">What Our Clients Say</h3>
      <div class="max-w-xl mx-auto bg-white dark:bg-stone-800 rounded-3xl shadow-xl p-8 flex flex-col md:flex-row items-center space-y-6 md:space-y-0 md:space-x-8">
        <div class="flex-shrink-0">
          <img class="h-24 w-24 rounded-full object-cover ring-4 ring-amber-500 dark:ring-amber-400" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Client Avatar">
        </div>
        <div class="text-center md:text-left">
          <p class="text-lg text-stone-700 dark:text-stone-200 mb-4 italic leading-relaxed">
            "This platform has transformed our data analysis process. The insights are incredibly precise, and the ease of integration is unmatched."
          </p>
          <p class="text-stone-900 dark:text-stone-50 font-bold text-xl">Jane Doe</p>
          <p class="text-amber-700 dark:text-amber-400 text-sm font-medium">CEO, Global Innovations</p>
        </div>
      </div>
    </div>

  </div>
</div>

A minimalist and flat design cards component for booking/reservation systems, featuring a gradient rainbow color scheme. It's responsive, includes dark mode support, and uses simple elements for a clean look.

Open Preview

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

    <!-- Card 1: Available Time Slot -->
    <div class="relative overflow-hidden rounded-xl shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-[1.02] dark:border dark:border-gray-700 bg-white dark:bg-gray-800">
      <div class="p-6 space-y-4">
        <div class="flex items-center justify-between">
          <h3 class="text-2xl font-bold dark:text-gray-100">Morning Slot</h3>
          <span class="px-3 py-1 rounded-full text-sm font-semibold bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 text-white shadow-md">Available</span>
        </div>
        <p class="text-gray-600 dark:text-gray-300 text-sm">Wednesday, October 26, 2023</p>
        <p class="text-4xl font-extrabold text-gray-800 dark:text-gray-50">09:00 AM</p>
        <p class="text-gray-500 dark:text-gray-400 text-sm">Duration: 60 minutes</p>
        <button class="w-full py-3 rounded-lg text-white font-semibold transform transition-transform duration-300 active:scale-95
                       bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 hover:from-purple-600 hover:via-pink-600 hover:to-red-600 shadow-lg">
          Book Now
        </button>
      </div>
    </div>

    <!-- Card 2: Fully Booked -->
    <div class="relative overflow-hidden rounded-xl shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-[1.02] dark:border dark:border-gray-700 bg-white dark:bg-gray-800">
      <div class="p-6 space-y-4">
        <div class="flex items-center justify-between">
          <h3 class="text-2xl font-bold dark:text-gray-100">Afternoon Slot</h3>
          <span class="px-3 py-1 rounded-full text-sm font-semibold bg-gradient-to-r from-gray-400 via-gray-500 to-gray-600 text-white shadow-md">Fully Booked</span>
        </div>
        <p class="text-gray-600 dark:text-gray-300 text-sm">Wednesday, October 26, 2023</p>
        <p class="text-4xl font-extrabold text-gray-400 dark:text-gray-600">02:00 PM</p>
        <p class="text-gray-500 dark:text-gray-400 text-sm">Duration: 90 minutes</p>
        <button class="w-full py-3 rounded-lg text-white font-semibold cursor-not-allowed opacity-60
                       bg-gradient-to-r from-gray-400 via-gray-500 to-gray-600 shadow-lg">
          View Details
        </button>
      </div>
    </div>

    <!-- Card 3: Next Day Availability -->
    <div class="relative overflow-hidden rounded-xl shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-[1.02] dark:border dark:border-gray-700 bg-white dark:bg-gray-800">
      <div class="p-6 space-y-4">
        <div class="flex items-center justify-between">
          <h3 class="text-2xl font-bold dark:text-gray-100">Evening Slot</h3>
          <span class="px-3 py-1 rounded-full text-sm font-semibold bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500 text-white shadow-md">Limited</span>
        </div>
        <p class="text-gray-600 dark:text-gray-300 text-sm">Thursday, October 27, 2023</p>
        <p class="text-4xl font-extrabold text-gray-800 dark:text-gray-50">07:30 PM</p>
        <p class="text-gray-500 dark:text-gray-400 text-sm">Duration: 45 minutes</p>
        <button class="w-full py-3 rounded-lg text-white font-semibold transform transition-transform duration-300 active:scale-95
                       bg-gradient-to-r from-teal-500 via-cyan-500 to-blue-500 hover:from-teal-600 hover:via-cyan-600 hover:to-blue-600 shadow-lg">
          Pre-book
        </button>
      </div>
    </div>

  </div>
</div>

RetroReservationCards

A responsive set of retro-themed booking/reservation cards with dark mode support, suitable for appointment or reservation systems. Features include muted vintage colors and a subtle 80s/90s aesthetic.

Open Preview

                <div class="min-h-screen bg-gray-100 p-4 font-sans dark:bg-gray-900 md:p-8">
  <div class="container mx-auto px-4 py-8">
    <h1 class="mb-8 text-center text-4xl font-bold uppercase tracking-wider text-gray-800 dark:text-gray-200 md:text-5xl">
      <span class="block animate-pulse text-red-600 dark:text-red-400">Book Your Slot!</span>
      <span class="block text-2xl normal-case text-gray-600 dark:text-gray-400">Pick Your Perfect Time</span>
    </h1>

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

      <!-- Card 1: Available Slot -->
      <div class="transform rounded-lg border-2 border-orange-400 bg-gradient-to-br from-yellow-200 to-orange-300 p-6 shadow-xl transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl dark:from-gray-700 dark:to-gray-800 dark:border-blue-600">
        <div class="mb-4 flex items-center justify-between">
          <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Morning Session</h2>
          <span class="rounded-full bg-green-500 px-3 py-1 text-sm font-semibold text-white">Available</span>
        </div>
        <p class="mb-4 text-gray-700 dark:text-gray-300">Start your day right with a productive morning slot.</p>
        <div class="mb-4 text-gray-600 dark:text-gray-400">
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Date:</strong> Oct 26, 2023</p>
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Time:</strong> 09:00 AM - 10:30 AM</p>
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Duration:</strong> 90 mins</p>
        </div>
        <div class="mb-4 flex items-center">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Host Avatar" class="mr-3 h-10 w-10 rounded-full border-2 border-purple-500 shadow-md">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-100">Hosted by:</p>
            <p class="text-gray-700 dark:text-gray-300">Alex Johnson</p>
          </div>
        </div>
        <button class="w-full rounded-md bg-purple-600 px-4 py-3 font-bold uppercase text-white shadow-lg transition-colors duration-300 hover:bg-purple-700 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:bg-purple-500 dark:hover:bg-purple-600 dark:focus:ring-purple-700">
          Book Now!
        </button>
      </div>

      <!-- Card 2: Fully Booked Slot -->
      <div class="transform rounded-lg border-2 border-red-500 bg-gradient-to-br from-red-200 to-red-400 p-6 shadow-xl transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl dark:from-gray-700 dark:to-gray-800 dark:border-red-600">
        <div class="mb-4 flex items-center justify-between">
          <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Afternoon Deep Dive</h2>
          <span class="rounded-full bg-red-600 px-3 py-1 text-sm font-semibold text-white">Fully Booked</span>
        </div>
        <p class="mb-4 text-gray-700 dark:text-gray-300">This popular slot is currently at full capacity.</p>
        <div class="mb-4 text-gray-600 dark:text-gray-400">
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Date:</strong> Oct 26, 2023</p>
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Time:</strong> 01:00 PM - 03:00 PM</p>
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Duration:</strong> 120 mins</p>
        </div>
        <div class="mb-4 flex items-center">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Host Avatar" class="mr-3 h-10 w-10 rounded-full border-2 border-purple-500 shadow-md">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-100">Hosted by:</p>
            <p class="text-gray-700 dark:text-gray-300">Maria Gomez</p>
          </div>
        </div>
        <button class="w-full rounded-md bg-gray-500 px-4 py-3 font-bold uppercase text-white shadow-lg cursor-not-allowed dark:bg-gray-600" disabled>
          Sold Out
        </button>
      </div>

      <!-- Card 3: Pending Confirmation Slot -->
      <div class="transform rounded-lg border-2 border-blue-500 bg-gradient-to-br from-blue-200 to-cyan-300 p-6 shadow-xl transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl dark:from-gray-700 dark:to-gray-800 dark:border-green-600">
        <div class="mb-4 flex items-center justify-between">
          <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Evening Chill</h2>
          <span class="rounded-full bg-yellow-500 px-3 py-1 text-sm font-semibold text-white">Pending</span>
        </div>
        <p class="mb-4 text-gray-700 dark:text-gray-300">Awaiting confirmation for this twilight session.</p>
        <div class="mb-4 text-gray-600 dark:text-gray-400">
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Date:</strong> Oct 27, 2023</p>
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Time:</strong> 06:00 PM - 07:00 PM</p>
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Duration:</strong> 60 mins</p>
        </div>
        <div class="mb-4 flex items-center">
          <img src="https://randomuser.me/api/portraits/men/19.jpg" alt="Host Avatar" class="mr-3 h-10 w-10 rounded-full border-2 border-purple-500 shadow-md">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-100">Hosted by:</p>
            <p class="text-gray-700 dark:text-gray-300">David Lee</p>
          </div>
        </div>
        <button class="w-full rounded-md bg-gray-400 px-4 py-3 font-bold uppercase text-white shadow-lg cursor-not-allowed dark:bg-gray-500" disabled>
          Awaiting Conf.
        </button>
      </div>

      <!-- Card 4: Special Event Slot -->
      <div class="transform rounded-lg border-2 border-purple-500 bg-gradient-to-br from-purple-200 to-pink-300 p-6 shadow-xl transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl dark:from-gray-700 dark:to-gray-800 dark:border-orange-600">
        <div class="mb-4 flex items-center justify-between">
          <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Exclusive Workshop</h2>
          <span class="rounded-full bg-blue-600 px-3 py-1 text-sm font-semibold text-white">Special</span>
        </div>
        <p class="mb-4 text-gray-700 dark:text-gray-300">A unique opportunity! Limited spots available.</p>
        <div class="mb-4 text-gray-600 dark:text-gray-400">
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Date:</strong> Oct 28, 2023</p>
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Time:</strong> 10:00 AM - 01:00 PM</p>
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Duration:</strong> 180 mins</p>
        </div>
        <div class="mb-4 flex items-center">
          <img src="https://randomuser.me/api/portraits/women/7.jpg" alt="Host Avatar" class="mr-3 h-10 w-10 rounded-full border-2 border-purple-500 shadow-md">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-100">Hosted by:</p>
            <p class="text-gray-700 dark:text-gray-300">Sophia Kim</p>
          </div>
        </div>
        <button class="w-full rounded-md bg-cyan-600 px-4 py-3 font-bold uppercase text-white shadow-lg transition-colors duration-300 hover:bg-cyan-700 focus:outline-none focus:ring-4 focus:ring-cyan-300 dark:bg-cyan-500 dark:hover:bg-cyan-600 dark:focus:ring-cyan-700">
          Register Now!
        </button>
      </div>

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

Cards Component

A simple, clean, and trustworthy card component suitable for corporate/professional business environments, specifically designed for cryptocurrency and blockchain applications. It features a complementary color scheme, responsive design, and dark mode support.

Open Preview

                <div class="bg-neutral-100 dark:bg-neutral-900 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto">
    <div class="text-center mb-12">
      <h2 class="text-3xl font-extrabold text-neutral-900 dark:text-neutral-100 sm:text-4xl">
        Explore Our Blockchain Solutions
      </h2>
      <p class="mt-4 text-lg text-neutral-600 dark:text-neutral-400">
        Industry-leading technology and secure platforms for your digital assets.
      </p>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Card 1: Secure Wallets -->
      <div class="bg-white dark:bg-neutral-800 rounded-lg shadow-xl overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-2xl md:hover:shadow-3xl">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/400/250?random=1" alt="Secure Wallets">
        <div class="p-6">
          <h3 class="text-xl font-semibold text-neutral-900 dark:text-neutral-100 mb-2">Secure Wallets</h3>
          <p class="text-neutral-600 dark:text-neutral-400 text-sm mb-4">
            Protect your cryptocurrencies with our high-security, multi-signature wallets.
          </p>
          <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-400">
            Learn More
            <svg class="ml-2 -mr-1 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
            </svg>
          </a>
        </div>
      </div>

      <!-- Card 2: Decentralized Exchange -->
      <div class="bg-white dark:bg-neutral-800 rounded-lg shadow-xl overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-2xl md:hover:shadow-3xl">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/400/250?random=2" alt="Decentralized Exchange">
        <div class="p-6">
          <h3 class="text-xl font-semibold text-neutral-900 dark:text-neutral-100 mb-2">Decentralized Exchange</h3>
          <p class="text-neutral-600 dark:text-neutral-400 text-sm mb-4">
            Trade digital assets directly with other users, ensuring transparency and control.
          </p>
          <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-400">
            Explore DEX
            <svg class="ml-2 -mr-1 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
            </svg>
          </a>
        </div>
      </div>

      <!-- Card 3: Blockchain Analytics -->
      <div class="bg-white dark:bg-neutral-800 rounded-lg shadow-xl overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-2xl md:hover:shadow-3xl">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/400/250?random=3" alt="Blockchain Analytics">
        <div class="p-6">
          <h3 class="text-xl font-semibold text-neutral-900 dark:text-neutral-100 mb-2">Blockchain Analytics</h3>
          <p class="text-neutral-600 dark:text-neutral-400 text-sm mb-4">
            Gain insights into market trends and transaction data with our advanced analytics tools.
          </p>
          <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-400">
            View Data
            <svg class="ml-2 -mr-1 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

Luxury_Portfolio_Cards_Ocean_Blue

A complex, luxury/premium portfolio cards component designed with ocean/blue tones for showcasing work or products. Features responsive design, sophisticated typography, elegant visuals, and full dark mode support.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-950 dark:to-blue-900 py-12 px-4 sm:px-6 lg:px-8 font-serif text-gray-800 dark:text-gray-200">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center mb-6 drop-shadow-lg text-blue-900 dark:text-blue-200 leading-tight">
      Our Exquisite Creations
    </h2>
    <p class="text-xl sm:text-2xl text-center mb-16 max-w-3xl mx-auto dark:text-gray-300">
      Dive into a curated collection of our most distinguished projects, crafted with precision and an unwavering pursuit of perfection.
    </p>

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

      <!-- Card 1 -->
      <div class="group relative overflow-hidden rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 ease-in-out transform hover:-translate-y-2 bg-white dark:bg-gray-800 border border-blue-200 dark:border-blue-700 ">
        <img class="w-full h-64 object-cover object-center transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1018/600/400" alt="Project Image">
        <div class="p-6 flex flex-col justify-between">
          <div>
            <h3 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-300 tracking-wide">Azure Sky Residency</h3>
            <p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">A beacon of modern architecture, featuring bespoke interiors and breathtaking panoramic views.</p>
          </div>
          <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 pt-4 border-t border-blue-100 dark:border-gray-700">
            <div class="flex items-center space-x-2">
              <img class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Designer Avatar">
              <span>Anya Sharma</span>
            </div>
            <span class="text-blue-600 dark:text-blue-400 font-semibold">Architecture</span>
          </div>
          <a href="#" class="mt-6 block text-center bg-gradient-to-r from-blue-600 to-blue-800 text-white py-3 px-6 rounded-lg text-lg font-semibold hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 ease-in-out group-hover:scale-105">
            View Project
          </a>
        </div>
      </div>

      <!-- Card 2 -->
      <div class="group relative overflow-hidden rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 ease-in-out transform hover:-translate-y-2 bg-white dark:bg-gray-800 border border-blue-200 dark:border-blue-700">
        <img class="w-full h-64 object-cover object-center transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1042/600/400" alt="Project Image">
        <div class="p-6 flex flex-col justify-between">
          <div>
            <h3 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-300 tracking-wide">Symphony of the Seas</h3>
            <p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">An opulent yacht interior design, blending classic elegance with cutting-edge marine technology.</p>
          </div>
          <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 pt-4 border-t border-blue-100 dark:border-gray-700">
            <div class="flex items-center space-x-2">
              <img class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Designer Avatar">
              <span>Julian Thorne</span>
            </div>
            <span class="text-blue-600 dark:text-blue-400 font-semibold">Interior Design</span>
          </div>
          <a href="#" class="mt-6 block text-center bg-gradient-to-r from-blue-600 to-blue-800 text-white py-3 px-6 rounded-lg text-lg font-semibold hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 ease-in-out group-hover:scale-105">
            Explore Details
          </a>
        </div>
      </div>

      <!-- Card 3 -->
      <div class="group relative overflow-hidden rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 ease-in-out transform hover:-translate-y-2 bg-white dark:bg-gray-800 border border-blue-200 dark:border-blue-700">
        <img class="w-full h-64 object-cover object-center transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1044/600/400" alt="Project Image">
        <div class="p-6 flex flex-col justify-between">
          <div>
            <h3 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-300 tracking-wide">Elysian Gardens Revitalization</h3>
            <p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">A transformative landscape design, harmonizing natural beauty with sustainable urban living.</p>
          </div>
          <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 pt-4 border-t border-blue-100 dark:border-gray-700">
            <div class="flex items-center space-x-2">
              <img class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/9.jpg" alt="Designer Avatar">
              <span>Lena Petrov</span>
            </div>
            <span class="text-blue-600 dark:text-blue-400 font-semibold">Landscape</span>
          </div>
          <a href="#" class="mt-6 block text-center bg-gradient-to-r from-blue-600 to-blue-800 text-white py-3 px-6 rounded-lg text-lg font-semibold hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 ease-in-out group-hover:scale-105">
            See Portfolio
          </a>
        </div>
      </div>

      <!-- Card 4 (Placeholder - could be dynamic) -->
      <div class="group relative overflow-hidden rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 ease-in-out transform hover:-translate-y-2 bg-white dark:bg-gray-800 border border-blue-200 dark:border-blue-700">
        <img class="w-full h-64 object-cover object-center transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/10/600/400" alt="Project Image">
        <div class="p-6 flex flex-col justify-between">
          <div>
            <h3 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-300 tracking-wide">Oceanic Brand Identity</h3>
            <p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">Crafting a distinctive visual language for a luxury coastal resort brand.</p>
          </div>
          <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 pt-4 border-t border-blue-100 dark:border-gray-700">
            <div class="flex items-center space-x-2">
              <img class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/women/71.jpg" alt="Designer Avatar">
              <span>Marcus Finn</span>
            </div>
            <span class="text-blue-600 dark:text-blue-400 font-semibold">Branding</span>
          </div>
          <a href="#" class="mt-6 block text-center bg-gradient-to-r from-blue-600 to-blue-800 text-white py-3 px-6 rounded-lg text-lg font-semibold hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 ease-in-out group-hover:scale-105">
            Discover More
          </a>
        </div>
      </div>

      <!-- Card 5 (Placeholder) -->
      <div class="group relative overflow-hidden rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 ease-in-out transform hover:-translate-y-2 bg-white dark:bg-gray-800 border border-blue-200 dark:border-blue-700">
        <img class="w-full h-64 object-cover object-center transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1025/600/400" alt="Project Image">
        <div class="p-6 flex flex-col justify-between">
          <div>
            <h3 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-300 tracking-wide">Digital Horizon App</h3>
            <p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">An intuitive and visually stunning mobile application designed for premium travel experiences.</p>
          </div>
          <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 pt-4 border-t border-blue-100 dark:border-gray-700">
            <div class="flex items-center space-x-2">
              <img class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/78.jpg" alt="Designer Avatar">
              <span>Chloe Rivers</span>
            </div>
            <span class="text-blue-600 dark:text-blue-400 font-semibold">UI/UX Design</span>
          </div>
          <a href="#" class="mt-6 block text-center bg-gradient-to-r from-blue-600 to-blue-800 text-white py-3 px-6 rounded-lg text-lg font-semibold hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 ease-in-out group-hover:scale-105">
            View Case Study
          </a>
        </div>
      </div>

      <!-- Card 6 (Placeholder) -->
      <div class="group relative overflow-hidden rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 ease-in-out transform hover:-translate-y-2 bg-white dark:bg-gray-800 border border-blue-200 dark:border-blue-700">
        <img class="w-full h-64 object-cover object-center transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1049/600/400" alt="Project Image">
        <div class="p-6 flex flex-col justify-between">
          <div>
            <h3 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-300 tracking-wide">Timeless Sculpture Series</h3>
            <p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">A collection of bespoke artistic sculptures, blending classical forms with contemporary abstract elements.</p>
          </div>
          <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 pt-4 border-t border-blue-100 dark:border-gray-700">
            <div class="flex items-center space-x-2">
              <img class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Designer Avatar">
              <span>David Hayes</span>
            </div>
            <span class="text-blue-600 dark:text-blue-400 font-semibold">Art & Craft</span>
          </div>
          <a href="#" class="mt-6 block text-center bg-gradient-to-r from-blue-600 to-blue-800 text-white py-3 px-6 rounded-lg text-lg font-semibold hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 ease-in-out group-hover:scale-105">
            Discover Collection
          </a>
        </div>
      </div>

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

Search Components

Categories

Cards