Search Components

All Components

Browse all available Tailwind CSS components

Skeuomorphic_Auth_CRM_Component

A complex, responsive authentication component for CRM/Business Tools, featuring a skeuomorphic design style with cool neutral colors and dark mode support.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center p-4 sm:p-6 lg:p-8 font-sans transition-colors duration-300">
  <div class="relative w-full max-w-md bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-800 rounded-3xl shadow-xl border border-gray-200 dark:border-gray-700 p-8 sm:p-10 lg:p-12 transform perspective-1000 rotateX-5 overflow-hidden transition-all duration-500
      before:content-[''] before:absolute before:inset-0 before:rounded-3xl before:bg-gradient-to-br before:from-gray-100 before:via-gray-50 before:to-transparent before:opacity-20 before:pointer-events-none before:z-0
      dark:before:from-gray-900 dark:before:via-gray-800 dark:before:to-transparent dark:before:opacity-30">

    <!-- Top Skeuomorphic Element -->
    <div class="absolute -top-6 -left-6 w-24 h-24 bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 rounded-full shadow-lg opacity-40 blur-sm"></div>
    <div class="absolute -bottom-6 -right-6 w-20 h-20 bg-gradient-to-tl from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 rounded-full shadow-lg opacity-40 blur-sm"></div>

    <div class="relative z-10">
      <div class="text-center mb-8">
        <svg class="mx-auto h-16 w-16 text-blue-600 dark:text-blue-400 drop-shadow-md brightness-150" 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="1.5" d="M9.75 17L9.22 17.53C8.618 18.132 8.618 19.102 9.22 19.704L14.77 25.254C15.372 25.856 16.342 25.856 16.944 25.254L22.494 19.704C23.096 19.102 23.096 18.132 22.494 17.53L21.964 17M15 15.75V9.75L15 6L18 3L21 6V9.75M9 15.75V9.75M3 15.75V9.75M12 15.75V9.75M6 15.75V9.75M12 6H15M6 6H9M18 9.75H21M3 9.75H6M9 9.75H12

Image Lightbox Component

A complex, responsive image lightbox component with a 'paper/print-inspired' design, jewel-tone color scheme, and dark mode support, suitable for music/audio platforms. It features rich interactive elements.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 font-sans">

  <!-- Lightbox Container - Hidden by default, shown by JavaScript -->
  <!-- For this pure HTML/Tailwind example, we've structured it as if it were always visible -->
  <!-- In a real app, you'd toggle 'hidden' and 'opacity-0' classes with JS -->
  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75 dark:bg-opacity-90 transition-opacity duration-300" x-data="{ open: true }" x-show="open">
    <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-2xl p-6 md:p-8 max-w-5xl w-full mx-4 sm:mx-6 lg:mx-8 transform transition-transform duration-300 scale-95 opacity-0" x-intersect:enter="$el.classList.remove('scale-95', 'opacity-0')" x-intersect:leave="$el.classList.add('scale-95', 'opacity-0')">
      <!-- Close Button -->
      <button class="absolute top-3 right-3 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-200 focus:outline-none" aria-label="Close Lightbox" @click="open = false">
        <svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8 lg:gap-10">
        <!-- Image Section -->
        <div class="relative flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden shadow-inner">
          <img src="https://picsum.photos/1200/800?random=1" alt="Album Cover Art" class="max-h-[70vh] w-full object-contain rounded-md shadow-md hover:scale-105 transition-transform duration-300">
          <!-- Navigation Arrows (example, would be interactive with JS) -->
          <button class="absolute left-2 top-1/2 -translate-y-1/2 bg-black bg-opacity-40 hover:bg-opacity-60 text-white rounded-full p-2 focus:outline-none transition-colors duration-200" aria-label="Previous Image">
            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
            </svg>
          </button>
          <button class="absolute right-2 top-1/2 -translate-y-1/2 bg-black bg-opacity-40 hover:bg-opacity-60 text-white rounded-full p-2 focus:outline-none transition-colors duration-200" aria-label="Next Image">
            <svg class="w-6 h-6" 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>
          </button>
        </div>

        <!-- Details Section -->
        <div class="flex flex-col justify-between text-gray-800 dark:text-gray-200">
          <div>
            <h2 class="text-3xl md:text-4xl font-extrabold mb-2 dark:text-white capitalize leading-tight" style="color: #0077B6;">Eternal Echoes</h2>
            <p class="text-lg md:text-xl font-semibold mb-4 dark:text-gray-300" style="color: #00B1A7;">Artist Name</p>

            <div class="bg-blue-50 dark:bg-gray-700/50 p-4 rounded-lg shadow-inner mb-6 border border-blue-100 dark:border-gray-600/50">
              <h3 class="text-xl font-bold mb-3 dark:text-white flex items-center" style="color: #0077B6;">
                <svg class="w-5 h-5 mr-2 text-blue-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10l2-2H4zm14 0l-2 2h-6l2-2h8zm0 6H4v2h14v-2z" clip-rule="evenodd"></path></svg>
                Album Details
              </h3>
              <ul class="text-sm md:text-base leading-relaxed">
                <li class="mb-1"><span class="font-medium dark:text-gray-300">Release Date:</span> <span class="dark:text-gray-400">October 26, 2023</span></li>
                <li class="mb-1"><span class="font-medium dark:text-gray-300">Genre:</span> <span class="dark:text-gray-400">Melodic Trance, Ambient</span></li>
                <li class="mb-1"><span class="font-medium dark:text-gray-300">Duration:</span> <span class="dark:text-gray-400">48:32</span></li>
                <li class="mb-1"><span class="font-medium dark:text-gray-300">Tracks:</span> <span class="dark:text-gray-400">12</span></li>
                <li class="mb-1"><span class="font-medium dark:text-gray-300">Label:</span> <span class="dark:text-gray-400">Harmonic Records</span></li>
              </ul>
            </div>

            <p class="text-sm md:text-base leading-relaxed mb-6 dark:text-gray-300" style="color: #333;">
              "Eternal Echoes" is a transcendent journey through soundscapes, blending intricate synthesizers with ethereal vocals. Each track is meticulously crafted, inviting the listener into a world of deep emotion and vibrant sonic textures.
            </p>

            <!-- Call to Actions -->
            <div class="flex flex-col sm:flex-row gap-4 mb-4">
              <button class="flex-1 inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 dark:bg-emerald-600 dark:hover:bg-emerald-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-emerald-500 shadow-md transform hover:scale-105 active:scale-95">
                <svg class="-ml-1 mr-2 h-5 w-5" 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 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
                Play Album
              </button>
              <button class="flex-1 inline-flex items-center justify-center px-6 py-3 border border-blue-600 dark:border-emerald-600 text-base font-medium rounded-md text-blue-600 dark:text-emerald-600 bg-white hover:bg-blue-50 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-emerald-500 shadow-md transform hover:scale-105 active:scale-95">
                <svg class="-ml-1 mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" /><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm0-2a6 6 0 100-12 6 6 0 000 12z" clip-rule="evenodd"></path></svg>
                Add to Playlist
              </button>
            </div>

            <!-- Social Share/Download Buttons -->
            <div class="flex flex-wrap gap-2 text-sm text-gray-600 dark:text-gray-400">
              <button class="flex items-center px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-full hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-1 focus:ring-gray-400" aria-label="Share on Twitter">
                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.251c1.329 0 2.6-.394 3.705-1.127l.1-.06c.038-.025.074-.05.11-.077c.36-.264.717-.551 1.056-.864s.642-.647.962-1.077c.606-.826 1.074-1.748 1.404-2.753a9.988 9.988 0 00.46-3.078c-.29-.028-.58-.04-.871-.04h-.002a9.988 9.988 0 00-3.14-.528c-1.393-.11-2.775-.02-4.103.26a9.988 9.988 0 00-2.887 1.079c-.06.027-.119.052-.178.077-.32.13-.63.266-.928.406-.296.14-.576.284-.836.435-.55.32-.98.66-1.295 1.018-.314.357-.597.74-.83 1.15-.386.67-.655 1.39-.798 2.152-.137.76-.14 1.54-.012 2.306.096.654.26 1.28.49 1.87.234.59.508 1.16.828 1.7L4.76 21.05c.877-1.18 1.944-2.188 3.167-3.02C8.75 17 9 17.02 9 17.02l-.21.002zM15.545 2.378l.006.004c.002-.008.004-.017.006-.025s.005-.015.007-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022l.006.004c.002-.008.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022c.002-.007.004-.015.006-.022s.004-.015.006-.022l.006.004a.2.2 0 00.28-.277c-.004-.008-.008-.015-.012-.022a.2.2 0 00-.28-.277A9.988 9.988 0 0015.545 2.378zM17 1H7c-.552 0-1 .448-1 1s.448 1 1 1h10c.552 0 1-.448 1-1s-.448-1-1-1z"/></svg>
                Share
              </button>
              <button class="flex items-center px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-full hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-1 focus:ring-gray-400" aria-label="Download Album">
                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
                Download
              </button>
              <button class="flex items-center px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-full hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-1 focus:ring-gray-400" aria-label="Add to Favorites">
                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.657l1.172-1.172a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
                Favorite
              </button>
            </div>

          </div>

          <!-- Artist Avatar & Name -->
          <div class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700 flex items-center">
            <img src="https://randomuser.me/api/portraits/men/52.jpg" alt="Artist Avatar" class="w-12 h-12 rounded-full mr-4 border-2 border-orange-400 dark:border-purple-600 shadow-md">
            <div>
              <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Created by</p>
              <p class="text-lg font-bold dark:text-white" style="color: #A020F0;">Alex "Sonic" Turner</p>
            </div>
          </div>

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

<!-- Alpine.js is used for demonstration of interactivity. In a pure HTML example, this would be handled by a full JS framework. -->
<!-- Include Alpine.js for x-data, x-show, x-intersect:enter, x-intersect:leave, @click functionality -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

Brutalism_Rainbow_Medical_Comments_Section

A complex, brutalist-inspired comments section component for healthcare/medical applications, featuring a vibrant rainbow gradient color scheme and full responsiveness with dark mode support.

Open Preview

                <section class="p-4 sm:p-8 md:p-12 min-h-screen bg-neutral-50 dark:bg-neutral-900 font-mono text-neutral-900 dark:text-neutral-50">

  <!-- Brutalist Rainbow Gradient Header -->
  <div class="mb-8 md:mb-12 border-4 border-neutral-900 dark:border-neutral-50 p-4 sm:p-6 md:p-8 
              bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 
              dark:from-red-700 dark:via-yellow-700 dark:to-green-700 
              shadow-[8px_8px_0_0_rgba(0,0,0,1)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,1)] 
              relative overflow-hidden group">
    <h1 class="text-2xl sm:text-3xl md:text-5xl lg:text-6xl font-extrabold tracking-tighter uppercase relative z-10 text-neutral-900 dark:text-neutral-50">
      Patient Feedback Terminal
    </h1>
    <p class="text-sm sm:text-md md:text-lg mt-2 relative z-10 text-neutral-900 dark:text-neutral-50">
      Comments Interface // Unauthorized Access Will Be Logged
    </p>
    <!-- Glitch Effect -->
    <div class="absolute inset-0 bg-gradient-to-l from-blue-500 via-indigo-500 to-purple-500 dark:from-blue-700 dark:via-indigo-700 dark:to-purple-700 mix-blend-multiply opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
  </div>

  <!-- New Comment Submission Area -->
  <div class="mb-10 p-6 sm:p-8 border-4 border-neutral-900 dark:border-neutral-50 
              bg-neutral-200 dark:bg-neutral-800 
              shadow-[6px_6px_0_0_rgba(0,0,0,1)] dark:shadow-[6px_6px_0_0_rgba(255,255,255,1)]">
    <h2 class="text-xl sm:text-2xl font-bold mb-4 uppercase">Transmit New Datum</h2>
    <form>
      <div class="mb-4">
        <label for="comment-author" class="block text-sm font-bold mb-2">ATTENDEE ID:</label>
        <input type="text" id="comment-author" placeholder="[ANONYMOUS]" class="w-full p-3 border-2 border-neutral-900 dark:border-neutral-50 bg-neutral-100 dark:bg-neutral-900 text-neutral-900 dark:text-neutral-50 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400">
      </div>
      <div class="mb-4">
        <label for="comment-text" class="block text-sm font-bold mb-2">OBSERVATION LOG:</label>
        <textarea id="comment-text" rows="5" placeholder="State your findings..." class="w-full p-3 border-2 border-neutral-900 dark:border-neutral-50 bg-neutral-100 dark:bg-neutral-900 text-neutral-900 dark:text-neutral-50 focus:outline-none focus:ring-2 focus:ring-lime-500 dark:focus:ring-lime-400"></textarea>
      </div>
      <div class="flex flex-wrap gap-4 justify-between items-center">
        <button type="submit" class="px-6 py-3 
              bg-gradient-to-r from-purple-500 to-indigo-500 
              dark:from-purple-700 dark:to-indigo-700 
              text-neutral-50 dark:text-neutral-900 
              font-bold uppercase text-lg 
              border-2 border-neutral-900 dark:border-neutral-50 
              shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,1)] 
              hover:shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:hover:shadow-[2px_2px_0_0_rgba(255,255,255,1)] 
              transition-all duration-150 relative group overflow-hidden">
          <span class="relative z-10">INITIATE TRANSMISSION</span>
          <div class="absolute inset-0 bg-gradient-to-r from-red-500 to-orange-500 dark:from-red-600 dark:to-orange-600 mix-blend-overlay opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        </button>
        <div class="flex items-center space-x-2">
          <input type="checkbox" id="anonymous" class="h-5 w-5 border-2 border-neutral-900 dark:border-neutral-50 accent-red-500 dark:accent-red-700">
          <label for="anonymous" class="text-sm font-bold">DESIGNATE ANONYMOUS</label>
        </div>
      </div>
    </form>
  </div>

  <!-- Comments List -->
  <div class="grid gap-8">

    <!-- Comment 1 -->
    <article class="p-6 sm:p-8 
                    border-4 border-neutral-900 dark:border-neutral-50 
                    bg-gradient-to-br from-cyan-200 to-blue-300 opacity-90 
                    dark:from-cyan-800 dark:to-blue-900 dark:opacity-90 
                    shadow-[5px_5px_0_0_rgba(0,0,0,1)] dark:shadow-[5px_5px_0_0_rgba(255,255,255,1)] 
                    relative overflow-hidden group">
      <div class="absolute top-0 right-0 p-2 text-xs font-bold bg-neutral-900 dark:bg-neutral-50 text-neutral-50 dark:text-neutral-900 border-l-2 border-b-2 border-neutral-50 dark:border-neutral-900 shadow-[-2px_2px_0_0_rgba(0,0,0,0.5)] dark:shadow-[-2px_2px_0_0_rgba(255,255,255,0.5)]">STATUS: VERIFIED</div>
      
      <div class="flex items-start mb-4 relative z-10">
        <img src="https://randomuser.me/api/portraits/men/72.jpg" alt="User Avatar" class="w-16 h-16 sm:w-20 sm:h-20 border-4 border-neutral-900 dark:border-neutral-50 object-cover flex-shrink-0 mr-4 shadow-lg">
        <div>
          <p class="font-extrabold text-lg sm:text-xl uppercase tracking-tight">Dr. Alex "The Blade" Mercer</p>
          <time datetime="2023-10-27T10:30:00Z" class="text-sm text-neutral-700 dark:text-neutral-300 italic">LOG TIMESTAMP: 2023-10-27 10:30 ZULU</time>
          <div class="flex mt-2">
            <span class="inline-block bg-pink-500 text-neutral-50 text-xs font-bold px-2 py-1 border border-neutral-900 dark:border-neutral-50">SURGEON</span>
            <span class="inline-block bg-teal-500 text-neutral-50 text-xs font-bold px-2 py-1 ml-2 border border-neutral-900 dark:border-neutral-50">CLASSIFIED</span>
          </div>
        </div>
      </div>
      <p class="mb-4 text-md sm:text-lg leading-relaxed relative z-10">
        <strong class="uppercase text-red-700 dark:text-red-300">CRITICAL ALERT:</strong> Patient vitals stabilized post-procedure, but anomalous neurological readings persist. Recommending immediate Level IV diagnostic protocol. Data logs attached to secure server. Do not disregard this warning.
      </p>
      <div class="flex flex-wrap gap-2 text-xs font-bold relative z-10">
        <button class="px-3 py-1 bg-gradient-to-r from-red-500 to-orange-500 dark:from-red-700 dark:to-orange-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">AGREE [001]</button>
        <button class="px-3 py-1 bg-gradient-to-r from-green-500 to-lime-500 dark:from-green-700 dark:to-lime-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">DISAGREE [000]</button>
        <button class="px-3 py-1 bg-gradient-to-r from-blue-500 to-purple-500 dark:from-blue-700 dark:to-purple-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">REPORT [ERROR]</button>
      </div>
      <!-- Overlay Glitch -->
      <div class="absolute inset-0 bg-gradient-to-br from-yellow-500 to-orange-500 mix-blend-overlay opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    </article>

    <!-- Comment 2 -->
    <article class="p-6 sm:p-8 
                    border-4 border-neutral-900 dark:border-neutral-50 
                    bg-gradient-to-bl from-amber-200 to-red-300 opacity-90 
                    dark:from-amber-800 dark:to-red-900 dark:opacity-90 
                    shadow-[5px_5px_0_0_rgba(0,0,0,1)] dark:shadow-[5px_5px_0_0_rgba(255,255,255,1)] 
                    relative overflow-hidden group">
      <div class="absolute top-0 right-0 p-2 text-xs font-bold bg-neutral-900 dark:bg-neutral-50 text-neutral-50 dark:text-neutral-900 border-l-2 border-b-2 border-neutral-50 dark:border-neutral-900 shadow-[-2px_2px_0_0_rgba(0,0,0,0.5)] dark:shadow-[-2px_2px_0_0_rgba(255,255,255,0.5)]">STATUS: PENDING</div>

      <div class="flex items-start mb-4 relative z-10">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-16 h-16 sm:w-20 sm:h-20 border-4 border-neutral-900 dark:border-neutral-50 object-cover flex-shrink-0 mr-4 shadow-lg">
        <div>
          <p class="font-extrabold text-lg sm:text-xl uppercase tracking-tight">P.N. "Ghost" Protocol</p>
          <time datetime="2023-10-27T10:45:00Z" class="text-sm text-neutral-700 dark:text-neutral-300 italic">LOG TIMESTAMP: 2023-10-27 10:45 ZULU</time>
          <div class="flex mt-2">
            <span class="inline-block bg-indigo-500 text-neutral-50 text-xs font-bold px-2 py-1 border border-neutral-900 dark:border-neutral-50">NURSE</span>
            <span class="inline-block bg-teal-500 text-neutral-50 text-xs font-bold px-2 py-1 ml-2 border border-neutral-900 dark:border-neutral-50">OBSERVER</span>
          </div>
        </div>
      </div>
      <p class="mb-4 text-md sm:text-lg leading-relaxed relative z-10">
        The patient requested an additional blanket and a glass of water at 09:30. No fever detected. Sleep patterns irregular, per monitor. Overall, stable condition, but seems a bit restless. Waiting for Dr. Mercer's follow-up.
      </p>
      <div class="flex flex-wrap gap-2 text-xs font-bold relative z-10">
        <button class="px-3 py-1 bg-gradient-to-r from-red-500 to-orange-500 dark:from-red-700 dark:to-orange-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">AGREE [001]</button>
        <button class="px-3 py-1 bg-gradient-to-r from-green-500 to-lime-500 dark:from-green-700 dark:to-lime-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">DISAGREE [000]</button>
        <button class="px-3 py-1 bg-gradient-to-r from-blue-500 to-purple-500 dark:from-blue-700 dark:to-purple-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">REPORT [ERROR]</button>
      </div>
      <!-- Overlay Glitch -->
      <div class="absolute inset-0 bg-gradient-to-bl from-green-500 to-blue-500 mix-blend-overlay opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    </article>

    <!-- Comment 3 (Anonymous) -->
    <article class="p-6 sm:p-8 
                    border-4 border-neutral-900 dark:border-neutral-50 
                    bg-gradient-to-tr from-green-200 to-lime-300 opacity-90 
                    dark:from-green-800 dark:to-lime-900 dark:opacity-90 
                    shadow-[5px_5px_0_0_rgba(0,0,0,1)] dark:shadow-[5px_5px_0_0_rgba(255,255,255,1)] 
                    relative overflow-hidden group">
      <div class="absolute top-0 right-0 p-2 text-xs font-bold bg-neutral-900 dark:bg-neutral-50 text-neutral-50 dark:text-neutral-900 border-l-2 border-b-2 border-neutral-50 dark:border-neutral-900 shadow-[-2px_2px_0_0_rgba(0,0,0,0.5)] dark:shadow-[-2px_2px_0_0_rgba(255,255,255,0.5)]">STATUS: ANONYMOUS</div>

      <div class="flex items-start mb-4 relative z-10">
        <img src="https://picsum.photos/id/66/100/100" alt="Placeholder Avatar" class="w-16 h-16 sm:w-20 sm:h-20 border-4 border-neutral-900 dark:border-neutral-50 object-cover flex-shrink-0 mr-4 filter grayscale hue-rotate-180 brightness-50 dark:brightness-150 shadow-lg">
        <div>
          <p class="font-extrabold text-lg sm:text-xl uppercase tracking-tight">[DATA CORRUPTED / ANONYMOUS]</p>
          <time datetime="2023-10-27T10:55:00Z" class="text-sm text-neutral-700 dark:text-neutral-300 italic">LOG TIMESTAMP: 2023-10-27 10:55 ZULU</time>
          <div class="flex mt-2">
            <span class="inline-block bg-purple-500 text-neutral-50 text-xs font-bold px-2 py-1 border border-neutral-900 dark:border-neutral-50">GUEST</span>
            <span class="inline-block bg-teal-500 text-neutral-50 text-xs font-bold px-2 py-1 ml-2 border border-neutral-900 dark:border-neutral-50">UNIDENTIFIED</span>
          </div>
        </div>
      </div>
      <p class="mb-4 text-md sm:text-lg leading-relaxed relative z-10">
        The ventilation system in Sector Gamma-7 is emitting a low-frequency hum. It's disruptive. Also, why are the lights flickering in the containment unit? Investigation recommended before structural integrity is compromised. This is not a drill.
      </p>
      <div class="flex flex-wrap gap-2 text-xs font-bold relative z-10">
        <button class="px-3 py-1 bg-gradient-to-r from-red-500 to-orange-500 dark:from-red-700 dark:to-orange-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">AGREE [001]</button>
        <button class="px-3 py-1 bg-gradient-to-r from-green-500 to-lime-500 dark:from-green-700 dark:to-lime-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">DISAGREE [000]</button>
        <button class="px-3 py-1 bg-gradient-to-r from-blue-500 to-purple-500 dark:from-blue-700 dark:to-purple-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">REPORT [ERROR]</button>
      </div>
      <!-- Overlay Glitch -->
      <div class="absolute inset-0 bg-gradient-to-tr from-cyan-500 to-fuchsia-500 mix-blend-overlay opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    </article>

  </div>

  <!-- Brutalist Footer -->
  <div class="mt-12 md:mt-16 p-4 sm:p-6 md:p-8 border-4 border-neutral-900 dark:border-neutral-50 
              bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 
              dark:from-red-700 dark:via-yellow-700 dark:to-green-700 
              shadow-[8px_8px_0_0_rgba(0,0,0,1)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,1)] 
              relative overflow-hidden group">
    <p class="text-sm sm:text-base md:text-lg font-bold text-neutral-900 dark:text-neutral-50 relative z-10 text-center uppercase">
      // END OF LOG. SYSTEM INTEGRITY: COMPROMISED //
    </p>
    <div class="absolute inset-0 bg-gradient-to-l from-orange-500 via-pink-500 to-purple-500 dark:from-orange-700 dark:via-pink-700 dark:to-purple-700 mix-blend-multiply opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
  </div>

</section>

RetroVibrantCryptoAuth

A complex, retro-inspired login/signup component with vibrant colors, designed for cryptocurrency/blockchain applications, featuring responsive layout and dark mode support.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-purple-800 via-pink-600 to-red-500 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 p-4 sm:p-8 flex items-center justify-center font-mono">
  <div class="w-full max-w-md bg-gradient-to-br from-purple-200 via-pink-100 to-red-100 dark:bg-gradient-to-br dark:from-gray-700 dark:via-gray-800 dark:to-gray-900 rounded-3xl shadow-2xl overflow-hidden transform duration-500 hover:scale-105 border-4 border-purple-400 dark:border-gray-600 relative group">
    <!-- Old TV Scanline Overlay -->
    <div class="absolute inset-0 z-10 pointer-events-none opacity-10 group-hover:opacity-20 transition-opacity duration-300" style="background-image: linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px); background-size: 2px 2px;"></div>

    <!-- Top Retro Banner -->
    <div class="bg-gradient-to-r from-purple-600 via-pink-500 to-red-500 dark:from-purple-800 dark:via-pink-700 dark:to-red-800 text-white text-center py-4 px-6 relative overflow-hidden">
      <h1 class="text-3xl sm:text-4xl font-extrabold tracking-wide uppercase drop-shadow-lg [text-shadow:_3px_3px_#ff00ff, _-3px_-3px_#00ffff]">CYPHER_NET</h1>
      <p class="text-sm text-yellow-300 italic mt-1 drop-shadow [text-shadow:_1px_1px_#000]">Login Sequence Initiated</p>
      <div class="absolute -bottom-4 -left-4 w-12 h-12 bg-pink-400 rounded-full mix-blend-screen opacity-50 duration-500 group-hover:scale-150"></div>
      <div class="absolute -top-4 -right-4 w-16 h-16 bg-blue-400 rounded-full mix-blend-screen opacity-50 duration-500 group-hover:scale-150"></div>
    </div>

    <div class="p-6 sm:p-8 space-y-6">
      <!-- Toggle Switch for Login/Signup -->
      <div class="flex justify-center mb-6">
        <div class="relative inline-flex bg-gray-300 dark:bg-gray-600 rounded-full p-1 shadow-inner">
          <input type="radio" name="auth_type" id="login_tab" class="hidden peer/login" checked>
          <label for="login_tab" class="relative z-20 px-6 py-2 text-sm sm:text-base font-bold rounded-full cursor-pointer transition-colors duration-300 text-gray-800 dark:text-gray-200 peer-checked/login:bg-green-500 peer-checked/login:text-white peer-checked/login:shadow-md">
            LOGIN
          </label>

          <input type="radio" name="auth_type" id="signup_tab" class="hidden peer/signup">
          <label for="signup_tab" class="relative z-20 px-6 py-2 text-sm sm:text-base font-bold rounded-full cursor-pointer transition-colors duration-300 text-gray-800 dark:text-gray-200 peer-checked/signup:bg-orange-500 peer-checked/signup:text-white peer-checked/signup:shadow-md">
            SIGNUP
          </label>
          <div class="absolute inset-y-1 left-1 w-1/2 h-auto bg-green-500 rounded-full shadow-md transition-transform duration-300 ease-in-out peer-checked/signup:translate-x-full dark:bg-cyan-600"></div>
        </div>
      </div>

      <!-- Form Fields -->
      <div class="relative space-y-4">
        <div class="relative">
          <label for="email" class="block text-xs uppercase font-bold text-gray-600 dark:text-gray-300 mb-1 [text-shadow:_0.5px_0.5px_#fff]">USERNAME / E-MAIL</label>
          <input type="email" id="email" placeholder="[email protected]" class="w-full p-3 pl-10 bg-gray-100 dark:bg-gray-700 rounded-lg border-2 border-purple-400 dark:border-purple-600 focus:outline-none focus:ring-4 focus:ring-pink-400 dark:focus:ring-pink-600 text-gray-800 dark:text-white font-medium placeholder-gray-500 dark:placeholder-gray-400 [text-shadow:_0.5px_0.5px_#fff]"
                 style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.05);">
          <span class="absolute left-3 top-1/2 transform -translate-y-1/2 mt-2 text-purple-600 dark:text-purple-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" /><path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" /></svg></span>
        </div>

        <div class="relative">
          <label for="password" class="block text-xs uppercase font-bold text-gray-600 dark:text-gray-300 mb-1 [text-shadow:_0.5px_0.5px_#fff]">ACCESS CODE</label>
          <input type="password" id="password" placeholder="********" class="w-full p-3 pl-10 bg-gray-100 dark:bg-gray-700 rounded-lg border-2 border-pink-400 dark:border-pink-600 focus:outline-none focus:ring-4 focus:ring-red-400 dark:focus:ring-red-600 text-gray-800 dark:text-white font-medium placeholder-gray-500 dark:placeholder-gray-400 [text-shadow:_0.5px_0.5px_#fff]"
                 style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.05);">
          <span class="absolute left-3 top-1/2 transform -translate-y-1/2 mt-2 text-pink-600 dark:text-pink-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2h2a2 2 0 012 2v5a2 2 0 01-2 2H3a2 2 0 01-2-2v-5a2 2 0 012-2h2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" /></svg></span>
        </div>

        <div class="flex justify-between items-center text-xs">
          <a href="#" class="text-purple-600 dark:text-purple-400 font-bold hover:text-green-600 dark:hover:text-green-400 transition duration-300 [text-shadow:_0.5px_0.5px_#fff]">FORGOT ACCESS CODE?</a>
          <div class="flex items-center">
            <input type="checkbox" id="remember" class="hidden peer">
            <label for="remember" class="relative w-10 h-6 bg-gray-300 dark:bg-gray-600 rounded-full cursor-pointer transition-colors duration-300 peer-checked:bg-cyan-500 dark:peer-checked:bg-cyan-700 shadow-inner mr-2"></label>
            <span class="text-gray-600 dark:text-gray-300 [text-shadow:_0.5px_0.5px_#fff]">REMEMBER ME</span>
          </div>
        </div>
      </div>

      <!-- Submit Button -->
      <button type="submit" class="w-full mt-6 bg-gradient-to-r from-green-500 to-cyan-500 dark:from-green-700 dark:to-cyan-700 text-white py-3 rounded-xl uppercase font-extrabold text-lg tracking-wide shadow-lg transform active:scale-95 transition duration-200 ease-in-out hover:from-green-600 hover:to-cyan-600 dark:hover:from-green-800 dark:hover:to-cyan-800 border-2 border-green-300 dark:border-green-500 [text-shadow:_2px_2px_#000]">
        INITIATE LOGIN
      </button>

      <!-- Divider -->
      <div class="relative flex justify-center py-4">
        <div class="absolute inset-0 flex items-center">
          <div class="w-full border-t border-gray-400 dark:border-gray-600 border-dashed"></div>
        </div>
        <div class="relative z-10 px-4 bg-gradient-to-br from-purple-200 via-pink-100 to-red-100 dark:bg-gradient-to-br dark:from-gray-700 dark:via-gray-800 dark:to-gray-900 text-sm italic text-gray-600 dark:text-gray-300 rounded-full [text-shadow:_0.5px_0.5px_#fff]">
          OR LINK ACCESS
        </div>
      </div>

      <!-- Social/Crypto Login Buttons -->
      <div class="grid grid-cols-2 gap-4">
        <button class="flex items-center justify-center p-3 rounded-xl bg-blue-600 hover:bg-blue-700 text-white font-bold transform active:scale-95 transition duration-200 shadow-md border-2 border-blue-400 dark:border-blue-700 ">
          <svg class="w-5 h-5 mr-2" viewBox="0 0 24 24" fill="currentColor"><path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6S17 7.57 17 9.5V12h3l-1 3h-2v6.95c3.25-1.58 5.5-4.83 5.5-8.95z"/></svg>
          <span class="hidden sm:inline">FACEBOOK</span>
        </button>
        <button class="flex items-center justify-center p-3 rounded-xl bg-gray-800 hover:bg-gray-900 text-white font-bold transform active:scale-95 transition duration-200 shadow-md border-2 border-gray-600 dark:border-gray-500 ">
          <svg class="w-5 h-5 mr-2" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.477 2 12c0 4.418 2.866 8.148 6.84 9.49C9.043 21.6 9 21.419 9 21.05c0-.097.009-.4.014-.72c-2.775.602-3.366-1.34-3.366-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.618.068-.607.068-.607 1.004.07 1.532 1.03 1.532 1.03.89 1.528 2.336 1.085 2.903.827.09-.645.35-1.085.636-1.334-2.218-.25-4.555-1.107-4.555-4.912 0-1.085.39-1.977 1.03-2.67-.103-.25-.447-1.26.098-2.63c0 0 .84-.268 2.75 1.025a9.558 9.558 0 012.5-.325c.875 0 1.76.11 2.5.325 1.91-1.293 2.75-1.025 2.75-1.025.545 1.37.202 2.38.098 2.63.64.693 1.03 1.585 1.03 2.67 0 3.811-2.34 4.66-4.562 4.902.358.309.678.918.678 1.85V21.1c0 .332-.008.57-.014.72.784-.19 1.528-.48 2.215-.826C20.134 20.148 23 16.418 23 12c0-5.523-4.477-10-10-10z"/></svg>
          <span class="hidden sm:inline">GITHUB</span>
        </button>
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <button class="flex items-center justify-center p-3 rounded-xl bg-orange-500 hover:bg-orange-600 text-white font-bold transform active:scale-95 transition duration-200 shadow-md border-2 border-orange-300 dark:border-orange-600 ">
          <img src="https://cryptologos.cc/logos/bitcoin-btc-logo.svg?v=023" alt="Bitcoin" class="w-5 h-5 mr-2 filter invert dark:filter-none">
          <span class="hidden sm:inline">BITCOIN WALLET</span>
        </button>
        <button class="flex items-center justify-center p-3 rounded-xl bg-purple-600 hover:bg-purple-700 text-white font-bold transform active:scale-95 transition duration-200 shadow-md border-2 border-purple-400 dark:border-purple-700 ">
          <img src="https://cryptologos.cc/logos/ethereum-eth-logo.svg?v=023" alt="Ethereum" class="w-5 h-5 mr-2 filter invert dark:filter-none">
          <span class="hidden sm:inline">ETHEREUM WALLET</span>
        </button>
      </div>

      <!-- Footer Text -->
      <div class="text-center text-sm text-gray-500 dark:text-gray-400 pt-4">
        <p>© 198BIT. All Rights Reserved. <span class="font-bold text-gray-600 dark:text-gray-300">BLOCKCHAIN SECURED.</span></p>
        <p class="mt-1 text-xs">For optimal experience, connect via <span class="text-yellow-500 font-bold">METAMASK</span> on desktop.</p>
      </div>

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

Material Design Content Card for Education

A simple, responsive content card designed with Material Design principles, corporate blue color scheme, and dark mode support, suitable for educational platforms.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl">
    <!-- Card Header with Image -->
    <div class="relative">
      <img class="w-full h-40 object-cover" src="https://picsum.photos/400/250?random=1" alt="Course Thumbnail">
      <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black to-transparent">
        <h3 class="text-xl font-bold text-white leading-tight">Introduction to Web Development</h3>
      </div>
    </div>

    <!-- Card Content -->
    <div class="p-4 flex flex-col gap-3">
      <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
        Learn the fundamentals of HTML, CSS, and JavaScript to build your first websites. This course is perfect for beginners.
      </p>

      <div class="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400">
        <div class="flex items-center gap-1">
          <svg class="w-4 h-4 text-blue-500" 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 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>
          <span>2h 30m</span>
        </div>
        <div class="flex items-center gap-1">
          <svg class="w-4 h-4 text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 01-8 8v-8H2z"></path><path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path></svg>
          <span>5 Modules</span>
        </div>
      </div>
    </div>

    <!-- Card Footer with Action Button -->
    <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 flex justify-end">
      <button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md shadow transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
        Start Course
      </button>
    </div>
  </div>
</div>

Skeuomorphic Product Reviews Component - Ocean Blue

A moderate complexity product review component designed with a skeuomorphic style, utilizing ocean/blue tones for a business/corporate purpose. It features responsive design, dark mode support, and interactive elements.

Open Preview

                <div class="font-sans antialiased bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 p-4 sm:p-8 md:p-12 lg:p-16 min-h-screen">

  <!-- Reviews Container -->
  <div class="max-w-4xl mx-auto bg-gradient-to-br from-blue-200 to-blue-300 dark:from-gray-700 dark:to-gray-700 shadow-neu dark:shadow-neu-dark rounded-xl p-6 sm:p-8 lg:p-10 border-t border-l border-blue-100 dark:border-gray-600 relative overflow-hidden">
    <div class="absolute inset-0 bg-blue-300 dark:bg-gray-800 opacity-20 dark:opacity-10 rounded-xl pointer-events-none"></div>

    <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-900 dark:text-blue-100 mb-8 text-center drop-shadow-md relative z-10">
      What Our Customers Say
    </h2>

    <!-- Overall Rating Section -->
    <div class="bg-blue-100 dark:bg-gray-800 rounded-lg p-5 mb-8 shadow-inner-neu dark:shadow-inner-neu-dark border border-blue-50 dark:border-gray-700 relative z-10">
      <div class="flex flex-col sm:flex-row items-center justify-between">
        <div class="text-center sm:text-left mb-4 sm:mb-0">
          <p class="text-6xl font-bold text-blue-800 dark:text-blue-200">4.8</p>
          <div class="flex justify-center sm:justify-start mt-1">
            <svg class="w-6 h-6 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
            <svg class="w-6 h-6 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
            <svg class="w-6 h-6 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
            <svg class="w-6 h-6 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
            <svg class="w-6 h-6 text-yellow-300 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
          </div>
          <p class="text-blue-700 dark:text-blue-300 text-sm mt-1">(Based on 2,543 reviews)</p>
        </div>
        <button class="flex items-center space-x-2 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-full shadow-md neumorph-btn dark:neumorph-btn-dark active:scale-95 transition-all duration-200">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" /></svg>
          <span>Write a Review</span>
        </button>
      </div>
    </div>

    <!-- Review List -->
    <div class="space-y-6 relative z-10">

      <!-- Review Item 1 -->
      <div class="bg-blue-100 dark:bg-gray-800 rounded-lg p-5 shadow-inner-neu dark:shadow-inner-neu-dark border border-blue-50 dark:border-gray-700">
        <div class="flex items-center mb-3">
          <img class="w-12 h-12 rounded-full ring-2 ring-blue-400 dark:ring-blue-600 shadow-md" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div class="ml-4">
            <p class="font-semibold text-blue-900 dark:text-blue-100">John Doe</p>
            <div class="flex text-yellow-500 text-sm">
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
              <svg class="w-4 h-4 text-yellow-300 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
            </div>
          </div>
        </div>
        <h3 class="text-lg font-bold text-blue-800 dark:text-blue-200 mb-2">"Absolutely stellar service!"</h3>
        <p class="text-blue-700 dark:text-blue-300 leading-relaxed mb-4">
          I was thoroughly impressed with the professionalism and efficiency. The product exceeded my expectations and functionality is truly top-notch. Highly recommended for any business looking to enhance their operations.
        </p>
        <p class="text-sm text-blue-600 dark:text-blue-400 text-right">Reviewed on January 15, 2024</p>
      </div>

      <!-- Review Item 2 -->
      <div class="bg-blue-100 dark:bg-gray-800 rounded-lg p-5 shadow-inner-neu dark:shadow-inner-neu-dark border border-blue-50 dark:border-gray-700">
        <div class="flex items-center mb-3">
          <img class="w-12 h-12 rounded-full ring-2 ring-blue-400 dark:ring-blue-600 shadow-md" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div class="ml-4">
            <p class="font-semibold text-blue-900 dark:text-blue-100">Jane Smith</p>
            <div class="flex text-yellow-500 text-sm">
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
            </div>
          </div>
        </div>
        <h3 class="text-lg font-bold text-blue-800 dark:text-blue-200 mb-2">"A game changer for our team!"</h3>
        <p class="text-blue-700 dark:text-blue-300 leading-relaxed mb-4">
          The customer support was responsive and helpful, guiding us through setup seamlessly. This product has significantly improved our workflow and team collaboration. We couldn't be happier with our investment.
        </p>
        <p class="text-sm text-blue-600 dark:text-blue-400 text-right">Reviewed on February 01, 2024</p>
      </div>

      <!-- Review Item 3 -->
      <div class="bg-blue-100 dark:bg-gray-800 rounded-lg p-5 shadow-inner-neu dark:shadow-inner-neu-dark border border-blue-50 dark:border-gray-700">
        <div class="flex items-center mb-3">
          <img class="w-12 h-12 rounded-full ring-2 ring-blue-400 dark:ring-blue-600 shadow-md" src="https://randomuser.me/api/portraits/women/21.jpg" alt="User Avatar">
          <div class="ml-4">
            <p class="font-semibold text-blue-900 dark:text-blue-100">Emily White</p>
            <div class="flex text-yellow-500 text-sm">
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
              <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10.165 2.508c-.282-.877-1.564-.877-1.846 0l-1.09 3.376a1 1 0 01-.97.7h-3.56c-.958 0-1.353 1.24.57 1.81l2.88 2.09c.31.226.467.625.352 1.01l-1.09 3.377c-.282.877.747 1.6.973 1.01l2.88-2.09c.31-.226.744-.226 1.054 0l2.88 2.09c.226.59.973-.133.691-1.01l-1.09-3.377a1 1 0 01.352-1.01l2.88-2.09c1.923-.57.928-1.81-.352-1.81h-3.56a1 1 0 01-.97-.7l-1.09-3.376z" clip-rule="evenodd" /></svg>
            </div>
          </div>
        </div>
        <h3 class="text-lg font-bold text-blue-800 dark:text-blue-200 mb-2">"Very pleased with this purchase!"</h3>
        <p class="text-blue-700 dark:text-blue-300 leading-relaxed mb-4">
          The product seamlessly integrates with our existing systems, and the learning curve was minimal. It's a robust solution that delivers on its promises. Our team's productivity has noticeably increased.
        </p>
        <p class="text-sm text-blue-600 dark:text-blue-400 text-right">Reviewed on February 10, 2024</p>
      </div>

    </div>
  </div>

  <!-- Custom Styles for Skeuomorphism -->
  <style>
    .shadow-neu {
      box-shadow: 8px 8px 16px #9ecbf2, -8px -8px 16px #d8f1ff;
    }
    .shadow-neu-dark {
      box-shadow: 8px 8px 16px #4a4a4a, -8px -8px 16px #222222;
    }
    .shadow-inner-neu {
      box-shadow: inset 5px 5px 10px #b1d8f7, inset -5px -5px 10px #e1f4ff;
    }
    .shadow-inner-neu-dark {
      box-shadow: inset 5px 5px 10px #333333, inset -5px -5px 10px #555555;
    }
    .neumorph-btn {
        box-shadow: 4px 4px 8px rgba(0,0,0,0.2), -4px -4px 8px rgba(255,255,255,0.7),
                    inset 0.5px 0.5px 1px rgba(255,255,255,0.5), inset -0.5px -0.5px 1px rgba(0,0,0,0.1);
    }
    .neumorph-btn-dark {
        box-shadow: 4px 4px 8px #2a2a2a, -4px -4px 8px #525252,
                    inset 0.5px 0.5px 1px rgba(255,255,255,0.1), inset -0.5px -0.5px 1px rgba(0,0,0,0.3);
    }
    .neumorph-btn:active {
        box-shadow: inset 4px 4px 8px rgba(0,0,0,0.2), inset -4px -4px 8px rgba(255,255,255,0.7),
                    0 0 0 rgba(255,255,255,0), 0 0 0 rgba(0,0,0,0);
    }
    .neumorph-btn-dark:active {
        box-shadow: inset 4px 4px 8px #2a2a2a, inset -4px -4px 8px #525252,
                    0 0 0 rgba(255,255,255,0), 0 0 0 rgba(0,0,0,0);
    }
  </style>

  <!-- You can add a dark mode toggle script if needed, here's a placeholder comment -->
  <!-- <script>
    // Example Toggle Script (requires some JS, not part of the HTML-only output)
    document.documentElement.classList.toggle('dark');
  </script> -->

</div>

JewelTone_Photography_Gallery

A complex, responsive photography gallery component with jewel tone colors and a clean, typographic layout, featuring grid systems and dark mode support. Ideal for photographer portfolios.

Open Preview

                <div class="bg-zinc-100 dark:bg-zinc-900 min-h-screen p-4 sm:p-6 lg:p-8 font-sans transition-colors duration-300">

  <!-- Gallery Header -->
  <header class="max-w-7xl mx-auto mb-8 sm:mb-12 text-center">
    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-emerald-700 dark:text-emerald-400 mb-4 tracking-tight">
      Capturing Moments
    </h1>
    <p class="text-lg sm:text-xl text-zinc-700 dark:text-zinc-300 leading-relaxed max-w-2xl mx-auto">
      Explore a curated collection of visual stories, where light meets emotion and every frame tells a tale.
    </p>
    <div class="mt-6 flex justify-center space-x-4">
      <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-sapphire-700 hover:bg-sapphire-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sapphire-500 dark:bg-sapphire-500 dark:hover:bg-sapphire-600 dark:focus:ring-sapphire-400">
        View All Galleries
      </a>
      <a href="#" class="inline-flex items-center px-6 py-3 border border-zinc-300 dark:border-zinc-700 text-base font-medium rounded-md text-zinc-700 bg-white hover:bg-zinc-50 dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
        About The Artist
      </a>
    </div>
  </header>

  <!-- Gallery Categories/Filters -->
  <nav class="max-w-7xl mx-auto mb-8 sm:mb-12">
    <ul class="flex flex-wrap justify-center gap-3 sm:gap-4">
      <li>
        <a href="#" class="px-4 py-2 rounded-full text-sm font-medium bg-ruby-200 text-ruby-800 dark:bg-ruby-800 dark:text-ruby-200 hover:bg-ruby-300 dark:hover:bg-ruby-700 transition-colors duration-200">
          All
        </a>
      </li>
      <li>
        <a href="#" class="px-4 py-2 rounded-full text-sm font-medium bg-zinc-200 text-zinc-800 dark:bg-zinc-700 dark:text-zinc-200 hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors duration-200">
          Nature
        </a>
      </li>
      <li>
        <a href="#" class="px-4 py-2 rounded-full text-sm font-medium bg-zinc-200 text-zinc-800 dark:bg-zinc-700 dark:text-zinc-200 hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors duration-200">
          Portraits
        </a>
      </li>
      <li>
        <a href="#" class="px-4 py-2 rounded-full text-sm font-medium bg-zinc-200 text-zinc-800 dark:bg-zinc-700 dark:text-zinc-200 hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors duration-200">
          Abstract
        </a>
      </li>
      <li>
        <a href="#" class="px-4 py-2 rounded-full text-sm font-medium bg-zinc-200 text-zinc-800 dark:bg-zinc-700 dark:text-zinc-200 hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors duration-200">
          Urban
        </a>
      </li>
      <li>
        <a href="#" class="px-4 py-2 rounded-full text-sm font-medium bg-zinc-200 text-zinc-800 dark:bg-zinc-700 dark:text-zinc-200 hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors duration-200">
          Events
        </a>
      </li>
    </ul>
  </nav>

  <!-- Photo Grid -->
  <section class="max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">

    <!-- Photo Card 1 -->
    <article class="relative group rounded-lg overflow-hidden shadow-lg transform hover:scale-102 transition-all duration-300 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700">
      <img src="https://picsum.photos/id/1057/700/500" alt="Forest Stream" class="w-full h-64 object-cover object-center group-hover:opacity-80 transition-opacity duration-300">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-sapphire-800 dark:text-sapphire-400 mb-2">Whispers of the Forest</h3>
        <p class="text-zinc-600 dark:text-zinc-400 text-sm mb-3">A serene stream winding through ancient trees, captured in soft morning light.</p>
        <div class="flex items-center text-zinc-500 dark:text-zinc-400 text-xs">
          <svg class="w-4 h-4 mr-1 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="M4 5a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-1.586a1 1 0 01-.707-.293l-1.121-1.121A1 1 0 0011.379 3H8.621a1 1 0 00-.707.293L6.293 4.707A1 1 0 015.586 5H4zm6 9a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"></path></svg>
          <span>Nature & Landscape</span>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-between p-4">
          <span class="text-white text-sm font-bold">5.2K Views</span>
          <button class="p-2 rounded-full bg-sapphire-600 text-white hover:bg-sapphire-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sapphire-500 dark:bg-sapphire-500 dark:hover:bg-sapphire-600">
            <svg class="w-5 h-5" 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
          </button>
        </div>
      </div>
    </article>

    <!-- Photo Card 2 -->
    <article class="relative group rounded-lg overflow-hidden shadow-lg transform hover:scale-102 transition-all duration-300 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700">
      <img src="https://picsum.photos/id/1025/700/500" alt="Woman's Portrait" class="w-full h-64 object-cover object-center group-hover:opacity-80 transition-opacity duration-300">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-sapphire-800 dark:text-sapphire-400 mb-2">Gaze of Serenity</h3>
        <p class="text-zinc-600 dark:text-zinc-400 text-sm mb-3">A captivating portrait capturing the quiet strength and beauty of a woman.</p>
        <div class="flex items-center text-zinc-500 dark:text-zinc-400 text-xs">
          <svg class="w-4 h-4 mr-1 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 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>
          <span>Portraits</span>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-between p-4">
          <span class="text-white text-sm font-bold">8.1K Views</span>
          <button class="p-2 rounded-full bg-sapphire-600 text-white hover:bg-sapphire-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sapphire-500 dark:bg-sapphire-500 dark:hover:bg-sapphire-600">
            <svg class="w-5 h-5" 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
          </button>
        </div>
      </div>
    </article>

    <!-- Photo Card 3 -->
    <article class="relative group rounded-lg overflow-hidden shadow-lg transform hover:scale-102 transition-all duration-300 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700">
      <img src="https://picsum.photos/id/1080/700/500" alt="Abstract Light" class="w-full h-64 object-cover object-center group-hover:opacity-80 transition-opacity duration-300">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-sapphire-800 dark:text-sapphire-400 mb-2">Chromatic Dance</h3>
        <p class="text-zinc-600 dark:text-zinc-400 text-sm mb-3">An mesmerizing play of light and shadow, forming abstract patterns.</p>
        <div class="flex items-center text-zinc-500 dark:text-zinc-400 text-xs">
          <svg class="w-4 h-4 mr-1 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="M9.243 3.636a1 1 0 011.514 0l3.05 4.195a1 1 0 01-.061 1.488l-2.43 2.193a1 1 0 01-1.353-.105l-1.89-2.122a1 1 0 01.105-1.353l2.193-2.43a1 1 0 011.488-.061L12.364 8.243a1 1 0 00-.707 1.707l-2.414 2.414a1 1 0 01-1.414 0L6.707 10.707a1 1 0 00-1.707.707l2.414 2.414a1 1 0 010 1.414l-2.414 2.414a1 1 0 00-.707 1.707l2.414 2.414a1 1 0 010 1.414l-2.414 2.414a1 1 0 00-.707 1.707l2.414 2.414a1 1 0 010 1.414L3.636 17.243a1 1 0 01-1.414 0L.707 15.121a1 1 0 00-1.707.707l2.414 2.414a1 1 0 010 1.414L.707 20a1 1 0 00-.707.707l2.414 2.414a1 1 0 010 1.414L3.636 24.364a1 1 0 011.414 0L5.757 26a1 1 0 001.707-.707l-2.414-2.414a1 1 0 010-1.414zM10 18a8 8 0 100-16 8 8 0 000 16z" clip-rule="evenodd"></path></svg>
          <span>Abstract Art</span>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-between p-4">
          <span class="text-white text-sm font-bold">3.9K Views</span>
          <button class="p-2 rounded-full bg-sapphire-600 text-white hover:bg-sapphire-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sapphire-500 dark:bg-sapphire-500 dark:hover:bg-sapphire-600">
            <svg class="w-5 h-5" 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
          </button>
        </div>
      </div>
    </article>

    <!-- Photo Card 4 -->
    <article class="relative group rounded-lg overflow-hidden shadow-lg transform hover:scale-102 transition-all duration-300 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700">
      <img src="https://picsum.photos/id/1012/700/500" alt="Cityscape at Night" class="w-full h-64 object-cover object-center group-hover:opacity-80 transition-opacity duration-300">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-sapphire-800 dark:text-sapphire-400 mb-2">Neon Metropolis</h3>
        <p class="text-zinc-600 dark:text-zinc-400 text-sm mb-3">The vibrant energy of a city skyline illuminated by countless lights.</p>
        <div class="flex items-center text-zinc-500 dark:text-zinc-400 text-xs">
          <svg class="w-4 h-4 mr-1 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
          <span>Urban & Architecture</span>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-between p-4">
          <span class="text-white text-sm font-bold">6.5K Views</span>
          <button class="p-2 rounded-full bg-sapphire-600 text-white hover:bg-sapphire-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sapphire-500 dark:bg-sapphire-500 dark:hover:bg-sapphire-600">
            <svg class="w-5 h-5" 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
          </button>
        </div>
      </div>
    </article>

    <!-- Photo Card 5 -->
    <article class="relative group rounded-lg overflow-hidden shadow-lg transform hover:scale-102 transition-all duration-300 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700">
      <img src="https://picsum.photos/id/1039/700/500" alt="Desert Landscape" class="w-full h-64 object-cover object-center group-hover:opacity-80 transition-opacity duration-300">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-sapphire-800 dark:text-sapphire-400 mb-2">Echoes of the Sand</h3>
        <p class="text-zinc-600 dark:text-zinc-400 text-sm mb-3">Vast and silent desert landscape under a dramatic sky.</p>
        <div class="flex items-center text-zinc-500 dark:text-zinc-400 text-xs">
          <svg class="w-4 h-4 mr-1 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="M4 5a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-1.586a1 1 0 01-.707-.293l-1.121-1.121A1 1 0 0011.379 3H8.621a1 1 0 00-.707.293L6.293 4.707A1 1 0 015.586 5H4zm6 9a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"></path></svg>
          <span>Nature & Landscape</span>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-between p-4">
          <span class="text-white text-sm font-bold">4.8K Views</span>
          <button class="p-2 rounded-full bg-sapphire-600 text-white hover:bg-sapphire-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sapphire-500 dark:bg-sapphire-500 dark:hover:bg-sapphire-600">
            <svg class="w-5 h-5" 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
          </button>
        </div>
      </div>
    </article>

    <!-- Photo Card 6 -->
    <article class="relative group rounded-lg overflow-hidden shadow-lg transform hover:scale-102 transition-all duration-300 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700">
      <img src="https://picsum.photos/id/1042/700/500" alt="Coffee Shop Interior" class="w-full h-64 object-cover object-center group-hover:opacity-80 transition-opacity duration-300">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-sapphire-800 dark:text-sapphire-400 mb-2">Urban Canvas</h3>
        <p class="text-zinc-600 dark:text-zinc-400 text-sm mb-3">The cozy ambiance of a bustling coffee shop.</p>
        <div class="flex items-center text-zinc-500 dark:text-zinc-400 text-xs">
          <svg class="w-4 h-4 mr-1 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
          <span>Urban & Events</span>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-between p-4">
          <span class="text-white text-sm font-bold">5.9K Views</span>
          <button class="p-2 rounded-full bg-sapphire-600 text-white hover:bg-sapphire-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sapphire-500 dark:bg-sapphire-500 dark:hover:bg-sapphire-600">
            <svg class="w-5 h-5" 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
          </button>
        </div>
      </div>
    </article>

    <!-- Photo Card 7 -->
    <article class="relative group rounded-lg overflow-hidden shadow-lg transform hover:scale-102 transition-all duration-300 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700">
      <img src="https://picsum.photos/id/1050/700/500" alt="Mountains and Lake" class="w-full h-64 object-cover object-center group-hover:opacity-80 transition-opacity duration-300">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-sapphire-800 dark:text-sapphire-400 mb-2">Alpine Reflection</h3>
        <p class="text-zinc-600 dark:text-zinc-400 text-sm mb-3">Majestic mountains mirroring in a clear alpine lake.</p>
        <div class="flex items-center text-zinc-500 dark:text-zinc-400 text-xs">
          <svg class="w-4 h-4 mr-1 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="M4 5a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-1.586a1 1 0 01-.707-.293l-1.121-1.121A1 1 0 0011.379 3H8.621a1 1 0 00-.707.293L6.293 4.707A1 1 0 015.586 5H4zm6 9a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"></path></svg>
          <span>Nature & Landscape</span>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-between p-4">
          <span class="text-white text-sm font-bold">7.0K Views</span>
          <button class="p-2 rounded-full bg-sapphire-600 text-white hover:bg-sapphire-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sapphire-500 dark:bg-sapphire-500 dark:hover:bg-sapphire-600">
            <svg class="w-5 h-5" 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
          </button>
        </div>
      </div>
    </article>

    <!-- Photo Card 8 -->
    <article class="relative group rounded-lg overflow-hidden shadow-lg transform hover:scale-102 transition-all duration-300 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700">
      <img src="https://picsum.photos/id/1060/700/500" alt="Historical Building" class="w-full h-64 object-cover object-center group-hover:opacity-80 transition-opacity duration-300">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-sapphire-800 dark:text-sapphire-400 mb-2">Timeless Stone</h3>
        <p class="text-zinc-600 dark:text-zinc-400 text-sm mb-3">An ancient architectural marvel standing against the test of time.</p>
        <div class="flex items-center text-zinc-500 dark:text-zinc-400 text-xs">
          <svg class="w-4 h-4 mr-1 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
          <span>Architecture</span>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-between p-4">
          <span class="text-white text-sm font-bold">4.1K Views</span>
          <button class="p-2 rounded-full bg-sapphire-600 text-white hover:bg-sapphire-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sapphire-500 dark:bg-sapphire-500 dark:hover:bg-sapphire-600">
            <svg class="w-5 h-5" 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
          </button>
        </div>
      </div>
    </article>

  </section>

  <!-- Call to Action / Footer -->
  <footer class="max-w-7xl mx-auto mt-12 sm:mt-16 text-center">
    <div class="bg-ruby-100 dark:bg-ruby-900 rounded-lg p-6 sm:p-8 flex flex-col sm:flex-row items-center justify-between shadow-inner space-y-4 sm:space-y-0">
      <div class="text-ruby-800 dark:text-ruby-200 text-xl sm:text-2xl font-bold">
        Ready to bring your vision to life?
      </div>
      <a href="#" class="px-8 py-3 bg-ruby-600 text-white rounded-md shadow-lg hover:bg-ruby-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-ruby-500 dark:bg-ruby-500 dark:hover:bg-ruby-600">
        Contact Me
      </a>
    </div>
    <p class="mt-8 text-zinc-500 dark:text-zinc-400 text-sm">
      &copy; 2023 JewelTone Photography. All rights reserved.
    </p>
  </footer>

</div>

Industrial Progress Indicators Component

A complex, high-contrast progress indicators component with an industrial design aesthetic, suitable for business/corporate websites. Features multiple progress bars, a detailed status section, and raw material textures, fully responsive with dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 font-sans text-gray-800 dark:text-gray-200 min-h-screen">
  <div class="max-w-6xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="p-6 sm:p-8 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-800 dark:text-blue-400 mb-2 tracking-tight">Project Status Overview</h2>
      <p class="text-gray-600 dark:text-gray-400 text-lg">Comprehensive progress tracking for 'Aurora Borealis' initiative.</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-2 sm:gap-4 p-4 sm:p-6 md:p-8">
      <!-- Left Column: Primary Progress Indicators -->
      <div class="lg:col-span-2 space-y-6 sm:space-y-8">
        <!-- Overall Project Progress -->
        <section class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
            <svg class="w-7 h-7 mr-3 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 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
            Overall Project Progress
          </h3>
          <div class="mb-2 flex justify-between items-center">
            <span class="text-lg font-medium text-blue-700 dark:text-blue-300">75% Complete</span>
            <span class="text-sm text-gray-500 dark:text-gray-400">Target: 90% by EOM</span>
          </div>
          <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4 sm:h-5 overflow-hidden border border-gray-300 dark:border-gray-600">
            <div class="bg-blue-600 dark:bg-blue-500 h-full rounded-full transition-all duration-500 ease-out" style="width: 75%;"></div>
          </div>
          <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">Last Updated: 2 min ago</p>
        </section>

        <!-- Key Milestones Progress -->
        <section class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
            <svg class="w-7 h-7 mr-3 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Key Milestones
          </h3>
          <div class="space-y-4">
            <div>
              <div class="flex justify-between items-center mb-1">
                <span class="text-md font-medium text-gray-700 dark:text-gray-300">Phase 1: Design & Planning</span>
                <span class="text-md font-medium text-emerald-600 dark:text-emerald-400">100%</span>
              </div>
              <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden border border-gray-300 dark:border-gray-600">
                <div class="bg-emerald-600 dark:bg-emerald-500 h-full rounded-full transition-all duration-500 ease-out" style="width: 100%;"></div>
              </div>
            </div>
            <div>
              <div class="flex justify-between items-center mb-1">
                <span class="text-md font-medium text-gray-700 dark:text-gray-300">Phase 2: Development & Integration</span>
                <span class="text-md font-medium text-yellow-600 dark:text-yellow-400">60%</span>
              </div>
              <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden border border-gray-300 dark:border-gray-600">
                <div class="bg-yellow-600 dark:bg-yellow-500 h-full rounded-full transition-all duration-500 ease-out" style="width: 60%;"></div>
              </div>
            </div>
            <div>
              <div class="flex justify-between items-center mb-1">
                <span class="text-md font-medium text-gray-700 dark:text-gray-300">Phase 3: Testing & Deployment</span>
                <span class="text-md font-medium text-red-600 dark:text-red-400">20%</span>
              </div>
              <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden border border-gray-300 dark:border-gray-600">
                <div class="bg-red-600 dark:bg-red-500 h-full rounded-full transition-all duration-500 ease-out" style="width: 20%;"></div>
              </div>
            </div>
          </div>
        </section>

        <!-- Resource Utilization -->
        <section class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
            <svg class="w-7 h-7 mr-3 text-cyan-600 dark:text-cyan-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 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
            Resource Utilization
          </h3>
          <div class="space-y-4">
            <div>
              <div class="flex justify-between items-center mb-1">
                <span class="text-md font-medium text-gray-700 dark:text-gray-300">Budget Allocation</span>
                <span class="text-md font-medium text-orange-600 dark:text-orange-400">85% Used</span>
              </div>
              <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden border border-gray-300 dark:border-gray-600">
                <div class="bg-orange-600 dark:bg-orange-500 h-full rounded-full transition-all duration-500 ease-out" style="width: 85%;"></div>
              </div>
            </div>
            <div>
              <div class="flex justify-between items-center mb-1">
                <span class="text-md font-medium text-gray-700 dark:text-gray-300">Team Workload</span>
                <span class="text-md font-medium text-green-600 dark:text-green-400">70% Capacity</span>
              </div>
              <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden border border-gray-300 dark:border-gray-600">
                <div class="bg-green-600 dark:bg-green-500 h-full rounded-full transition-all duration-500 ease-out" style="width: 70%;"></div>
              </div>
            </div>
          </div>
        </section>
      </div>

      <!-- Right Column: Status & Updates -->
      <div class="lg:col-span-1 space-y-6 sm:space-y-8">
        <!-- Project Status Board -->
        <section class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
            <svg class="w-7 h-7 mr-3 text-purple-600 dark:text-purple-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 17L12 20L15 17M9 7L12 4L15 7M21 12H3"></path></svg>
            Current Status
          </h3>
          <dl class="divide-y divide-gray-200 dark:divide-gray-700">
            <div class="flex justify-between py-3">
              <dt class="text-gray-600 dark:text-gray-400">Overall Health:</dt>
              <dd class="font-semibold text-lg text-emerald-600 dark:text-emerald-400">Stable</dd>
            </div>
            <div class="flex justify-between py-3">
              <dt class="text-gray-600 dark:text-gray-400">Next Deadline:</dt>
              <dd class="font-semibold text-lg text-blue-600 dark:text-blue-400">Feb 28, 2024</dd>
            </div>
            <div class="flex justify-between py-3">
              <dt class="text-gray-600 dark:text-gray-400">Critical Issues:</dt>
              <dd class="font-semibold text-lg text-red-600 dark:text-red-400">2 Open</dd>
            </div>
            <div class="flex justify-between py-3">
              <dt class="text-gray-600 dark:text-gray-400">Team Capacity:</dt>
              <dd class="font-semibold text-lg text-orange-600 dark:text-orange-400">Stretched</dd>
            </div>
          </dl>
        </section>

        <!-- Recent Activity -->
        <section class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
            <svg class="w-7 h-7 mr-3 text-indigo-600 dark:text-indigo-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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Recent Activity
          </h3>
          <ul class="space-y-4">
            <li class="flex items-start">
              <div class="flex-shrink-0 w-2 h-2 rounded-full mt-2 mr-3 bg-purple-500"></div>
              <div>
                <p class="text-gray-700 dark:text-gray-300"><span class="font-semibold">Dev Team</span> updated 'Auth Module' to 90%.</p>
                <time datetime="2024-02-20" class="text-sm text-gray-500 dark:text-gray-400">1 hour ago</time>
              </div>
            </li>
            <li class="flex items-start">
              <div class="flex-shrink-0 w-2 h-2 rounded-full mt-2 mr-3 bg-orange-500"></div>
              <div>
                <p class="text-gray-700 dark:text-gray-300"><span class="font-semibold">QA Team</span> reported 2 critical bugs in 'Payment Gateway'.</p>
                <time datetime="2024-02-19" class="text-sm text-gray-500 dark:text-gray-400">Yesterday</time>
              </div>
            </li>
            <li class="flex items-start">
              <div class="flex-shrink-0 w-2 h-2 rounded-full mt-2 mr-3 bg-emerald-500"></div>
              <div>
                <p class="text-gray-700 dark:text-gray-300"><span class="font-semibold">Project Manager</span> approved 'Phase 1' completion.</p>
                <time datetime="2024-02-18" class="text-sm text-gray-500 dark:text-gray-400">2 days ago</time>
              </div>
            </li>
          </ul>
        </section>

        <!-- Team Members -->
        <section class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
            <svg class="w-7 h-7 mr-3 text-sky-600 dark:text-sky-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 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a3 3 0 015.356-1.857m7.5 1.857A2.75 2.75 0 1011 4.252A2.75 2.75 0 0017 17.009zM2 13V7a3 3 0 015.356-1.857M2 13v6a3 3 0 005.356 1.857"></path></svg>
            Core Team
          </h3>
          <div class="flex flex-wrap gap-3">
            <img class="w-12 h-12 rounded-full object-cover border-2 border-blue-500 dark:border-blue-400" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar of Sarah Johnson">
            <img class="w-12 h-12 rounded-full object-cover border-2 border-emerald-500 dark:border-emerald-400" src="https://randomuser.me/api/portraits/men/83.jpg" alt="Avatar of David Lee">
            <img class="w-12 h-12 rounded-full object-cover border-2 border-purple-500 dark:border-purple-400" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar of Emily White">
            <img class="w-12 h-12 rounded-full object-cover border-2 border-orange-500 dark:border-orange-400" src="https://randomuser.me/api/portraits/men/12.jpg" alt="Avatar of Michael Brown">
            <a href="#" class="w-12 h-12 rounded-full flex items-center justify-center bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 font-semibold text-lg border-2 border-gray-400 dark:border-gray-500 transition-colors hover:bg-gray-300 dark:hover:bg-gray-600" aria-label="View all team members">+5</a>
          </div>
        </section>
      </div>
    </div>
  </div>
</div>

Retro_Vintage_Pastel_Finance_Toast_Notifications

A complex, responsive toast notifications component with a retro/vintage aesthetic, pastel color scheme, designed for finance/banking interfaces. Includes dark mode support and multiple notification types.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-rose-100 p-4 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 font-mono relative overflow-hidden">

  <!-- Retro CRT Scanline Overlay (Visual Effect Only) -->
  <div class="fixed inset-0 pointer-events-none z-50 opacity-10 dark:opacity-5" style="background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); background-size: 100% 2px, 3px 100%;">
  </div>

  <div class="w-full max-w-sm md:max-w-md lg:max-w-lg mx-auto bg-violet-50 dark:bg-gray-800 rounded-lg shadow-xl border-4 border-fuchsia-300 dark:border-fuchsia-700 relative z-10 animate-fade-in-down">
    <div class="p-4 md:p-6 bg-pink-200 dark:bg-gray-900 rounded-t-sm border-b-2 border-fuchsia-400 dark:border-fuchsia-600">
      <div class="flex justify-between items-center">
        <h2 class="text-2xl font-bold text-fuchsia-800 dark:text-fuchsia-300 tracking-wider uppercase drop-shadow-sm">System Alerts</h2>
        <div class="flex space-x-1">
          <span class="block w-3 h-3 bg-red-400 rounded-full border border-red-500 shadow-inner"></span>
          <span class="block w-3 h-3 bg-yellow-400 rounded-full border border-yellow-500 shadow-inner"></span>
          <span class="block w-3 h-3 bg-lime-400 rounded-full border border-lime-500 shadow-inner"></span>
        </div>
      </div>
    </div>

    <div class="p-4 md:p-6 space-y-4">

      <!-- Success Notification -->
      <div class="flex items-start p-3 bg-lime-100 dark:bg-green-900 border-2 border-lime-400 dark:border-green-700 rounded-md shadow-inner transition-all duration-300 hover:scale-[1.02] hover:shadow-lg animate-slide-in-right">
        <div class="flex-shrink-0 text-lime-700 dark:text-green-300 text-xl md:text-2xl pt-0.5">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 md:h-7 md:w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </div>
        <div class="ml-3 flex-1">
          <p class="text-sm md:text-base font-semibold text-lime-800 dark:text-green-200">Transaction Complete!</p>
          <p class="text-xs md:text-sm text-lime-700 dark:text-green-300 mt-0.5">Your payment of <span class="font-bold">$1,200.00</span> to ACME Corp. was successful.</p>
        </div>
        <button class="flex-shrink-0 p-1 text-lime-600 dark:text-green-400 hover:text-lime-800 dark:hover:text-green-200 focus:outline-none focus:ring-2 focus:ring-lime-500 dark:focus:ring-green-500 rounded-full transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      <!-- Warning Notification -->
      <div class="flex items-start p-3 bg-yellow-100 dark:bg-yellow-900 border-2 border-yellow-400 dark:border-yellow-700 rounded-md shadow-inner transition-all duration-300 hover:scale-[1.02] hover:shadow-lg animate-slide-in-right animation-delay-200">
        <div class="flex-shrink-0 text-yellow-700 dark:text-yellow-300 text-xl md:text-2xl pt-0.5">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 md:h-7 md:w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.332 16c-.77 1.333.192 3 1.732 3z" />
          </svg>
        </div>
        <div class="ml-3 flex-1">
          <p class="text-sm md:text-base font-semibold text-yellow-800 dark:text-yellow-200">Attention Required</p>
          <p class="text-xs md:text-sm text-yellow-700 dark:text-yellow-300 mt-0.5">High balance on Savings Account: <span class="font-bold">$98,765.43</span>. Consider diversifying.</p>
        </div>
        <button class="flex-shrink-0 p-1 text-yellow-600 dark:text-yellow-400 hover:text-yellow-800 dark:hover:text-yellow-200 focus:outline-none focus:ring-2 focus:ring-yellow-500 dark:focus:ring-yellow-500 rounded-full transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      <!-- Error Notification -->
      <div class="flex items-start p-3 bg-red-100 dark:bg-red-900 border-2 border-red-400 dark:border-red-700 rounded-md shadow-inner transition-all duration-300 hover:scale-[1.02] hover:shadow-lg animate-slide-in-right animation-delay-400">
        <div class="flex-shrink-0 text-red-700 dark:text-red-300 text-xl md:text-2xl pt-0.5">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 md:h-7 md:w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </div>
        <div class="ml-3 flex-1">
          <p class="text-sm md:text-base font-semibold text-red-800 dark:text-red-200">Payment Failed!</p>
          <p class="text-xs md:text-sm text-red-700 dark:text-red-300 mt-0.5">Unable to process <span class="font-bold">$50.00</span> payment. Insufficient funds.</p>
        </div>
        <button class="flex-shrink-0 p-1 text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-200 focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-500 rounded-full transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      <!-- Info Notification with Avatar -->
      <div class="flex items-start p-3 bg-blue-100 dark:bg-blue-900 border-2 border-blue-400 dark:border-blue-700 rounded-md shadow-inner transition-all duration-300 hover:scale-[1.02] hover:shadow-lg animate-slide-in-right animation-delay-600">
        <div class="flex-shrink-0 text-blue-700 dark:text-blue-300 text-xl md:text-2xl pt-0.5">
          <img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-blue-500 dark:border-blue-400 shadow-md object-cover">
        </div>
        <div class="ml-3 flex-1">
          <p class="text-sm md:text-base font-semibold text-blue-800 dark:text-blue-200">New Message from Support</p>
          <p class="text-xs md:text-sm text-blue-700 dark:text-blue-300 mt-0.5">Your inquiry regarding account #<span class="font-semibold">XYS890</span> has been answered.</p>
          <a href="#" class="text-xs text-blue-600 dark:text-blue-400 hover:underline mt-1 block">View Details</a>
        </div>
        <button class="flex-shrink-0 p-1 text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-500 rounded-full transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

    </div>

    <div class="p-4 md:p-6 bg-pink-200 dark:bg-gray-900 rounded-b-sm border-t-2 border-fuchsia-400 dark:border-fuchsia-600 flex justify-center text-sm text-fuchsia-700 dark:text-fuchsia-400">
      <p>Notifications generated: <span class="font-bold">4</span></p>
    </div>

  </div>

  <!-- Tailwind JIT Animations (add to tailwind.config.js for full effect) -->
  <style>
    @keyframes fadeInDown {
      from { opacity: 0; transform: translateY(-20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .animate-fade-in-down {
      animation: fadeInDown 0.6s ease-out forwards;
    }

    @keyframes slideInRight {
      from { opacity: 0; transform: translateX(20px); }
      to { opacity: 1; transform: translateX(0); }
    }
    .animate-slide-in-right {
      animation: slideInRight 0.5s ease-out forwards;
    }
    .animation-delay-200 { animation-delay: 0.2s; }
    .animation-delay-400 { animation-delay: 0.4s; }
    .animation-delay-600 { animation-delay: 0.6s; }
  </style>
</div>

Login/Signup Component

A responsive login/signup component with a gradient ocean/blue theme, smooth transitions, and dark mode support, suitable for event and conference websites.

Open Preview

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-blue-100 to-blue-300 dark:from-gray-900 dark:to-blue-950 transition-all duration-500 ease-in-out font-sans">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden md:max-w-xl lg:max-w-4xl flex flex-col md:flex-row transition-all duration-500 ease-in-out transform hover:scale-105">
    <!-- Left Side: Image/Info Section (Visible on MD and larger) -->
    <div class="relative hidden md:flex md:w-1/2 lg:w-2/3 bg-gradient-to-br from-blue-600 to-indigo-800 dark:from-blue-900 dark:to-purple-950 p-8 flex-col justify-center items-center text-white transition-all duration-500 ease-in-out">
      <div class="absolute inset-0 bg-cover bg-center opacity-20" style="background-image: url('https://picsum.photos/800/600?random=1');"></div>
      <div class="relative z-10 text-center opacity-0 md:opacity-100 transition-opacity duration-1000 ease-in-out">
        <h2 class="text-4xl lg:text-5xl font-extrabold mb-4 drop-shadow-lg">Welcome to Horizon Events</h2>
        <p class="text-lg lg:text-xl font-light leading-relaxed">Connect, learn, and grow. Your gateway to unforgettable experiences and valuable networking opportunities.</p>
        <div class="mt-8">
          <button class="px-6 py-3 bg-white text-blue-700 dark:bg-gray-700 dark:text-white rounded-full font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-75">
            Learn More
          </button>
        </div>
      </div>
    </div>

    <!-- Right Side: Form Section -->
    <div class="w-full md:w-1/2 lg:w-1/3 p-6 sm:p-8 md:p-10 lg:p-12 flex flex-col justify-center bg-white dark:bg-gray-800 transition-all duration-500 ease-in-out">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-800 dark:text-blue-200 mb-6 text-center md:text-left transition-colors duration-300">
        <span class="block md:inline">Join Us</span> <span class="hidden md:inline text-blue-600 dark:text-blue-400">Now</span>
      </h2>

      <form class="space-y-6">
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 transition-colors duration-300">Email Address</label>
          <div class="mt-1">
            <input id="email" name="email" type="email" autocomplete="email" required
                   class="appearance-none block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-base bg-gray-50 dark:bg-gray-700 dark:text-white transition-all duration-300 ease-in-out placeholder:text-sm md:placeholder:text-base">
          </div>
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 transition-colors duration-300">Password</label>
          <div class="mt-1">
            <input id="password" name="password" type="password" autocomplete="current-password" required
                   class="appearance-none block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-base bg-gray-50 dark:bg-gray-700 dark:text-white transition-all duration-300 ease-in-out placeholder:text-sm md:placeholder:text-base">
          </div>
        </div>

        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <input id="remember-me" name="remember-me" type="checkbox"
                   class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:bg-gray-700 dark:border-gray-600 rounded cursor-pointer">
            <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300 transition-colors duration-300">Remember me</label>
          </div>

          <div class="text-sm">
            <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-300">Forgot your password?</a>
          </div>
        </div>

        <div>
          <button type="submit"
                  class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-base font-semibold text-white bg-gradient-to-r from-blue-600 to-indigo-700 dark:from-blue-700 dark:to-indigo-800 hover:from-blue-700 hover:to-indigo-800 dark:hover:from-blue-800 dark:hover:to-indigo-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-300 ease-in-out transform hover:scale-105">
            Sign In
          </button>
        </div>
      </form>

      <div class="mt-6 text-center">
        <p class="text-sm text-gray-600 dark:text-gray-400 transition-colors duration-300">
          New to Horizon Events?
          <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-300">Sign Up Today!</a>
        </p>
      </div>

      <div class="mt-8 relative">
        <div class="absolute inset-0 flex items-center">
          <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
        </div>
        <div class="relative flex justify-center text-sm">
          <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 transition-colors duration-300">Or continue with</span>
        </div>
      </div>

      <div class="mt-6 grid grid-cols-2 gap-3">
        <div>
          <button class="w-full inline-flex justify-center py-3 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition-all duration-300 ease-in-out transform hover:-translate-y-px">
            <img src="https://www.svgrepo.com/show/355037/google.svg" alt="Google icon" class="h-5 w-5 mr-2"/>
            Google
          </button>
        </div>
        <div>
          <button class="w-full inline-flex justify-center py-3 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition-all duration-300 ease-in-out transform hover:-translate-y-px">
            <img src="https://www.svgrepo.com/show/475656/facebook-color.svg" alt="Facebook icon" class="h-5 w-5 mr-2"/>
            Facebook
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

1 ... 51 52 53 54 55 ... 335