Search Components

Grid Layout

Content arrangement based on a grid system

Industrial_Juwel_Tones_Grid_Layout_Component

A responsive grid layout component for consulting/services, featuring an industrial aesthetic with jewel tone colors. Includes dark mode support and interactive elements.

Open Preview

                <section class="py-12 px-4 sm:px-6 lg:px-8 bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 font-sans">
  <div class="max-w-7xl mx-auto">
    <div class="text-center mb-12">
      <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight text-emerald-700 dark:text-emerald-400 mb-4">
        Our Consulting Expertise
      </h2>
      <p class="text-lg sm:text-xl text-gray-600 dark:text-gray-400 max-w-3xl mx-auto">
        Leveraging a deep understanding of industry dynamics, we deliver bespoke solutions that drive transformation and sustainable growth.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Service Card 1 -->
      <div class="relative group bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-2xl hover:border-emerald-600 dark:hover:border-emerald-500">
        <div class="p-6 sm:p-8 relative z-10">
          <div class="flex items-center justify-center w-16 h-16 bg-emerald-600 dark:bg-emerald-500 text-white rounded-full mb-6 mx-auto group-hover:scale-110 transition-transform duration-300">
            <svg class="h-8 w-8" 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="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-1.208-8.454-3.327M10 6L6 2m0 0L2 6m4-4v14m0-4 4 4m0 0 4-4m-4 4h14m-4-4 4-4m0 0 4 4"></path></svg>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-3 text-center">Strategic Planning</h3>
          <p class="text-gray-700 dark:text-gray-300 text-center leading-relaxed mb-6">
            We help define clear visions, actionable strategies, and robust roadmaps for future success.
          </p>
          <a href="#" class="block mx-auto text-center px-6 py-3 bg-emerald-600 dark:bg-emerald-500 text-white rounded-md font-semibold text-lg hover:bg-emerald-700 dark:hover:bg-emerald-600 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-75">
            Learn More
          </a>
        </div>
      </div>

      <!-- Service Card 2 -->
      <div class="relative group bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-2xl hover:border-ruby-600 dark:hover:border-ruby-500" style="--ruby-600: #DC2626; --ruby-500: #EF4444;">
        <div class="p-6 sm:p-8 relative z-10">
          <div class="flex items-center justify-center w-16 h-16 bg-red-600 dark:bg-red-500 text-white rounded-full mb-6 mx-auto group-hover:scale-110 transition-transform duration-300">
            <svg class="h-8 w-8" 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 19V6l12-3v13m-6 3H9M3 19V6l12-3m-6 3v13m-6 0V6.364v3.272m0 10.364V12a8 8 0 008 8h2.091M17 19H9M7 6H4a1 1 0 00-1 1v12a1 1 0 001 1h16a1 1 0 001-1V7a1 1 0 00-1-1h-3.398m-7.798 0V5.091c0-.5-.41-.909-.909-.909h-.182c-.5 0-.909.41-.909.909V6m-2.182 0l-2.062 4.4L4 12V7c0-.55.45-1 1-1h2.182zm1.636 0L12 9.091L13.182 6m2.182 0l2.062 4.4L20 12V7c0-.55-.45-1-1-1h-2.182z"></path></svg>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-3 text-center">Operational Excellence</h3>
          <p class="text-gray-700 dark:text-gray-300 text-center leading-relaxed mb-6">
            Optimize processes, streamline workflows, and enhance productivity across your organization.
          </p>
          <a href="#" class="block mx-auto text-center px-6 py-3 bg-red-600 dark:bg-red-500 text-white rounded-md font-semibold text-lg hover:bg-red-700 dark:hover:bg-red-600 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75">
            Explore Services
          </a>
        </div>
      </div>

      <!-- Service Card 3 -->
      <div class="relative group bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-2xl hover:border-sapphire-600 dark:hover:border-sapphire-500" style="--sapphire-600: #2563EB; --sapphire-500: #3B82F6;">
        <div class="p-6 sm:p-8 relative z-10">
          <div class="flex items-center justify-center w-16 h-16 bg-blue-600 dark:bg-blue-500 text-white rounded-full mb-6 mx-auto group-hover:scale-110 transition-transform duration-300">
            <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16v4m-2-2h4M9 9l3 3m0 0l3-3m-3 3l-3 3m3-3v8m4-12h4m-2 2v4m1-13.438V4.57c0-0.342 0.28-0.627 0.622-0.627h.06c0.342 0 0.622 0.285 0.622 0.627v.868M6.5 17L12 22l5.5-5M9 7h6m-1 7h2m-1 6H9m6-10V4.57c0-0.342 0.28-0.627 0.622-0.627h.06c0.342 0 0.622 0.285 0.622 0.627v.868"></path></svg>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-3 text-center">Digital Transformation</h3>
          <p class="text-gray-700 dark:text-gray-300 text-center leading-relaxed mb-6">
            Navigate the digital landscape with confidence, implementing cutting-edge technologies.
          </p>
          <a href="#" class="block mx-auto text-center px-6 py-3 bg-blue-600 dark:bg-blue-500 text-white rounded-md font-semibold text-lg hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
            Start Your Journey
          </a>
        </div>
      </div>

      <!-- Service Card 4 (Horizontal, Image-backed) -->
      <div class="md:col-span-2 relative group bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-2xl hover:border-purple-600 dark:hover:border-purple-500">
        <img src="https://picsum.photos/id/160/1200/600" alt="Team Collaboration" class="absolute inset-0 w-full h-full object-cover opacity-20 dark:opacity-10 group-hover:scale-105 transition-transform duration-500">
        <div class="p-6 sm:p-8 flex flex-col md:flex-row items-center relative z-10">
          <div class="flex-shrink-0 mb-6 md:mb-0 md:mr-8">
            <div class="flex items-center justify-center w-20 h-20 bg-purple-600 dark:bg-purple-500 text-white rounded-full mx-auto md:mx-0 group-hover:rotate-12 transition-transform duration-300">
              <svg class="h-10 w-10" 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-2a4 4 0 014-4h12.5M16 11H4m10 0a2 2 0 100-4m-10 4a2 2 0 100-4m-2 4h4m-2-4v4m-2 2L9 20l-4-4

Watercolor_Artistic_Grid_Layout_Consulting

A simple, responsive grid layout component for consulting/services, featuring a soft watercolor/artistic design with cool neutrals and dark mode support.

Open Preview

                <div class="font-sans bg-gradient-to-br from-blue-50 to-indigo-100 text-gray-800 dark:from-gray-900 dark:to-gray-800 dark:text-gray-200 p-6 md:p-12 lg:p-16
            relative overflow-hidden group">
  <!-- Background artistic overlay for light mode -->
  <div class="absolute inset-0 z-0 opacity-40 dark:opacity-0 pointer-events-none"
    style="background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2020/svg" viewBox="0 0 1000 1000"><filter id="blur" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="40" /></filter><circle cx="200" cy="300" r="150" fill="rgb(199, 210, 254)" filter="url(%23blur)" /><circle cx="700" cy="500" r="200" fill="rgb(224, 231, 255)" filter="url(%23blur)" /><circle cx="400" cy="750" r="100" fill="rgb(165, 180, 252)" filter="url(%23blur)" /></svg>'); background-repeat: no-repeat; background-size: cover; background-position: center;"></div>

  <!-- Background artistic overlay for dark mode -->
  <div class="absolute inset-0 z-0 opacity-0 dark:opacity-30 pointer-events-none"
    style="background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><filter id="blur" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="40" /></filter><circle cx="200" cy="300" r="150" fill="rgb(31, 41, 55)" filter="url(%23blur)" /><circle cx="700" cy="500" r="200" fill="rgb(55, 65, 81)" filter="url(%23blur)" /><circle cx="400" cy="750" r="100" fill="rgb(17, 24, 39)" filter="url(%23blur)" /></svg>'); background-repeat: no-repeat; background-size: cover; background-position: center;"></div>

  <div class="relative z-10 max-w-7xl mx-auto py-8 lg:py-12">
    <header class="text-center mb-12">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-4
                 text-gray-900 dark:text-gray-50 drop-shadow-lg leading-tight">
        Our Consulting Expertise
      </h2>
      <p class="text-lg sm:text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
        Empowering your business with strategic insights and tailored solutions.
      </p>
    </header>

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

      <!-- Service Card 1 -->
      <article class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300
                      overflow-hidden border border-gray-200 dark:border-gray-700
                      transform hover:-translate-y-1 group-hover:scale-[0.99] group-hover:first:scale-100
                      relative pb-6">
        <div class="absolute inset-0 pointer-events-none"
             style="background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.1">
             <rect x="0" y="0" width="100" height="100" fill="lightgray"/><circle cx="50" cy="50" r="40" fill="lightgray" stroke="white" stroke-width="2"/></svg>');
             background-size: 150px; background-repeat: no-repeat; background-position: center top;">
        </div>
        <div class="relative p-6 flex flex-col items-center text-center">
          <img src="https://picsum.photos/id/1015/300/200" alt="Strategy Development" class="rounded-lg mb-4 w-full h-48 object-cover object-center border border-gray-100 dark:border-gray-600 shadow-sm">
          <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100">Strategy Development</h3>
          <p class="text-gray-600 dark:text-gray-400 mb-4 flex-grow">
            Crafting innovative strategies to navigate complex markets and achieve sustainable growth.
          </p>
          <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-medium">
            Learn More <span aria-hidden="true">&rarr;</span>
          </a>
        </div>
      </article>

      <!-- Service Card 2 -->
      <article class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300
                      overflow-hidden border border-gray-200 dark:border-gray-700
                      transform hover:-translate-y-1 group-hover:scale-[0.99] group-hover:first:scale-100
                      relative pb-6">
        <div class="absolute inset-0 pointer-events-none"
             style="background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.1">
             <rect x="0" y="0" width="100" height="100" fill="lightgray"/><path d="M20 50 L80 50 M50 20 L50 80" stroke="white" stroke-width="2"/></svg>');
             background-size: 150px; background-repeat: no-repeat; background-position: center top;">
        </div>
        <div class="relative p-6 flex flex-col items-center text-center">
          <img src="https://picsum.photos/id/1041/300/200" alt="Operations Optimization" class="rounded-lg mb-4 w-full h-48 object-cover object-center border border-gray-100 dark:border-gray-600 shadow-sm">
          <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100">Operations Optimization</h3>
          <p class="text-gray-600 dark:text-gray-400 mb-4 flex-grow">
            Streamlining processes and enhancing efficiency to maximize your operational performance.
          </p>
          <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-medium">
            Learn More <span aria-hidden="true">&rarr;</span>
          </a>
        </div>
      </article>

      <!-- Service Card 3 -->
      <article class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300
                      overflow-hidden border border-gray-200 dark:border-gray-700
                      transform hover:-translate-y-1 group-hover:scale-[0.99] group-hover:first:scale-100
                      relative pb-6">
        <div class="absolute inset-0 pointer-events-none"
             style="background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.1">
             <rect x="0" y="0" width="100" height="100" fill="lightgray"/><path d="M10 90 L90 10 L80 90 L10 90 Z" fill="lightgray" stroke="white" stroke-width="2"/></svg>');
             background-size: 150px; background-repeat: no-repeat; background-position: center top;">
        </div>
        <div class="relative p-6 flex flex-col items-center text-center">
          <img src="https://picsum.photos/id/1060/300/200" alt="Digital Transformation" class="rounded-lg mb-4 w-full h-48 object-cover object-center border border-gray-100 dark:border-gray-600 shadow-sm">
          <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100">Digital Transformation</h3>
          <p class="text-gray-600 dark:text-gray-400 mb-4 flex-grow">
            Guiding your journey through digital innovation, from adoption to full integration.
          </p>
          <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-medium">
            Learn More <span aria-hidden="true">&rarr;</span>
          </a>
        </div>
      </article>

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

Gradient Grid Booking Layout

A complex, responsive grid layout component for booking/reservation systems, featuring triadic color gradients, smooth transitions, and dark mode support. Designed with multiple interactive elements.

Open Preview

                <div class="min-h-screen bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100 transition-colors duration-500 p-4 sm:p-6 md:p-8 lg:p-12 font-sans">

  <!-- Header Section -->
  <header class="mb-8 text-center">
    <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-red-500 via-yellow-400 to-emerald-500 dark:from-red-400 dark:via-yellow-300 dark:to-emerald-400 pb-2">
      Book Your Next Adventure
    </h1>
    <p class="mt-2 text-lg sm:text-xl text-gray-600 dark:text-gray-300">Seamless reservations, unforgettable experiences.</p>
  </header>

  <!-- Main Content Grid -->
  <main class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6 sm:gap-8">

    <!-- Left Sidebar / Navigation (Col 1 md, Col 1-2 lg) -->
    <aside class="md:col-span-1 lg:col-span-2 p-6 rounded-3xl shadow-xl transform transition-all duration-300 border border-transparent hover:border-gray-200 dark:hover:border-gray-700 bg-gradient-to-br from-indigo-50 dark:from-gray-800 to-white dark:to-gray-900 group relative overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-br from-indigo-100 via-purple-100 to-green-100 dark:from-indigo-950 dark:via-purple-950 dark:to-green-950 opacity-20 group-hover:opacity-40 transition-opacity duration-500 blur-xl w-full h-full scale-110"></div>
      <div class="relative z-10">
        <h2 class="text-3xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-purple-500 dark:from-pink-400 dark:to-purple-400">
          Categories
        </h2>
        <ul class="space-y-4">
          <li>
            <a href="#" class="flex items-center p-3 rounded-xl transition-all duration-300 transform hover:scale-[1.02] hover:bg-gradient-to-r hover:from-purple-100 hover:to-indigo-100 dark:hover:from-purple-900 dark:hover:to-indigo-900 group-hover:shadow-md">
              <svg class="w-7 h-7 text-purple-600 dark:text-purple-400 mr-4 group-hover:scale-110 transition-transform duration-300" 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.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m-.707 5.657l.707.707M18.364 5.636l.707-.707M6.879 7.121A4 4 0 0112 5c2.21 0 4 1.79 4 4 0 1.27-.492 2.453-1.386 3.348L12 21l-2.614-7.652A4 4 0 018 9c0-2.21 1.79-4 4-4z"></path></svg>
              <span class="text-lg font-medium text-gray-800 dark:text-gray-200 group-hover:text-purple-700 dark:group-hover:text-purple-300">Adventures</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center p-3 rounded-xl transition-all duration-300 transform hover:scale-[1.02] hover:bg-gradient-to-r hover:from-purple-100 hover:to-indigo-100 dark:hover:from-purple-900 dark:hover:to-indigo-900 group-hover:shadow-md">
              <svg class="w-7 h-7 text-yellow-600 dark:text-yellow-400 mr-4 group-hover:scale-110 transition-transform duration-300" 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="M3 21v-4a2 2 0 012-2h4a2 2 0 012 2v4m-6 0h6m-6 0v-4m0-4.004H8m0 0v-2.004S10 10 12 10s4-2 4-2v2.004m-4-2.004V8m.004-2.004h-.008m.008 2.004h-.008m0 0v2.004M15 17h6l-3-3m0-4.004S18 10 16 10s-4-2-4-2v2.004M12 21h9m-9-4.004H15m0 0v-2.004S17 10 19 10s4-2 4-2v2.004m-4-2.004V8"></path></svg>
              <span class="text-lg font-medium text-gray-800 dark:text-gray-200 group-hover:text-yellow-700 dark:group-hover:text-yellow-300">Experiences</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center p-3 rounded-xl transition-all duration-300 transform hover:scale-[1.02] hover:bg-gradient-to-r hover:from-purple-100 hover:to-indigo-100 dark:hover:from-purple-900 dark:hover:to-indigo-900 group-hover:shadow-md">
              <svg class="w-7 h-7 text-emerald-600 dark:text-emerald-400 mr-4 group-hover:scale-110 transition-transform duration-300" 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="M8 12h.01M12 12h.01M16 12h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="text-lg font-medium text-gray-800 dark:text-gray-200 group-hover:text-emerald-700 dark:group-hover:text-emerald-300">Classes & Workshops</span>
            </a>
          </li>
          <!-- Add more categories -->
        </ul>
        <div class="mt-8">
          <h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-red-500 to-orange-500 dark:from-red-400 dark:to-orange-400 mb-4">Popular Searches</h3>
          <div class="flex flex-wrap gap-2">
            <span class="px-4 py-2 rounded-full text-sm font-semibold bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-200 transition-colors duration-300 hover:bg-red-200 dark:hover:bg-red-800 cursor-pointer shadow-sm">Hiking</span>
            <span class="px-4 py-2 rounded-full text-sm font-semibold bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-200 transition-colors duration-300 hover:bg-yellow-200 dark:hover:bg-yellow-800 cursor-pointer shadow-sm">Spa Days</span>
            <span class="px-4 py-2 rounded-full text-sm font-semibold bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-200 transition-colors duration-300 hover:bg-emerald-200 dark:hover:bg-emerald-800 cursor-pointer shadow-sm">Cooking</span>
            <span class="px-4 py-2 rounded-full text-sm font-semibold bg-indigo-100 text-indigo-700 dark:bg-indigo-900 dark:text-indigo-200 transition-colors duration-300 hover:bg-indigo-200 dark:hover:bg-indigo-800 cursor-pointer shadow-sm">Photography</span>
          </div>
        </div>
      </div>
    </aside>

    <!-- Main Content Area (Central Cards) (Col 1-3 md, Col 3-5 lg) -->
    <section class="md:col-span-2 lg:col-span-3 space-y-6">

      <!-- Search/Filter Bar -->
      <div class="bg-gradient-to-r from-red-50 via-yellow-50 to-emerald-50 dark:from-gray-800 dark:via-gray-850 dark:to-gray-900 p-5 rounded-3xl shadow-xl flex flex-col sm:flex-row items-center justify-between gap-4 transition-all duration-300 group relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-r from-red-100 via-yellow-100 to-emerald-100 dark:from-red-950 dark:via-yellow-950 dark:to-emerald-950 opacity-10 group-hover:opacity-20 transition-opacity duration-500 blur-xl w-full h-full scale-110"></div>
        <div class="relative z-10 w-full flex flex-col sm:flex-row gap-4">
          <input type="text" placeholder="Search activities or locations..." class="flex-grow p-3 rounded-full bg-white dark:bg-gray-700 border border-transparent focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-600 focus:border-transparent transition-all duration-300 shadow-inner placeholder:text-gray-500 dark:placeholder:text-gray-400" />
          <button class="px-6 py-3 bg-gradient-to-r from-red-600 to-yellow-600 dark:from-red-700 dark:to-yellow-700 text-white font-bold rounded-full shadow-lg hover:shadow-xl transform hover:scale-[1.02] active:scale-95 transition-all duration-300 flex items-center justify-center">
            <svg class="w-6 h-6 mr-2" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
            Search
          </button>
        </div>
      </div>

      <!-- Booking Cards Grid -->
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-fr">

        <!-- Card 1 -->
        <article class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-500 overflow-hidden relative group border border-transparent hover:border-red-200 dark:hover:border-red-700">
          <div class="absolute inset-0 bg-gradient-to-br from-red-100 to-red-50 dark:from-red-950 dark:to-red-900 opacity-10 group-hover:opacity-20 transition-opacity duration-500 blur-xl w-full h-full scale-110"></div>
          <img src="https://picsum.photos/400/300?random=1" alt="Mountain Hiking" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-105 relative z-0" loading="lazy">
          <div class="p-5 relative z-10">
            <h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-red-600 to-orange-600 dark:from-red-400 dark:to-orange-400 mb-2">Alaskan Glacier Trek</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Experience the breathtaking beauty of massive glaciers.</p>
            <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
              <svg class="w-5 h-5 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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.683-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
              <span>4.9 (245 reviews)</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-3xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-emerald-600 to-teal-600 dark:from-emerald-400 dark:to-teal-400">$299</span>
              <button class="px-5 py-2 bg-gradient-to-r from-red-500 to-yellow-500 dark:from-red-600 dark:to-yellow-600 text-white rounded-full font-semibold shadow-md hover:shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-300">
                Book Now
              </button>
            </div>
          </div>
        </article>

        <!-- Card 2 -->
        <article class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-500 overflow-hidden relative group border border-transparent hover:border-yellow-200 dark:hover:border-yellow-700">
          <div class="absolute inset-0 bg-gradient-to-br from-yellow-100 to-yellow-50 dark:from-yellow-950 dark:to-yellow-900 opacity-10 group-hover:opacity-20 transition-opacity duration-500 blur-xl w-full h-full scale-110"></div>
          <img src="https://picsum.photos/400/300?random=2" alt="Cooking Class" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-105 relative z-0" loading="lazy">
          <div class="p-5 relative z-10">
            <h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-red-600 to-yellow-600 dark:from-red-400 dark:to-yellow-400 mb-2">Authentic Italian Cooking</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Master the art of pasta making and classic sauces.</p>
            <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
              <svg class="w-5 h-5 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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.683-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
              <span>4.7 (180 reviews)</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-3xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-emerald-600 to-teal-600 dark:from-emerald-400 dark:to-teal-400">$85</span>
              <button class="px-5 py-2 bg-gradient-to-r from-red-500 to-yellow-500 dark:from-red-600 dark:to-yellow-600 text-white rounded-full font-semibold shadow-md hover:shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-300">
                Book Now
              </button>
            </div>
          </div>
        </article>

        <!-- Card 3 -->
        <article class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-500 overflow-hidden relative group border border-transparent hover:border-emerald-200 dark:hover:border-emerald-700">
          <div class="absolute inset-0 bg-gradient-to-br from-emerald-100 to-emerald-50 dark:from-emerald-950 dark:to-emerald-900 opacity-10 group-hover:opacity-20 transition-opacity duration-500 blur-xl w-full h-full scale-110"></div>
          <img src="https://picsum.photos/400/300?random=3" alt="City Tour" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-105 relative z-0" loading="lazy">
          <div class="p-5 relative z-10">
            <h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-red-600 to-emerald-600 dark:from-red-400 dark:to-emerald-400 mb-2">Historic City Walking Tour</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Explore ancient landmarks and hidden gems with a local guide.</p>
            <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
              <svg class="w-5 h-5 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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.683-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
              <span>4.8 (310 reviews)</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-3xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-emerald-600 to-teal-600 dark:from-emerald-400 dark:to-teal-400">$45</span>
              <button class="px-5 py-2 bg-gradient-to-r from-emerald-500 to-teal-500 dark:from-emerald-600 dark:to-teal-600 text-white rounded-full font-semibold shadow-md hover:shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-300">
                Book Now
              </button>
            </div>
          </div>
        </article>

        <!-- Card 4 (Hidden on smaller screens until lg) -->
        <article class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-500 overflow-hidden hidden lg:block relative group border border-transparent hover:border-violet-200 dark:hover:border-violet-700">
          <div class="absolute inset-0 bg-gradient-to-br from-violet-100 to-violet-50 dark:from-violet-950 dark:to-violet-900 opacity-10 group-hover:opacity-20 transition-opacity duration-500 blur-xl w-full h-full scale-110"></div>
          <img src="https://picsum.photos/400/300?random=4" alt="Yoga Retreat" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-105 relative z-0" loading="lazy">
          <div class="p-5 relative z-10">
            <h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-indigo-600 dark:from-purple-400 dark:to-indigo-400 mb-2">Serene Beach Yoga Retreat</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Rejuvenate your mind and body by the ocean.</p>
            <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
              <svg class="w-5 h-5 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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.683-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
              <span>5.0 (98 reviews)</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-3xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-emerald-600 to-teal-600 dark:from-emerald-400 dark:to-teal-400">$599</span>
              <button class="px-5 py-2 bg-gradient-to-r from-purple-500 to-indigo-500 dark:from-purple-600 dark:to-indigo-600 text-white rounded-full font-semibold shadow-md hover:shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-300">
                Book Now
              </button>
            </div>
          </div>
        </article>

        <!-- Card 5 (Hidden on smaller screens until lg) -->
        <article class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-500 overflow-hidden hidden lg:block relative group border border-transparent hover:border-blue-200 dark:hover:border-blue-700">
          <div class="absolute inset-0 bg-gradient-to-br from-blue-100 to-blue-50 dark:from-blue-950 dark:to-blue-900 opacity-10 group-hover:opacity-20 transition-opacity duration-500 blur-xl w-full h-full scale-110"></div>
          <img src="https://picsum.photos/400/300?random=5" alt="Scuba Diving" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-105 relative z-0" loading="lazy">
          <div class="p-5 relative z-10">
            <h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-cyan-600 dark:from-blue-400 dark:to-cyan-400 mb-2">Deep Sea Scuba Diving</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Discover vibrant marine life in crystal clear waters.</p>
            <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
              <svg class="w-5 h-5 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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.683-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
              <span>4.6 (155 reviews)</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-3xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-emerald-600 to-teal-600 dark:from-emerald-400 dark:to-teal-400">$180</span>
              <button class="px-5 py-2 bg-gradient-to-r from-blue-500 to-cyan-500 dark:from-blue-600 dark:to-cyan-600 text-white rounded-full font-semibold shadow-md hover:shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-300">
                Book Now
              </button>
            </div>
          </div>
        </article>

        <!-- 'Load More' or Pagination -->
        <div class="md:col-span-3 lg:col-span-5 flex justify-center mt-4 w-full">
          <button class="px-8 py-4 bg-gradient-to-r from-yellow-500 to-emerald-500 dark:from-yellow-600 dark:to-emerald-600 text-white font-bold rounded-full shadow-lg hover:shadow-xl transform hover:scale-[1.02] active:scale-95 transition-all duration-300 flex items-center justify-center">
            <svg class="w-6 h-6 mr-2" 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 4v5h.582m15.356 2A8.001 8.001 0 004 16.087v-2.072a2 2 0 012-2h4a2 2 0 002-2V6h2v2h4a2 2 0 012 2v2a8.001 8.001 0 00-15.356 2M4 20h16"></path></svg>
            Load More Activities
          </button>
        </div>

      </div>
    </section>

  </main>

  <!-- Footer Section (Optional, could be simplified) -->
  <footer class="mt-12 text-center text-gray-500 dark:text-gray-400 text-sm">
    <p>&copy; 2023 AdventureBook. All rights reserved.</p>
  </footer>

</div>

Entertainment Grid Layout Component

A clean, minimalist grid layout inspired by Swiss/International Typography for entertainment and media platforms. Features a triadic color scheme, responsiveness, and dark mode support.

Open Preview

                <div class="bg-white dark:bg-gray-900 py-8 px-4 sm:px-6 lg:px-8 font-sans">
  <div class="container mx-auto">
    <div class="mb-8 text-center">
      <h2 class="text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 dark:text-white mb-2">
        Featured Entertainment
      </h2>
      <p class="mt-2 text-lg leading-8 text-gray-600 dark:text-gray-300">
        Explore our curated selection of movies, shows, and more.
      </p>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <!-- Item 1 -->
      <div class="relative group rounded-lg overflow-hidden shadow-lg dark:shadow-xl bg-orange-500 bg-opacity-10 dark:bg-orange-900 dark:bg-opacity-20 border border-orange-500 border-opacity-20 dark:border-orange-900 dark:border-opacity-30 p-2">
        <img src="https://picsum.photos/400/250?random=1" alt="Movie Still 1" class="w-full h-48 object-cover rounded-md transition-transform duration-300 group-hover:scale-105">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-orange-700 dark:text-orange-300 mb-1">The Grand Adventure</h3>
          <p class="text-sm text-gray-700 dark:text-gray-400 mb-3">A captivating journey through uncharted territories. (2023)</p>
          <div class="flex justify-between items-center">
            <span class="text-sm font-medium text-orange-600 dark:text-orange-400">⭐ 4.8</span>
            <a href="#" class="text-sm font-medium text-orange-700 dark:text-orange-300 hover:text-orange-900 dark:hover:text-orange-100 transition-colors duration-200">Watch Now &rarr;</a>
          </div>
        </div>
      </div>

      <!-- Item 2 -->
      <div class="relative group rounded-lg overflow-hidden shadow-lg dark:shadow-xl bg-green-500 bg-opacity-10 dark:bg-green-900 dark:bg-opacity-20 border border-green-500 border-opacity-20 dark:border-green-900 dark:border-opacity-30 p-2">
        <img src="https://picsum.photos/400/250?random=2" alt="Movie Still 2" class="w-full h-48 object-cover rounded-md transition-transform duration-300 group-hover:scale-105">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-green-700 dark:text-green-300 mb-1">City of Echoes</h3>
          <p class="text-sm text-gray-700 dark:text-gray-400 mb-3">A thrilling mystery unfolding in a futuristic cityscape. (2022)</p>
          <div class="flex justify-between items-center">
            <span class="text-sm font-medium text-green-600 dark:text-green-400">⭐ 4.5</span>
            <a href="#" class="text-sm font-medium text-green-700 dark:text-green-300 hover:text-green-900 dark:hover:text-green-100 transition-colors duration-200">Watch Now &rarr;</a>
          </div>
        </div>
      </div>

      <!-- Item 3 -->
      <div class="relative group rounded-lg overflow-hidden shadow-lg dark:shadow-xl bg-purple-500 bg-opacity-10 dark:bg-purple-900 dark:bg-opacity-20 border border-purple-500 border-opacity-20 dark:border-purple-900 dark:border-opacity-30 p-2">
        <img src="https://picsum.photos/400/250?random=3" alt="Movie Still 3" class="w-full h-48 object-cover rounded-md transition-transform duration-300 group-hover:scale-105">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-1">Quantum Leap Series</h3>
          <p class="text-sm text-gray-700 dark:text-gray-400 mb-3">Science fiction drama exploring alternate dimensions. (Series)</p>
          <div class="flex justify-between items-center">
            <span class="text-sm font-medium text-purple-600 dark:text-purple-400">⭐ 4.9</span>
            <a href="#" class="text-sm font-medium text-purple-700 dark:text-purple-300 hover:text-purple-900 dark:hover:text-purple-100 transition-colors duration-200">Watch Now &rarr;</a>
          </div>
        </div>
      </div>

      <!-- Item 4 -->
      <div class="relative group rounded-lg overflow-hidden shadow-lg dark:shadow-xl bg-orange-500 bg-opacity-10 dark:bg-orange-900 dark:bg-opacity-20 border border-orange-500 border-opacity-20 dark:border-orange-900 dark:border-opacity-30 p-2">
        <img src="https://picsum.photos/400/250?random=4" alt="Movie Still 4" class="w-full h-48 object-cover rounded-md transition-transform duration-300 group-hover:scale-105">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-orange-700 dark:text-orange-300 mb-1">The Whispering Woods</h3>
          <p class="text-sm text-gray-700 dark:text-gray-400 mb-3">An eerie tale of supernatural events in a secluded forest. (2023)</p>
          <div class="flex justify-between items-center">
            <span class="text-sm font-medium text-orange-600 dark:text-orange-400">⭐ 4.3</span>
            <a href="#" class="text-sm font-medium text-orange-700 dark:text-orange-300 hover:text-orange-900 dark:hover:text-orange-100 transition-colors duration-200">Watch Now &rarr;</a>
          </div>
        </div>
      </div>

      <!-- Item 5 -->
      <div class="relative group rounded-lg overflow-hidden shadow-lg dark:shadow-xl bg-green-500 bg-opacity-10 dark:bg-green-900 dark:bg-opacity-20 border border-green-500 border-opacity-20 dark:border-green-900 dark:border-opacity-30 p-2">
        <img src="https://picsum.photos/400/250?random=5" alt="Movie Still 5" class="w-full h-48 object-cover rounded-md transition-transform duration-300 group-hover:scale-105">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-green-700 dark:text-green-300 mb-1">Cosmic Symphony</h3>
          <p class="text-sm text-gray-700 dark:text-gray-400 mb-3">A documentary exploring the mysteries of the universe. (2021)</p>
          <div class="flex justify-between items-center">
            <span class="text-sm font-medium text-green-600 dark:text-green-400">⭐ 4.7</span>
            <a href="#" class="text-sm font-medium text-green-700 dark:text-green-300 hover:text-green-900 dark:hover:text-green-100 transition-colors duration-200">Watch Now &rarr;</a>
          </div>
        </div>
      </div>

      <!-- Item 6 -->
      <div class="relative group rounded-lg overflow-hidden shadow-lg dark:shadow-xl bg-purple-500 bg-opacity-10 dark:bg-purple-900 dark:bg-opacity-20 border border-purple-500 border-opacity-20 dark:border-purple-900 dark:border-opacity-30 p-2">
        <img src="https://picsum.photos/400/250?random=6" alt="Movie Still 6" class="w-full h-48 object-cover rounded-md transition-transform duration-300 group-hover:scale-105">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-1">The Last Code</h3>
          <p class="text-sm text-gray-700 dark:text-gray-400 mb-3">A cyberpunk thriller set in a dystopian future. (2024)</p>
          <div class="flex justify-between items-center">
            <span class="text-sm font-medium text-purple-600 dark:text-purple-400">⭐ 4.6</span>
            <a href="#" class="text-sm font-medium text-purple-700 dark:text-purple-300 hover:text-purple-900 dark:hover:text-purple-100 transition-colors duration-200">Watch Now &rarr;</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

ArtDecoEducationalGrid

A complex, responsive grid layout component for educational platforms, styled with Art Deco geometric patterns and rich autumn colors. Includes dark mode support and multiple interactive elements.

Open Preview

                <div class="p-4 sm:p-8 bg-zinc-100 dark:bg-zinc-900 font-serif text-zinc-900 dark:text-zinc-50 min-h-screen">
  <div class="max-w-7xl mx-auto space-y-12">

    <!-- Header Section -->
    <header class="text-center space-y-4 pt-8 pb-12 rounded-xl border-4 border-amber-600 dark:border-amber-400 bg-gradient-to-br from-amber-100 to-amber-200 dark:from-zinc-800 dark:to-zinc-800/50 shadow-lg dark:shadow-xl shadow-amber-300/30 dark:shadow-amber-900/50 relative overflow-hidden">
      <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/art-deco.png')] opacity-20 dark:opacity-10 pointer-events-none"></div>
      <h1 class="relative z-10 text-5xl sm:text-6xl font-extrabold text-amber-900 uppercase tracking-widest leading-tight drop-shadow-lg dark:text-amber-300">
        The Grand Hall of Knowledge
      </h1>
      <p class="relative z-10 text-xl sm:text-2xl font-light text-amber-800 dark:text-amber-200 mt-4">
        Explore the Foundations of Thought and Creativity
      </p>
      <div class="relative z-10 mt-8">
        <button class="px-8 py-4 bg-amber-700 hover:bg-amber-800 text-white font-bold text-lg rounded-full shadow-lg transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-amber-500/50 dark:bg-amber-500 dark:hover:bg-amber-600 dark:focus:ring-amber-400/50">
          Start Your Journey
        </button>
      </div>
    </header>

    <!-- Main Content Grid -->
    <main class="grid grid-cols-1 md:grid-cols-3 gap-8">

      <!-- Featured Course Card -->
      <section class="md:col-span-2 bg-gradient-to-br from-red-800 to-red-900 dark:from-red-900 dark:to-red-950 p-6 sm:p-8 rounded-xl shadow-2xl border-4 border-amber-500 dark:border-amber-400 relative overflow-hidden group">
        <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/argyle.png')] opacity-10 dark:opacity-5 pointer-events-none"></div>
        <div class="relative z-10 flex flex-col sm:flex-row gap-6 items-center">
          <img src="https://picsum.photos/seed/course1/400/300" alt="Featured Course" class="w-full sm:w-2/5 md:w-1/2 lg:w-2/5 aspect-video object-cover rounded-lg border-2 border-amber-300 shadow-md transform group-hover:scale-102 transition duration-300">
          <div class="flex-1 text-white">
            <h2 class="text-4xl font-bold mb-3 text-amber-200 leading-tight drop-shadow-md">Mastering Art Deco Design Principles</h2>
            <p class="text-lg text-amber-100 mb-4 line-clamp-3">Dive deep into the golden age of Art Deco, exploring its iconic geometric forms, opulent materials, and timeless elegance.</p>
            <ul class="text-amber-50 text-sm space-y-1 mb-4">
              <li><strong class="text-amber-200">Lectures:</strong> 12</li>
              <li><strong class="text-amber-200">Duration:</strong> 18 Hours</li>
              <li><strong class="text-amber-200">Instructor:</strong> Dr. Eleanor Vance</li>
            </ul>
            <a href="#" class="inline-block px-6 py-3 bg-amber-600 hover:bg-amber-700 text-white font-semibold rounded-full shadow-lg transition duration-300 ease-in-out transform hover:translate-y-1 focus:outline-none focus:ring-4 focus:ring-amber-300/50 dark:bg-amber-500 dark:hover:bg-amber-600 dark:focus:ring-amber-400/50">
              Enroll Now
            </a>
          </div>
        </div>
      </section>

      <!-- Quick Links / Navigation -->
      <nav class="bg-zinc-200 dark:bg-zinc-800 p-6 rounded-xl shadow-lg border-4 border-amber-600 dark:border-amber-400 relative overflow-hidden">
        <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/crissxcross.png')] opacity-20 dark:opacity-10"></div>
        <h2 class="relative z-10 text-3xl font-bold text-amber-900 dark:text-amber-300 mb-6 text-center">Quick Access</h2>
        <ul class="relative z-10 space-y-4">
          <li>
            <a href="#" class="flex items-center p-4 bg-zinc-300 dark:bg-zinc-700 rounded-lg transform hover:scale-105 transition duration-200 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-amber-500 border border-zinc-400 dark:border-zinc-600">
              <svg class="h-6 w-6 mr-3 text-amber-700 dark:text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
              <span class="text-lg font-semibold text-zinc-800 dark:text-zinc-100">Browse Courses</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center p-4 bg-zinc-300 dark:bg-zinc-700 rounded-lg transform hover:scale-105 transition duration-200 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-amber-500 border border-zinc-400 dark:border-zinc-600">
              <svg class="h-6 w-6 mr-3 text-amber-700 dark:text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zm-4 4a2 2 0 100 4 2 2 0 000-4zm-8-2a2 2 0 11-4 0 2 2 0 014 0zM7 8a2 2 0 100-4 2 2 0 000 4z"></path></svg>
              <span class="text-lg font-semibold text-zinc-800 dark:text-zinc-100">Meet Instructors</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center p-4 bg-zinc-300 dark:bg-zinc-700 rounded-lg transform hover:scale-105 transition duration-200 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-amber-500 border border-zinc-400 dark:border-zinc-600">
              <svg class="h-6 w-6 mr-3 text-amber-700 dark:text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6a2 2 0 00-2-2H5a2 2 0 00-2 2v13a2 2 0 002 2h4m2 0h4a2 2 0 002-2V6a2 2 0 00-2-2h-4m0 16V6"></path></svg>
              <span class="text-lg font-semibold text-zinc-800 dark:text-zinc-100">My Dashboard</span>
            </a>
          </li>
        </ul>
      </nav>

      <!-- Latest Articles Section -->
      <section class="md:col-span-3 bg-zinc-50 dark:bg-zinc-900 p-6 sm:p-8 rounded-xl shadow-xl border-4 border-amber-600 dark:border-400">
        <h2 class="text-3xl font-bold text-amber-900 dark:text-amber-300 mb-6 text-center">Latest Insights from Our Scholars</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">

          <!-- Article Card 1 -->
          <article class="bg-white dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-lg transition duration-300 overflow-hidden border border-zinc-200 dark:border-zinc-700 transform hover:scale-102 group">
            <img src="https://picsum.photos/seed/article1/500/300" alt="Article Image" class="w-full h-48 object-cover rounded-t-lg group-hover:brightness-90 transition duration-300">
            <div class="p-5">
              <h3 class="text-xl font-semibold text-amber-900 dark:text-amber-200 mb-2 line-clamp-2">The Geometry of Gotham: Art Deco Skyscrapers</h3>
              <p class="text-zinc-700 dark:text-zinc-300 text-sm line-clamp-3 mb-3">Explore the architectural marvels that defined a city, from the Chrysler Building to the Empire State Building.</p>
              <div class="flex items-center text-zinc-600 dark:text-zinc-400 text-xs mb-3">
                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2 border border-amber-400">
                <span>By Jane Doe - <time datetime="2023-10-26">Oct 26, 2023</time></span>
              </div>
              <a href="#" class="inline-block text-amber-700 dark:text-amber-300 font-semibold hover:underline">
                Read More <span aria-hidden="true">&rarr;</span>
              </a>
            </div>
          </article>

          <!-- Article Card 2 -->
          <article class="bg-white dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-lg transition duration-300 overflow-hidden border border-zinc-200 dark:border-zinc-700 transform hover:scale-102 group">
            <img src="https://picsum.photos/seed/article2/500/300" alt="Article Image" class="w-full h-48 object-cover rounded-t-lg group-hover:brightness-90 transition duration-300">
            <div class="p-5">
              <h3 class="text-xl font-semibold text-amber-900 dark:text-amber-200 mb-2 line-clamp-2">Autumnal Palettes in Historical Art: A Study</h3>
              <p class="text-zinc-700 dark:text-zinc-300 text-sm line-clamp-3 mb-3">Discover how masters throughout history captured the vibrant and melancholic beauty of autumn.</p>
              <div class="flex items-center text-zinc-600 dark:text-zinc-400 text-xs mb-3">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2 border border-amber-400">
                <span>By John Smith - <time datetime="2023-10-20">Oct 20, 2023</time></span>
              </div>
              <a href="#" class="inline-block text-amber-700 dark:text-amber-300 font-semibold hover:underline">
                Read More <span aria-hidden="true">&rarr;</span>
              </a>
            </div>
          </article>

          <!-- Article Card 3 -->
          <article class="bg-white dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-lg transition duration-300 overflow-hidden border border-zinc-200 dark:border-zinc-700 transform hover:scale-102 group">
            <img src="https://picsum.photos/seed/article3/500/300" alt="Article Image" class="w-full h-48 object-cover rounded-t-lg group-hover:brightness-90 transition duration-300">
            <div class="p-5">
              <h3 class="text-xl font-semibold text-amber-900 dark:text-amber-200 mb-2 line-clamp-2">The Resurgence of Craftsmanship in the Digital Age</h3>
              <p class="text-zinc-700 dark:text-zinc-300 text-sm line-clamp-3 mb-3">An exploration into how traditional skills are finding new relevance and expression today.</p>
              <div class="flex items-center text-zinc-600 dark:text-zinc-400 text-xs mb-3">
                <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2 border border-amber-400">
                <span>By Emily White - <time datetime="2023-10-15">Oct 15, 2023</time></span>
              </div>
              <a href="#" class="inline-block text-amber-700 dark:text-amber-300 font-semibold hover:underline">
                Read More <span aria-hidden="true">&rarr;</span>
              </a>
            </div>
          </article>

        </div>
      </section>

      <!-- Testimonial / Quote Section -->
      <section class="md:col-span-2 bg-gradient-to-br from-orange-200 to-orange-300 dark:from-orange-950 dark:to-orange-900 p-6 sm:p-8 rounded-xl shadow-xl border-4 border-amber-600 dark:border-amber-400 relative overflow-hidden">
        <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/lined-paper.png')] opacity-20 dark:opacity-5 pointer-events-none"></div>
        <blockquote class="relative z-10 text-center">
          <p class="text-3xl font-light italic text-orange-950 dark:text-orange-100 mb-6 drop-shadow-sm leading-relaxed">
            "This platform is a true masterpiece – a seamless blend of historical elegance and cutting-edge education. My learning journey has been endlessly enriched."
          </p>
          <footer class="text-lg font-bold text-orange-900 dark:text-orange-200 flex flex-col items-center">
            <img src="https://randomuser.me/api/portraits/men/55.jpg" alt="Student Avatar" class="w-16 h-16 rounded-full mb-3 border-4 border-orange-500 dark:border-orange-400 shadow-md">
            <span>Alexander Vance, <span class="font-normal">Alumni</span></span>
          </footer>
        </blockquote>
      </section>

      <!-- Call to Action / Newsletter -->
      <aside class="bg-red-700 dark:bg-red-900 p-6 sm:p-8 rounded-xl shadow-xl border-4 border-amber-500 dark:border-amber-400 relative overflow-hidden flex flex-col justify-between">
        <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/pyramid.png')] opacity-10 dark:opacity-5"></div>
        <h2 class="relative z-10 text-3xl font-bold text-white dark:text-amber-200 mb-4 text-center">Join Our Guild</h2>
        <p class="relative z-10 text-white text-center mb-6">
          Get the latest course updates, exclusive insights, and special offers delivered to your inbox.
        </p>
        <form class="relative z-10 flex flex-col gap-4">
          <input type="email" placeholder="Your email address" class="w-full p-4 rounded-lg bg-red-800/70 dark:bg-red-950/70 text-white placeholder-red-200 dark:placeholder-red-300 border-2 border-red-900 dark:border-red-800 focus:outline-none focus:ring-2 focus:ring-amber-300 focus:border-amber-300">
          <button type="submit" class="w-full px-6 py-4 bg-amber-500 hover:bg-amber-600 dark:bg-amber-400 dark:hover:bg-amber-500 text-red-900 font-bold rounded-lg shadow-lg transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-amber-300/50">
            Subscribe Now
          </button>
        </form>
      </aside>
    </main>

    <!-- Decorative Footer -->
    <footer class="text-center pt-12 pb-8 text-zinc-700 dark:text-zinc-400 border-t-4 border-amber-600 dark:border-amber-400 relative overflow-hidden">
      <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/shattered.png')] opacity-10 dark:opacity-5"></div>
      <p class="relative z-10 text-lg">
        &copy; 2023 Grand Hall of Knowledge. All rights reserved.
      </p>
    </footer>

  </div>
</div>

Cyberpunk Grid Layout Component

A simple, responsive grid layout component with a cyberpunk aesthetic, suitable for event or conference websites. Features dark backgrounds, glowing neon accents, and triadic color scheme. Includes dark mode support.

Open Preview

                <div class="min-h-screen bg-gray-950 dark:bg-black text-lime-400 dark:text-cyan-400 p-4 sm:p-8 font-mono">

  <!-- Grid Container -->
  <div class="max-w-6xl mx-auto grid md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">

    <!-- Header/Title Section (Spanning Columns) -->
    <div class="md:col-span-2 lg:col-span-3 mb-6">
      <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-fuchsia-500 dark:text-fuchsia-400 
        tracking-tight leading-tight text-center sm:text-left drop-shadow-[0_0_8px_rgba(236,72,153,0.7)] dark:drop-shadow-[0_0_8px_rgba(236,72,153,0.5)]">
        // NEON NEXUS CONFERENCE <span class="text-lime-400 dark:text-cyan-400">2077</span>
      </h1>
      <p class="text-lg sm:text-xl text-gray-400 dark:text-gray-500 text-center sm:text-left mt-2 
        drop-shadow-[0_0_3px_rgba(163,230,53,0.3)] dark:drop-shadow-[0_0_3px_rgba(45,212,255,0.3)]">
        Unlocking the Future of Cybernetics & AI
      </p>
    </div>

    <!-- Grid Item 1 -->
    <div class="relative bg-gray-900 border border-fuchsia-600 dark:border-fuchsia-700 
      shadow-fuchsia-500/30 dark:shadow-fuchsia-700/20 shadow-lg p-6 rounded-lg overflow-hidden
      before:content-[''] before:absolute before:inset-0 before:blur-sm before:bg-fuchsia-500/10 dark:before:bg-fuchsia-700/10 
      before:animate-pulse before:duration-1000 before:z-0 transition-transform duration-300 hover:scale-[1.02] hover:shadow-2xl hover:shadow-fuchsia-500/50">
      <div class="relative z-10">
        <h2 class="text-2xl font-bold text-fuchsia-500 dark:text-fuchsia-400 mb-2 
          drop-shadow-[0_0_5px_rgba(236,72,153,0.7)] dark:drop-shadow-[0_0_5px_rgba(236,72,153,0.5)]">
          <span class="text-lime-400 dark:text-cyan-400">//</span> REGISTRATION OPEN
        </h2>
        <p class="text-base text-gray-300 dark:text-gray-400 mb-4">Secure your spot for the premier event of the digital age. Limited slots available.</p>
        <a href="#" class="inline-block bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-semibold py-2 px-4 rounded-md 
          transition-colors duration-300 transform scale-100 hover:scale-[1.05] 
          shadow-inner shadow-fuchsia-400/50 dark:shadow-fuchsia-800/50 
          border border-fuchsia-400 dark:border-fuchsia-800">
          REGISTER NOW <span class="ml-1 text-xs">>>></span>
        </a>
      </div>
    </div>

    <!-- Grid Item 2 -->
    <div class="relative bg-gray-900 border border-lime-500 dark:border-cyan-600 
      shadow-lime-500/30 dark:shadow-cyan-700/20 shadow-lg p-6 rounded-lg overflow-hidden
      before:content-[''] before:absolute before:inset-0 before:blur-sm before:bg-lime-500/10 dark:before:bg-cyan-600/10 
      before:animate-pulse before:delay-200 before:duration-1000 before:z-0 transition-transform duration-300 hover:scale-[1.02] hover:shadow-2xl hover:shadow-lime-500/50 dark:hover:shadow-cyan-500/50">
      <div class="relative z-10">
        <h2 class="text-2xl font-bold text-lime-400 dark:text-cyan-400 mb-2 
          drop-shadow-[0_0_5px_rgba(163,230,53,0.7)] dark:drop-shadow-[0_0_5px_rgba(45,212,255,0.5)]">
          <span class="text-fuchsia-500 dark:text-fuchsia-400">//</span> MEET THE SPEAKERS
        </h2>
        <p class="text-base text-gray-300 dark:text-gray-400 mb-4">Visionaries and pioneers from the cutting edge of tech will share their insights.</p>
        <div class="flex -space-x-2 overflow-hidden mb-4">
          <img class="inline-block h-10 w-10 rounded-full ring-2 ring-lime-400 dark:ring-cyan-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Speaker 1">
          <img class="inline-block h-10 w-10 rounded-full ring-2 ring-lime-400 dark:ring-cyan-500" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Speaker 2">
          <img class="inline-block h-10 w-10 rounded-full ring-2 ring-lime-400 dark:ring-cyan-500" src="https://randomuser.me/api/portraits/men/50.jpg" alt="Speaker 3">
        </div>
        <a href="#" class="inline-block bg-lime-600 hover:bg-lime-700 text-gray-900 font-semibold py-2 px-4 rounded-md 
          transition-colors duration-300 transform scale-100 hover:scale-[1.05] 
          shadow-inner shadow-lime-400/50 dark:shadow-cyan-800/50 
          border border-lime-400 dark:border-cyan-800">
          VIEW ALL <span class="ml-1 text-xs">>>></span>
        </a>
      </div>
    </div>

    <!-- Grid Item 3 -->
    <div class="relative bg-gray-900 border border-cyan-500 dark:border-green-600 
      shadow-cyan-500/30 dark:shadow-green-700/20 shadow-lg p-6 rounded-lg overflow-hidden md:col-span-2 lg:col-span-1
      before:content-[''] before:absolute before:inset-0 before:blur-sm before:bg-cyan-500/10 dark:before:bg-green-600/10 
      before:animate-pulse before:delay-400 before:duration-1000 before:z-0 transition-transform duration-300 hover:scale-[1.02] hover:shadow-2xl hover:shadow-cyan-500/50 dark:hover:shadow-green-500/50">
      <div class="relative z-10">
        <h2 class="text-2xl font-bold text-cyan-400 dark:text-green-400 mb-2 
          drop-shadow-[0_0_5px_rgba(45,212,255,0.7)] dark:drop-shadow-[0_0_5px_rgba(74,222,128,0.5)]">
          <span class="text-fuchsia-500 dark:text-fuchsia-400">//</span> EVENT SCHEDULE
        </h2>
        <p class="text-base text-gray-300 dark:text-gray-400 mb-4">Don't miss a single byte! Plan your immersion into the future.</p>
        <ul class="list-none space-y-2 text-gray-200 dark:text-gray-300">
          <li class="flex items-center text-lime-300 dark:text-cyan-300"> <span class="mr-2 text-fuchsia-400 text-lg">&#8227;</span> Day 1: AI & Robotics Summit</li>
          <li class="flex items-center text-lime-300 dark:text-cyan-300"> <span class="mr-2 text-fuchsia-400 text-lg">&#8227;</span> Day 2: Cybernetics & Bio-Augmentation</li>
          <li class="flex items-center text-lime-300 dark:text-cyan-300"> <span class="mr-2 text-fuchsia-400 text-lg">&#8227;</span> Day 3: Future of Digital Society</li>
        </ul>
        <a href="#" class="inline-block mt-4 bg-cyan-600 hover:bg-cyan-700 text-gray-900 font-semibold py-2 px-4 rounded-md 
          transition-colors duration-300 transform scale-100 hover:scale-[1.05] 
          shadow-inner shadow-cyan-400/50 dark:shadow-green-800/50 
          border border-cyan-400 dark:border-green-800">
          FULL SCHEDULE <span class="ml-1 text-xs">>>></span>
        </a>
      </div>
    </div>
    
    <!-- Grid Item 4 (Image Placeholder) -->
    <div class="relative bg-gray-900 border border-fuchsia-600 dark:border-fuchsia-700 
      shadow-fuchsia-500/30 dark:shadow-fuchsia-700/20 shadow-lg rounded-lg overflow-hidden md:col-span-1 lg:col-span-1
      before:content-[''] before:absolute before:inset-0 before:blur-sm before:bg-fuchsia-500/10 dark:before:bg-fuchsia-700/10 
      before:animate-pulse before:delay-600 before:duration-1000 before:z-0 transition-transform duration-300 hover:scale-[1.02] hover:shadow-2xl hover:shadow-fuchsia-500/50">
      <div class="relative z-10">
        <img src="https://picsum.photos/600/400?random=1" alt="Cyberpunk Cityscape" class="w-full h-auto object-cover rounded-md border border-fuchsia-500 dark:border-fuchsia-700 shadow-xl shadow-fuchsia-500/20 dark:shadow-fuchsia-700/10">
        <div class="p-4">
          <p class="text-sm text-gray-400 dark:text-gray-500 text-center">Connect, learn, innovate. #NeonNexus</p>
        </div>
      </div>
    </div>

    <!-- Grid Item 5 (Contact/Location) -->
    <div class="relative bg-gray-900 border border-lime-500 dark:border-cyan-600 
      shadow-lime-500/30 dark:shadow-cyan-700/20 shadow-lg p-6 rounded-lg overflow-hidden md:col-span-1 lg:col-span-2
      before:content-[''] before:absolute before:inset-0 before:blur-sm before:bg-lime-500/10 dark:before:bg-cyan-600/10 
      before:animate-pulse before:delay-800 before:duration-1000 before:z-0 transition-transform duration-300 hover:scale-[1.02] hover:shadow-2xl hover:shadow-lime-500/50 dark:hover:shadow-cyan-500/50">
      <div class="relative z-10">
        <h2 class="text-2xl font-bold text-lime-400 dark:text-cyan-400 mb-2 
          drop-shadow-[0_0_5px_rgba(163,230,53,0.7)] dark:drop-shadow-[0_0_5px_rgba(45,212,255,0.5)]">
          <span class="text-fuchsia-500 dark:text-fuchsia-400">//</span> GHOST CITY LOCALE
        </h2>
        <p class="text-base text-gray-300 dark:text-gray-400 mb-4">Experience the future in the heart of Neo-Tokyo virtual district.</p>
        <ul class="list-none space-y-2 text-gray-200 dark:text-gray-300">
          <li class="flex items-center text-cyan-300 dark:text-green-300"><span class="mr-2 text-fuchsia-400 text-lg">&#8227;</span> Virtual Venue: 'The Glitch' - Sector 7</li>
          <li class="flex items-center text-cyan-300 dark:text-green-300"><span class="mr-2 text-fuchsia-400 text-lg">&#8227;</span> Dates: Nov 20-22, 2077</li>
          <li class="flex items-center text-cyan-300 dark:text-green-300"><span class="mr-2 text-fuchsia-400 text-lg">&#8227;</span> Contact: <a href="mailto:[email protected]" class="underline hover:text-white">[email protected]</a></li>
        </ul>
        <a href="#" class="inline-block mt-4 bg-lime-600 hover:bg-lime-700 text-gray-900 font-semibold py-2 px-4 rounded-md 
        transition-colors duration-300 transform scale-100 hover:scale-[1.05] 
        shadow-inner shadow-lime-400/50 dark:shadow-cyan-800/50 
        border border-lime-400 dark:border-cyan-800">
          GET DIRECTIONS <span class="ml-1 text-xs">>>></span>
        </a>
      </div>
    </div>

  </div>

  <!-- Footer (Optional) -->
  <footer class="mt-12 text-center text-gray-600 dark:text-gray-700 text-sm">
    <p>&copy; 2077 Neon Nexus. All Digital Rights Reserved.</p>
  </footer>

</div>

Watercolor_Artistic_Dashboard_Grid_Layout

A responsive dashboard grid layout component with a watercolor/artistic aesthetic, using a monochromatic color scheme. Features include cards with soft backgrounds, subtle shadows, and dark mode support for data visualization and control panels.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-indigo-100 dark:from-gray-900 dark:via-purple-950 dark:to-indigo-950 p-4 sm:p-6 font-sans">
  <div class="max-w-7xl mx-auto">
    <h1 class="text-4xl sm:text-5xl font-extrabold text-purple-800 dark:text-purple-300 mb-8 sm:mb-12 text-center drop-shadow-lg leading-tight">
      <span class="block">Artistic Dashboard</span>
      <span class="block text-2xl sm:text-3xl font-light text-purple-600 dark:text-purple-400 mt-2">Creative Insights</span>
    </h1>

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

      <!-- Card 1: Sales Overview -->
      <div class="col-span-full md:col-span-2 lg:col-span-2 xl:col-span-2 relative bg-purple-50/70 dark:bg-purple-900/70 backdrop-blur-sm rounded-3xl p-6 sm:p-8 overflow-hidden shadow-xl dark:shadow-purple-700/20 group transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-purple-700/40 border border-purple-100 dark:border-purple-800">
        <div class="absolute inset-0 bg-gradient-to-br from-fuchsia-200/50 via-purple-300/50 to-indigo-200/50 dark:from-fuchsia-950/20 dark:via-purple-950/20 dark:to-indigo-950/20 opacity-80 z-0 rounded-3xl -m-1 animate-pulse-background"></div>
        <div class="relative z-10 flex flex-col h-full">
          <h2 class="text-2xl sm:text-3xl font-bold text-purple-800 dark:text-purple-300 mb-4">Global Sales Performance</h2>
          <p class="text-purple-600 dark:text-purple-400 mb-6 text-lg">Interactive sales data across all regions.</p>
          <div class="flex-grow min-h-[150px] sm:min-h-[200px] bg-purple-100/50 dark:bg-purple-800/50 rounded-xl flex items-center justify-center text-purple-500 dark:text-purple-400 text-sm italic overflow-hidden shadow-inner">
            <img src="https://picsum.photos/600/300?random=1" alt="Sales Chart" class="w-full h-full object-cover grayscale opacity-70 group-hover:grayscale-0 group-hover:opacity-100 transition-all duration-500 rounded-xl">
          </div>
          <div class="mt-6 flex justify-between items-center">
            <span class="text-4xl font-extrabold text-purple-900 dark:text-purple-200">$1.2M</span>
            <span class="text-green-600 dark:text-green-400 font-semibold text-lg flex items-center">
              <svg class="w-6 h-6 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10.586 3.707a1 1 0 011.414 0l5.293 5.293a1 1 0 01-1.414 1.414L11 6.414V16a1 1 0 11-2 0V6.414L5.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
              +12% <span class="hidden sm:inline-block ml-1">this month</span>
            </span>
          </div>
        </div>
      </div>

      <!-- Card 2: User Engagement -->
      <div class="relative bg-purple-50/70 dark:bg-purple-900/70 backdrop-blur-sm rounded-3xl p-6 sm:p-8 overflow-hidden shadow-xl dark:shadow-purple-700/20 group transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-purple-700/40 border border-purple-100 dark:border-purple-800">
        <div class="absolute inset-0 bg-gradient-to-br from-indigo-200/50 via-pink-200/50 to-fuchsia-200/50 dark:from-indigo-950/20 dark:via-pink-950/20 dark:to-fuchsia-950/20 opacity-80 z-0 rounded-3xl -m-1 animate-pulse-background delay-75"></div>
        <div class="relative z-10 flex flex-col h-full">
          <h2 class="text-2xl font-bold text-purple-800 dark:text-purple-300 mb-4">User Engagement</h2>
          <p class="text-purple-600 dark:text-purple-400 mb-6">Metrics for active users and session times.</p>
          <div class="flex-grow min-h-[120px] bg-purple-100/50 dark:bg-purple-800/50 rounded-xl flex items-center justify-center text-purple-500 dark:text-purple-400 text-sm overflow-hidden shadow-inner">
            <img src="https://picsum.photos/300/200?random=2" alt="User Engagement Chart" class="w-full h-full object-cover grayscale opacity-70 group-hover:grayscale-0 group-hover:opacity-100 transition-all duration-500 rounded-xl">
          </div>
          <div class="mt-6 flex justify-between items-center">
            <span class="text-3xl font-extrabold text-purple-900 dark:text-purple-200">50K</span>
            <span class="text-orange-500 dark:text-orange-400 font-semibold text-md flex items-center">
              <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
              -3% <span class="hidden sm:inline-block ml-1">last week</span>
            </span>
          </div>
        </div>
      </div>

      <!-- Card 3: Project Status -->
      <div class="relative bg-purple-50/70 dark:bg-purple-900/70 backdrop-blur-sm rounded-3xl p-6 sm:p-8 overflow-hidden shadow-xl dark:shadow-purple-700/20 group transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-purple-700/40 border border-purple-100 dark:border-purple-800">
        <div class="absolute inset-0 bg-gradient-to-br from-pink-200/50 via-fuchsia-200/50 to-indigo-200/50 dark:from-pink-950/20 dark:via-fuchsia-950/20 dark:to-indigo-950/20 opacity-80 z-0 rounded-3xl -m-1 animate-pulse-background delay-150"></div>
        <div class="relative z-10 flex flex-col h-full">
          <h2 class="text-2xl font-bold text-purple-800 dark:text-purple-300 mb-4">Project Status</h2>
          <p class="text-purple-600 dark:text-purple-400 mb-6">Overview of current project milestones.</p>
          <ul class="flex-grow space-y-3">
            <li class="flex items-center text-purple-700 dark:text-purple-300 border border-purple-200/50 dark:border-purple-800/50 p-3 rounded-xl bg-purple-100/50 dark:bg-purple-800/50 shadow-inner group-hover:scale-[1.01] transition-transform duration-200">
              <span class="bg-green-400 dark:bg-green-600 w-3 h-3 rounded-full mr-3 border border-green-500 dark:border-green-700"></span>
              <span>Feature X Development <strong class="font-semibold ml-2 text-purple-900 dark:text-purple-100">80%</strong></span>
            </li>
            <li class="flex items-center text-purple-700 dark:text-purple-300 border border-purple-200/50 dark:border-purple-800/50 p-3 rounded-xl bg-purple-100/50 dark:bg-purple-800/50 shadow-inner group-hover:scale-[1.01] transition-transform duration-200">
              <span class="bg-yellow-400 dark:bg-yellow-600 w-3 h-3 rounded-full mr-3 border border-yellow-500 dark:border-yellow-700"></span>
              <span>Marketing Campaign Launch <strong class="font-semibold ml-2 text-purple-900 dark:text-purple-100">45%</strong></span>
            </li>
            <li class="flex items-center text-purple-700 dark:text-purple-300 border border-purple-200/50 dark:border-purple-800/50 p-3 rounded-xl bg-purple-100/50 dark:bg-purple-800/50 shadow-inner group-hover:scale-[1.01] transition-transform duration-200">
              <span class="bg-blue-400 dark:bg-blue-600 w-3 h-3 rounded-full mr-3 border border-blue-500 dark:border-blue-700"></span>
              <span>New User Onboarding Flow <strong class="font-semibold ml-2 text-purple-900 dark:text-purple-100">95%</strong></span>
            </li>
          </ul>
          <button class="mt-6 w-full py-3 px-4 bg-purple-500 dark:bg-purple-600 text-white font-semibold rounded-xl hover:bg-purple-600 dark:hover:bg-purple-700 transition-colors duration-300 shadow-md transform hover:-translate-y-0.5">
            View All Projects
          </button>
        </div>
      </div>

      <!-- Card 4: Recent Activities -->
      <div class="relative bg-purple-50/70 dark:bg-purple-900/70 backdrop-blur-sm rounded-3xl p-6 sm:p-8 overflow-hidden shadow-xl dark:shadow-purple-700/20 group transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-purple-700/40 border border-purple-100 dark:border-purple-800">
        <div class="absolute inset-0 bg-gradient-to-br from-fuchsia-200/50 via-indigo-200/50 to-pink-200/50 dark:from-fuchsia-950/20 dark:via-indigo-950/20 dark:to-pink-950/20 opacity-80 z-0 rounded-3xl -m-1 animate-pulse-background delay-225"></div>
        <div class="relative z-10 flex flex-col h-full">
          <h2 class="text-2xl font-bold text-purple-800 dark:text-purple-300 mb-4">Recent Activities</h2>
          <p class="text-purple-600 dark:text-purple-400 mb-6">Latest updates and notifications.</p>
          <div class="flex-grow space-y-4">
            <div class="flex items-start">
              <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-purple-300 dark:border-purple-700 shadow-sm">
              <div>
                <p class="text-purple-800 dark:text-purple-200 font-semibold">John D. <span class="font-normal text-purple-600 dark:text-purple-400">completed task UI Revamp</span></p>
                <p class="text-sm text-purple-500 dark:text-purple-400">2 hours ago</p>
              </div>
            </div>
            <div class="flex items-start">
              <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-purple-300 dark:border-purple-700 shadow-sm">
              <div>
                <p class="text-purple-800 dark:text-purple-200 font-semibold">Jane S. <span class="font-normal text-purple-600 dark:text-purple-400">added 3 new reports</span></p>
                <p class="text-sm text-purple-500 dark:text-purple-400">5 hours ago</p>
              </div>
            </div>
            <div class="flex items-start">
              <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-purple-300 dark:border-purple-700 shadow-sm">
              <div>
                <p class="text-purple-800 dark:text-purple-200 font-semibold">Mike R. <span class="font-normal text-purple-600 dark:text-purple-400">commented on 'Analytics Bug'</span></p>
                <p class="text-sm text-purple-500 dark:text-purple-400">Yesterday</p>
              </div>
            </div>
          </div>
          <button class="mt-6 w-full py-3 px-4 bg-purple-200 dark:bg-purple-700 text-purple-800 dark:text-purple-200 font-semibold rounded-xl hover:bg-purple-300 dark:hover:bg-purple-800 transition-colors duration-300 shadow-md transform hover:-translate-y-0.5">
            View All Activities
          </button>
        </div>
      </div>

      <!-- Card 5: Performance Metrics (Small) -->
      <div class="relative bg-purple-50/70 dark:bg-purple-900/70 backdrop-blur-sm rounded-3xl p-6 sm:p-8 overflow-hidden shadow-xl dark:shadow-purple-700/20 group transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-purple-700/40 border border-purple-100 dark:border-purple-800">
        <div class="absolute inset-0 bg-gradient-to-br from-indigo-200/50 via-pink-200/50 to-fuchsia-200/50 dark:from-indigo-950/20 dark:via-pink-950/20 dark:to-fuchsia-950/20 opacity-80 z-0 rounded-3xl -m-1 animate-pulse-background delay-300"></div>
        <div class="relative z-10 flex flex-col h-full">
          <h2 class="text-2xl font-bold text-purple-800 dark:text-purple-300 mb-4">Load Speed</h2>
          <p class="text-purple-600 dark:text-purple-400 mb-6">Current dashboard load time.</p>
          <div class="flex-grow flex items-center justify-center">
            <p class="text-6xl font-extrabold text-blue-500 dark:text-blue-400 drop-shadow-md">1.8s</p>
          </div>
          <p class="text-sm text-purple-500 dark:text-purple-400 text-center mt-auto">Compared to 2.1s last month</p>
        </div>
      </div>

      <!-- Card 6: Customer Feedback (Small) -->
      <div class="relative bg-purple-50/70 dark:bg-purple-900/70 backdrop-blur-sm rounded-3xl p-6 sm:p-8 overflow-hidden shadow-xl dark:shadow-purple-700/20 group transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-purple-700/40 border border-purple-100 dark:border-purple-800">
        <div class="absolute inset-0 bg-gradient-to-br from-pink-200/50 via-fuchsia-200/50 to-indigo-200/50 dark:from-pink-950/20 dark:via-fuchsia-950/20 dark:to-indigo-950/20 opacity-80 z-0 rounded-3xl -m-1 animate-pulse-background delay-375"></div>
        <div class="relative z-10 flex flex-col h-full">
          <h2 class="text-2xl font-bold text-purple-800 dark:text-purple-300 mb-4">Feedback Score</h2>
          <p class="text-purple-600 dark:text-purple-400 mb-6">Average customer satisfaction.</p>
          <div class="flex-grow flex items-center justify-center">
            <p class="text-6xl font-extrabold text-yellow-500 dark:text-yellow-400 drop-shadow-md">4.7</p>
          </div>
          <p class="text-sm text-purple-500 dark:text-purple-400 text-center mt-auto">Out of 5 stars</p>
        </div>
      </div>

      <!-- Card 7: Resource Utilization (Large) -->
      <div class="col-span-full md:col-span-2 lg:col-span-2 xl:col-span-full relative bg-purple-50/70 dark:bg-purple-900/70 backdrop-blur-sm rounded-3xl p-6 sm:p-8 overflow-hidden shadow-xl dark:shadow-purple-700/20 group transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-purple-700/40 border border-purple-100 dark:border-purple-800">
        <div class="absolute inset-0 bg-gradient-to-br from-purple-200/50 via-indigo-200/50 to-pink-200/50 dark:from-purple-950/20 dark:via-indigo-950/20 dark:to-pink-950/20 opacity-80 z-0 rounded-3xl -m-1 animate-pulse-background delay-450"></div>
        <div class="relative z-10 flex flex-col h-full">
          <h2 class="text-2xl sm:text-3xl font-bold text-purple-800 dark:text-purple-300 mb-4">Server Resource Utilization</h2>
          <p class="text-purple-600 dark:text-purple-400 mb-6 text-lg">Live monitoring of CPU, Memory, and Disk usage.</p>
          <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 flex-grow">
            <div class="bg-purple-100/50 dark:bg-purple-800/50 rounded-xl p-4 shadow-inner">
              <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-2">CPU Usage</h3>
              <div class="w-full bg-purple-200 dark:bg-purple-700 rounded-full h-4 mb-2">
                <div class="bg-blue-400 dark:bg-blue-500 h-4 rounded-full" style="width: 65%;"></div>
              </div>
              <p class="text-purple-600 dark:text-purple-400 text-sm">65% Used</p>
            </div>
            <div class="bg-purple-100/50 dark:bg-purple-800/50 rounded-xl p-4 shadow-inner">
              <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-2">Memory Usage</h3>
              <div class="w-full bg-purple-200 dark:bg-purple-700 rounded-full h-4 mb-2">
                <div class="bg-green-400 dark:bg-green-500 h-4 rounded-full" style="width: 40%;"></div>
              </div>
              <p class="text-purple-600 dark:text-purple-400 text-sm">40% Used</p>
            </div>
            <div class="bg-purple-100/50 dark:bg-purple-800/50 rounded-xl p-4 shadow-inner">
              <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-2">Disk Usage</h3>
              <div class="w-full bg-purple-200 dark:bg-purple-700 rounded-full h-4 mb-2">
                <div class="bg-red-400 dark:bg-red-500 h-4 rounded-full" style="width: 88%;"></div>
              </div>
              <p class="text-purple-600 dark:text-purple-400 text-sm">88% Used</p>
            </div>
          </div>
          <button class="mt-8 py-3 px-6 bg-purple-500 dark:bg-purple-600 text-white font-semibold rounded-xl hover:bg-purple-600 dark:hover:bg-purple-700 transition-colors duration-300 shadow-md transform hover:-translate-y-0.5 self-center">
            Detailed Analytics
          </button>
        </div>
      </div>

    </div>
  </div>

  <style>
    @keyframes pulse-background {
      0% { opacity: 0.8; transform: scale(1); }
      50% { opacity: 0.9; transform: scale(1.01); }
      100% { opacity: 0.8; transform: scale(1); }
    }

    .animate-pulse-background {
      animation: pulse-background 8s ease-in-out infinite alternate;
    }

    .delay-75 { animation-delay: 0.75s; }
    .delay-150 { animation-delay: 1.5s; }
    .delay-225 { animation-delay: 2.25s; }
    .delay-300 { animation-delay: 3s; }
    .delay-375 { animation-delay: 3.75s; }
    .delay-450 { animation-delay: 4.5s; }
  </style>
</div>

Paper-Inspired Vibrant Healthcare Grid

A simple, paper/print-inspired grid layout component with vibrant colors, designed for healthcare/medical applications. It's fully responsive, includes dark mode support, and uses semantic HTML.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 lg:p-12 min-h-screen bg-gradient-to-br from-indigo-100 via-purple-100 to-pink-100 dark:from-purple-950 dark:via-indigo-950 dark:to-blue-950 font-sans">

  <div class="max-w-7xl mx-auto grid md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-10">

    <!-- Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-105
                border-4 border-indigo-500 dark:border-indigo-600
                relative pb-6 md:pb-8 lg:pb-10">
      <div class="absolute inset-0 bg-gradient-to-tr from-indigo-100 to-purple-100 dark:from-indigo-900 dark:to-purple-900 opacity-20"></div>
      <div class="relative p-6 sm:p-8 z-10">
        <div class="flex items-center mb-4">
          <img src="https://picsum.photos/id/1005/60/60" alt="Microscope" class="w-16 h-16 rounded-full object-cover border-4 border-white dark:border-gray-700 shadow-md">
          <h3 class="text-2xl font-extrabold text-indigo-700 dark:text-indigo-400 ml-4">Lab Results</h3>
        </div>
        <p class="text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-4">Access your latest diagnostic reports and detailed analysis from our state-of-the-art laboratory.</p>
        <a href="#" class="inline-flex items-center px-5 py-2 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-full shadow-lg transition-colors duration-200 outline-none focus:ring-4 focus:ring-indigo-300 dark:focus:ring-indigo-800">
          View Details
          <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        </a>
      </div>
    </div>

    <!-- Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-105
                border-4 border-sky-500 dark:border-sky-600
                relative pb-6 md:pb-8 lg:pb-10">
      <div class="absolute inset-0 bg-gradient-to-tr from-sky-100 to-cyan-100 dark:from-sky-900 dark:to-cyan-900 opacity-20"></div>
      <div class="relative p-6 sm:p-8 z-10">
        <div class="flex items-center mb-4">
          <img src="https://picsum.photos/id/177/60/60" alt="Pills and Stethoscope" class="w-16 h-16 rounded-full object-cover border-4 border-white dark:border-gray-700 shadow-md">
          <h3 class="text-2xl font-extrabold text-sky-700 dark:text-sky-400 ml-4">Medication Refills</h3>
        </div>
        <p class="text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-4">Easily request prescription refills and manage your current medication schedule online.</p>
        <a href="#" class="inline-flex items-center px-5 py-2 bg-sky-600 hover:bg-sky-700 text-white font-semibold rounded-full shadow-lg transition-colors duration-200 outline-none focus:ring-4 focus:ring-sky-300 dark:focus:ring-sky-800">
          Order Refill
          <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        </a>
      </div>
    </div>

    <!-- Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-105
                border-4 border-emerald-500 dark:border-emerald-600
                relative pb-6 md:pb-8 lg:pb-10">
      <div class="absolute inset-0 bg-gradient-to-tr from-emerald-100 to-lime-100 dark:from-emerald-900 dark:to-lime-900 opacity-20"></div>
      <div class="relative p-6 sm:p-8 z-10">
        <div class="flex items-center mb-4">
          <img src="https://picsum.photos/id/453/60/60" alt="Heart Monitor" class="w-16 h-16 rounded-full object-cover border-4 border-white dark:border-gray-700 shadow-md">
          <h3 class="text-2xl font-extrabold text-emerald-700 dark:text-emerald-400 ml-4">Health Records</h3>
        </div>
        <p class="text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-4">Keep track of your complete medical history, immunizations, and past appointments securely.</p>
        <a href="#" class="inline-flex items-center px-5 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-full shadow-lg transition-colors duration-200 outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-800">
          Access Records
          <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        </a>
      </div>
    </div>

  </div>
</div>

Cyberpunk CRM Grid

A responsive grid layout component for CRM/Business Tools with a cyberpunk-futuristic neon aesthetic, featuring dark backgrounds and warm sunset accent colors. Includes interactive elements and dark mode support.

Open Preview

                <div class="min-h-screen bg-gray-950 text-orange-200 p-4 sm:p-6 lg:p-8 font-mono dark:bg-gray-950 dark:text-orange-200">

  <!-- Header/Title Section -->
  <div class="mb-8 text-center">
    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-orange-400 mb-2 drop-shadow-xl shadow-orange-500/50 dark:text-orange-400">
      <span class="animate-pulse-slow">CYBERNETIC</span> DECK // <span class="text-orange-500">CRM_OPS</span>
    </h1>
    <p class="text-lg sm:text-xl text-yellow-300 dark:text-yellow-300">Enhanced Customer Interface Protocol</p>
  </div>

  <!-- Main Grid Container -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-min">

    <!-- Customer Overview Card -->
    <div class="relative bg-gray-900 border border-orange-700/50 rounded-lg p-5 shadow-lg shadow-orange-950/70 overflow-hidden group hover:shadow-orange-700/50 transition duration-300 dark:bg-gray-900 dark:border-orange-700/50">
      <div class="absolute inset-0 bg-gradient-to-tr from-amber-900/20 to-orange-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      <h2 class="text-2xl font-bold text-orange-400 mb-4 flex items-center z-10 relative">
        <svg class="w-6 h-6 mr-2 text-yellow-500" 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>
        CLIENT PROFILES
      </h2>
      <p class="text-sm text-yellow-200 mb-4 z-10 relative">Active customer profiles and recent interactions.</p>
      <ul class="space-y-3 z-10 relative">
        <li class="flex items-center bg-gray-800/50 p-2 rounded-md hover:bg-gray-700/70 transition duration-200">
          <img class="w-8 h-8 rounded-full mr-3 border border-orange-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="text-sm font-semibold text-orange-300">NeoTech Dynamics</p>
            <p class="text-xs text-yellow-400">Last login: 2 days ago</p>
          </div>
          <span class="text-xs text-green-400">+1.2%</span>
        </li>
        <li class="flex items-center bg-gray-800/50 p-2 rounded-md hover:bg-gray-700/70 transition duration-200">
          <img class="w-8 h-8 rounded-full mr-3 border border-orange-500" src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="text-sm font-semibold text-orange-300">Synaptic Nexus Corp</p>
            <p class="text-xs text-yellow-400">New lead: 5 hours ago</p>
          </div>
          <span class="text-xs text-yellow-400">New</span>
        </li>
        <li class="flex items-center bg-gray-800/50 p-2 rounded-md hover:bg-gray-700/70 transition duration-200">
          <img class="w-8 h-8 rounded-full mr-3 border border-orange-500" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="text-sm font-semibold text-orange-300">Quantum Robotics</p>
            <p class="text-xs text-yellow-400">Upcoming meeting</p>
          </div>
          <span class="text-xs text-red-400">-0.5%</span>
        </li>
      </ul>
      <button class="mt-4 w-full bg-orange-700 text-yellow-50 shadow-md shadow-orange-950/50 py-2 rounded-md hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 hover:scale-[1.01] transition-transform duration-200 z-10 relative">View All Customers</button>
    </div>

    <!-- Sales Performance Card -->
    <div class="relative bg-gray-900 border border-orange-700/50 rounded-lg p-5 shadow-lg shadow-orange-950/70 overflow-hidden group hover:shadow-orange-700/50 transition duration-300 dark:bg-gray-900 dark:border-orange-700/50">
      <div class="absolute inset-0 bg-gradient-to-tr from-amber-900/20 to-orange-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      <h2 class="text-2xl font-bold text-orange-400 mb-4 flex items-center z-10 relative">
        <svg class="w-6 h-6 mr-2 text-yellow-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 3a1 1 0 011-1h2a1 1 0 011 1v13a1 1 0 01-1 1h-2a1 1 0 01-1-1V3z"></path></svg>
        SALES OVERVIEW
      </h2>
      <div class="text-center mb-4 z-10 relative">
        <p class="text-4xl font-bold text-orange-300 mb-1"><span class="text-yellow-400">$</span>128,450</p>
        <p class="text-sm text-yellow-200">Revenue this cycle</p>
      </div>
      <div class="relative w-full h-32 bg-gray-800/70 rounded-md p-2 mb-4 z-10 relative">
        <!-- Placeholder for a more complex chart (e.g., SVG or image) -->
        <img src="https://picsum.photos/400/200?random=1" alt="Sales Chart" class="w-full h-full object-cover rounded-md opacity-70 group-hover:opacity-90 transition-opacity duration-300" />
        <div class="absolute inset-0 flex items-center justify-center text-orange-400 font-bold text-sm leading-none">[ANALYTICS FEED]</div>
      </div>
      <div class="flex justify-between text-sm z-10 relative">
        <div>
          <p class="text-yellow-400">Avg Deal:</p>
          <p class="text-orange-300">$2,560</p>
        </div>
        <div>
          <p class="text-yellow-400">Conversion:</p>
          <p class="text-orange-300">18.3%</p>
        </div>
        <div>
          <p class="text-yellow-400">Growth:</p>
          <p class="text-green-400">+4.7%</p>
        </div>
      </div>
      <button class="mt-4 w-full bg-orange-700 text-yellow-50 shadow-md shadow-orange-950/50 py-2 rounded-md hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 hover:scale-[1.01] transition-transform duration-200 z-10 relative">Deep Dive Analytics</button>
    </div>

    <!-- Interactive Task Management Card - Span 2 columns on larger screens -->
    <div class="relative bg-gray-900 border border-orange-700/50 rounded-lg p-5 shadow-lg shadow-orange-950/70 overflow-hidden lg:col-span-2 group hover:shadow-orange-700/50 transition duration-300 dark:bg-gray-900 dark:border-orange-700/50">
      <div class="absolute inset-0 bg-gradient-to-tr from-amber-900/20 to-orange-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      <h2 class="text-2xl font-bold text-orange-400 mb-4 flex items-center z-10 relative">
        <svg class="w-6 h-6 mr-2 text-yellow-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
        TASK_FLOW CONTROL
      </h2>
      <div class="flex flex-col sm:flex-row gap-4 mb-4 z-10 relative">
        <input type="text" placeholder="New task description..." class="flex-1 bg-gray-800 border border-orange-700 px-4 py-2 rounded-md text-orange-200 placeholder-yellow-300/50 focus:outline-none focus:ring-2 focus:ring-orange-500" />
        <button class="bg-orange-700 text-yellow-50 shadow-md shadow-orange-950/50 px-5 py-2 rounded-md hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 hover:scale-[1.01] transition-transform duration-200">Add Task</button>
      </div>
      <ul class="space-y-3 z-10 relative">
        <li class="flex items-center bg-gray-800/50 p-3 rounded-md hover:bg-gray-700/70 transition duration-200">
          <input type="checkbox" class="form-checkbox h-5 w-5 text-orange-500 bg-gray-700 border-orange-700 rounded focus:ring-orange-500 cursor-pointer" checked>
          <div class="ml-4 flex-1">
            <p class="text-orange-300 font-semibold line-through">Finalize Q3 Synergy Report</p>
            <p class="text-xs text-yellow-400">Due: 2024-10-26</p>
          </div>
          <span class="text-xs text-green-400">Completed</span>
        </li>
        <li class="flex items-center bg-gray-800/50 p-3 rounded-md hover:bg-gray-700/70 transition duration-200">
          <input type="checkbox" class="form-checkbox h-5 w-5 text-orange-500 bg-gray-700 border-orange-700 rounded focus:ring-orange-500 cursor-pointer">
          <div class="ml-4 flex-1">
            <p class="text-orange-300 font-semibold">Client Call: Project Alpha Status</p>
            <p class="text-xs text-yellow-400">Due: 2024-10-28 <span class="text-red-400">[PRIORITY]</span></p>
          </div>
          <span class="text-xs text-yellow-400">Pending</span>
        </li>
        <li class="flex items-center bg-gray-800/50 p-3 rounded-md hover:bg-gray-700/70 transition duration-200">
          <input type="checkbox" class="form-checkbox h-5 w-5 text-orange-500 bg-gray-700 border-orange-700 rounded focus:ring-orange-500 cursor-pointer">
          <div class="ml-4 flex-1">
            <p class="text-orange-300 font-semibold">Review CRM Logs for Anomaly 7</p>
            <p class="text-xs text-yellow-400">Due: 2024-10-29</p>
          </div>
          <span class="text-xs text-yellow-400">Pending</span>
        </li>
      </ul>
      <button class="mt-4 w-full bg-orange-700 text-yellow-50 shadow-md shadow-orange-950/50 py-2 rounded-md hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 hover:scale-[1.01] transition-transform duration-200 z-10 relative">Manage All Tasks</button>
    </div>

    <!-- Quick Stats Card -->
    <div class="relative bg-gray-900 border border-orange-700/50 rounded-lg p-5 shadow-lg shadow-orange-950/70 overflow-hidden group hover:shadow-orange-700/50 transition duration-300 dark:bg-gray-900 dark:border-orange-700/50">
      <div class="absolute inset-0 bg-gradient-to-tr from-amber-900/20 to-orange-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      <h2 class="text-2xl font-bold text-orange-400 mb-4 flex items-center z-10 relative">
        <svg class="w-6 h-6 mr-2 text-yellow-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17.883 11.232C17.265 10.485 16.29 10 15 10c-1.396 0-2.584.279-3.522.687L9 11.232V14.5A.5.5 0 018.5 15h-2a.5.5 0 01-.5-.5V8.216A.5.5 0 016.146 7.785l.775-.775C7.309 6.275 8.04 6 9 6c.71 0 1.34.162 1.895.424L12 7.375V11a.5.5 0 01-.5.5h-2a.5.5 0 01-.5-.5v-4.883c.969-.344 2.148-.595 3.52-.595 1.765 0 3.23.513 4.143 1.258l-.634.789c-.5-.402-1.3-.647-2.274-.647-1.127 0-2.12.39-2.828.98L13 13h-2v3a1 1 0 001 1h4a1 1 0 001-1v-5.285c.618-.466 1.07-1.077 1.383-1.815z"></path></svg>
        SYSTEM STATUS
      </h2>
      <div class="text-sm space-y-3 z-10 relative">
        <div class="flex justify-between items-center">
          <span class="text-yellow-400">Client Connections:</span>
          <span class="text-orange-300 font-bold">482_online</span>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-yellow-400">Data Traffic:</span>
          <span class="text-orange-300 font-bold">~1.2 TB/hr</span>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-yellow-400">Server Latency:</span>
          <span class="text-green-400 font-bold">&lt;50ms</span>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-yellow-400">Active Sessions:</span>
          <span class="text-orange-300 font-bold">127</span>
        </div>
      </div>
      <button class="mt-4 w-full bg-orange-700 text-yellow-50 shadow-md shadow-orange-950/50 py-2 rounded-md hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 hover:scale-[1.01] transition-transform duration-200 z-10 relative">Run Diagnostics</button>
    </div>

    <!-- Recent Activities Feed Card -->
    <div class="relative bg-gray-900 border border-orange-700/50 rounded-lg p-5 shadow-lg shadow-orange-950/70 overflow-hidden group hover:shadow-orange-700/50 transition duration-300 dark:bg-gray-900 dark:border-orange-700/50">
      <div class="absolute inset-0 bg-gradient-to-tr from-amber-900/20 to-orange-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      <h2 class="text-2xl font-bold text-orange-400 mb-4 flex items-center z-10 relative">
        <svg class="w-6 h-6 mr-2 text-yellow-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
        ACTIVITY LOG
      </h2>
      <ul class="space-y-3 text-sm z-10 relative">
        <li class="flex items-start bg-gray-800/50 p-2 rounded-md hover:bg-gray-700/70 transition duration-200">
          <div class="flex-shrink-0 w-2 h-2 rounded-full mt-1.5 mr-3 bg-green-500"></div>
          <div>
            <p class="text-orange-300"><span class="text-yellow-400 font-semibold">User 'JADE_OPS'</span> updated lead status for <span class="text-orange-400">'Project Chimera'</span>.</p>
            <p class="text-xs text-yellow-400">15 minutes ago</p>
          </div>
        </li>
        <li class="flex items-start bg-gray-800/50 p-2 rounded-md hover:bg-gray-700/70 transition duration-200">
          <div class="flex-shrink-0 w-2 h-2 rounded-full mt-1.5 mr-3 bg-blue-500"></div>
          <div>
            <p class="text-orange-300"><span class="text-yellow-400 font-semibold">System_Bot_RX</span> initiated data backup protocol.</p>
            <p class="text-xs text-yellow-400">1 hour ago</p>
          </div>
        </li>
        <li class="flex items-start bg-gray-800/50 p-2 rounded-md hover:bg-gray-700/70 transition duration-200">
          <div class="flex-shrink-0 w-2 h-2 rounded-full mt-1.5 mr-3 bg-red-500"></div>
          <div>
            <p class="text-orange-300"><span class="text-yellow-400 font-semibold">Client 'NeuralNet Inc.'</span> payment processing FAILED. Alert issued.</p>
            <p class="text-xs text-yellow-400">3 hours ago</p>
          </div>
        </li>
      </ul>
      <button class="mt-4 w-full bg-orange-700 text-yellow-50 shadow-md shadow-orange-950/50 py-2 rounded-md hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 hover:scale-[1.01] transition-transform duration-200 z-10 relative">View Full Log</button>
    </div>

  </div>

  <!-- Footer/System Info -->
  <div class="mt-8 text-center text-yellow-500/70 text-sm">
    <p>© 2077 CyberCorp Solutions. All rights reserved. // <span class="text-orange-600">SECURE_CHANNEL_ACTIVE</span></p>
  </div>

  <!-- Tailwind JIT compatibility (not part of component, but useful for dev) -->
  <style>
    @keyframes pulse-slow {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.7; }
    }
    .animate-pulse-slow {
      animation: pulse-slow 3s infinite ease-in-out;
    }
  </style>

</div>

Course_Grid_Layout_Component

A responsive and visually appealing grid layout component for educational platforms, featuring course cards with warm sunset tones, Material Design shadows, and dark mode support.

Open Preview

                <div class="bg-gradient-to-br from-orange-50 to-amber-100 py-12 dark:from-gray-900 dark:to-gray-800 transition-colors duration-500 min-h-screen">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-4xl font-extrabold text-orange-800 mb-8 text-center dark:text-amber-300">
      Explore Our Courses
    </h2>
    <p class="text-lg text-orange-700 mb-12 text-center max-w-2xl mx-auto dark:text-gray-300">
      Dive into a world of knowledge with our expertly curated courses. From foundational concepts to advanced topics, there's always something new to learn.
    </p>

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

      <!-- Course Card 1 -->
      <div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 dark:bg-gray-800 dark:shadow-slate-700 dark:hover:shadow-slate-600 flex flex-col">
        <img src="https://picsum.photos/400/250?random=1" alt="Course thumbnail - Web Development Basics" class="rounded-t-xl object-cover h-48 w-full">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="text-xl font-bold text-orange-800 mb-2 dark:text-amber-300">Web Development Fundamentals</h3>
          <p class="text-sm text-gray-600 mb-4 dark:text-gray-400 flex-grow">Learn the essentials of HTML, CSS, and JavaScript to build your first websites. Perfect for beginners!</p>
          <div class="flex items-center text-sm text-gray-500 mb-4 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-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"></path></svg>
            <span>4.8 (1,234 reviews)</span>
          </div>
          <div class="flex items-center mb-4">
            <img class="w-8 h-8 rounded-full mr-3 border-2 border-orange-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/men/7.jpg" alt="Instructor avatar">
            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">John Doe</span>
          </div>
          <a href="#" class="mt-auto inline-block bg-orange-600 text-white font-medium py-3 px-6 rounded-lg text-center shadow-md hover:bg-orange-700 transition-colors duration-300 dark:bg-amber-600 dark:hover:bg-amber-700">
            View Course
          </a>
        </div>
      </div>

      <!-- Course Card 2 -->
      <div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 dark:bg-gray-800 dark:shadow-slate-700 dark:hover:shadow-slate-600 flex flex-col">
        <img src="https://picsum.photos/400/250?random=2" alt="Course thumbnail - Data Science Essentials" class="rounded-t-xl object-cover h-48 w-full">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="text-xl font-bold text-orange-800 mb-2 dark:text-amber-300">Data Science Essentials</h3>
          <p class="text-sm text-gray-600 mb-4 dark:text-gray-400 flex-grow">Uncover the power of data analysis, statistics, and machine learning algorithms using Python.</p>
          <div class="flex items-center text-sm text-gray-500 mb-4 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-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"></path></svg>
            <span>4.9 (987 reviews)</span>
          </div>
          <div class="flex items-center mb-4">
            <img class="w-8 h-8 rounded-full mr-3 border-2 border-orange-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/women/8.jpg" alt="Instructor avatar">
            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Jane Smith</span>
          </div>
          <a href="#" class="mt-auto inline-block bg-orange-600 text-white font-medium py-3 px-6 rounded-lg text-center shadow-md hover:bg-orange-700 transition-colors duration-300 dark:bg-amber-600 dark:hover:bg-amber-700">
            View Course
          </a>
        </div>
      </div>

      <!-- Course Card 3 -->
      <div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 dark:bg-gray-800 dark:shadow-slate-700 dark:hover:shadow-slate-600 flex flex-col">
        <img src="https://picsum.photos/400/250?random=3" alt="Course thumbnail - Mobile App Development" class="rounded-t-xl object-cover h-48 w-full">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="text-xl font-bold text-orange-800 mb-2 dark:text-amber-300">Mobile App Development with React Native</h3>
          <p class="text-sm text-gray-600 mb-4 dark:text-gray-400 flex-grow">Build cross-platform mobile applications for iOS and Android using a single codebase.</p>
          <div class="flex items-center text-sm text-gray-500 mb-4 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-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"></path></svg>
            <span>4.7 (765 reviews)</span>
          </div>
          <div class="flex items-center mb-4">
            <img class="w-8 h-8 rounded-full mr-3 border-2 border-orange-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/women/9.jpg" alt="Instructor avatar">
            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Emily White</span>
          </div>
          <a href="#" class="mt-auto inline-block bg-orange-600 text-white font-medium py-3 px-6 rounded-lg text-center shadow-md hover:bg-orange-700 transition-colors duration-300 dark:bg-amber-600 dark:hover:bg-amber-700">
            View Course
          </a>
        </div>
      </div>

      <!-- Course Card 4 -->
      <div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 dark:bg-gray-800 dark:shadow-slate-700 dark:hover:shadow-slate-600 flex flex-col">
        <img src="https://picsum.photos/400/250?random=4" alt="Course thumbnail - Digital Marketing Strategy" class="rounded-t-xl object-cover h-48 w-full">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="text-xl font-bold text-orange-800 mb-2 dark:text-amber-300">Digital Marketing Strategy</h3>
          <p class="text-sm text-gray-600 mb-4 dark:text-gray-400 flex-grow">Master SEO, social media, content marketing, and paid advertising to boost online presence.</p>
          <div class="flex items-center text-sm text-gray-500 mb-4 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-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"></path></svg>
            <span>4.6 (1,012 reviews)</span>
          </div>
          <div class="flex items-center mb-4">
            <img class="w-8 h-8 rounded-full mr-3 border-2 border-orange-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Instructor avatar">
            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">David Lee</span>
          </div>
          <a href="#" class="mt-auto inline-block bg-orange-600 text-white font-medium py-3 px-6 rounded-lg text-center shadow-md hover:bg-orange-700 transition-colors duration-300 dark:bg-amber-600 dark:hover:bg-amber-700">
            View Course
          </a>
        </div>
      </div>

      <!-- Course Card 5 -->
      <div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 dark:bg-gray-800 dark:shadow-slate-700 dark:hover:shadow-slate-600 flex flex-col">
        <img src="https://picsum.photos/400/250?random=5" alt="Course thumbnail - UI/UX Design Fundamentals" class="rounded-t-xl object-cover h-48 w-full">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="text-xl font-bold text-orange-800 mb-2 dark:text-amber-300">UI/UX Design Fundamentals</h3>
          <p class="text-sm text-gray-600 mb-4 dark:text-gray-400 flex-grow">Craft intuitive and beautiful user interfaces and experiences with design principles.</p>
          <div class="flex items-center text-sm text-gray-500 mb-4 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-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"></path></svg>
            <span>4.9 (890 reviews)</span>
          </div>
          <div class="flex items-center mb-4">
            <img class="w-8 h-8 rounded-full mr-3 border-2 border-orange-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/men/11.jpg" alt="Instructor avatar">
            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Chris Green</span>
          </div>
          <a href="#" class="mt-auto inline-block bg-orange-600 text-white font-medium py-3 px-6 rounded-lg text-center shadow-md hover:bg-orange-700 transition-colors duration-300 dark:bg-amber-600 dark:hover:bg-amber-700">
            View Course
          </a>
        </div>
      </div>

      <!-- Course Card 6 -->
      <div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 dark:bg-gray-800 dark:shadow-slate-700 dark:hover:shadow-slate-600 flex flex-col">
        <img src="https://picsum.photos/400/250?random=6" alt="Course thumbnail - Cloud Computing Basics" class="rounded-t-xl object-cover h-48 w-full">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="text-xl font-bold text-orange-800 mb-2 dark:text-amber-300">Cloud Computing Fundamentals</h3>
          <p class="text-sm text-gray-600 mb-4 dark:text-gray-400 flex-grow">Get started with cloud platforms like AWS, Azure, and Google Cloud, covering core services.</p>
          <div class="flex items-center text-sm text-gray-500 mb-4 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-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"></path></svg>
            <span>4.7 (654 reviews)</span>
          </div>
          <div class="flex items-center mb-4">
            <img class="w-8 h-8 rounded-full mr-3 border-2 border-orange-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Instructor avatar">
            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Olivia Brown</span>
          </div>
          <a href="#" class="mt-auto inline-block bg-orange-600 text-white font-medium py-3 px-6 rounded-lg text-center shadow-md hover:bg-orange-700 transition-colors duration-300 dark:bg-amber-600 dark:hover:bg-amber-700">
            View Course
          </a>
        </div>
      </div>

      <!-- Course Card 7 -->
      <div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 dark:bg-gray-800 dark:shadow-slate-700 dark:hover:shadow-slate-600 flex flex-col">
        <img src="https://picsum.photos/400/250?random=7" alt="Course thumbnail - Cybersecurity Introduction" class="rounded-t-xl object-cover h-48 w-full">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="text-xl font-bold text-orange-800 mb-2 dark:text-amber-300">Cybersecurity Intro</h3>
          <p class="text-sm text-gray-600 mb-4 dark:text-gray-400 flex-grow">Understand common cyber threats and how to protect systems and data from attacks.</p>
          <div class="flex items-center text-sm text-gray-500 mb-4 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-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"></path></svg>
            <span>4.5 (501 reviews)</span>
          </div>
          <div class="flex items-center mb-4">
            <img class="w-8 h-8 rounded-full mr-3 border-2 border-orange-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/men/13.jpg" alt="Instructor avatar">
            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Robert Hall</span>
          </div>
          <a href="#" class="mt-auto inline-block bg-orange-600 text-white font-medium py-3 px-6 rounded-lg text-center shadow-md hover:bg-orange-700 transition-colors duration-300 dark:bg-amber-600 dark:hover:bg-amber-700">
            View Course
          </a>
        </div>
      </div>

      <!-- Course Card 8 -->
      <div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 dark:bg-gray-800 dark:shadow-slate-700 dark:hover:shadow-slate-600 flex flex-col">
        <img src="https://picsum.photos/400/250?random=8" alt="Course thumbnail - Project Management Basics" class="rounded-t-xl object-cover h-48 w-full">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="text-xl font-bold text-orange-800 mb-2 dark:text-amber-300">Project Management PMBOK</h3>
          <p class="text-sm text-gray-600 mb-4 dark:text-gray-400 flex-grow">Learn agile methodologies, project planning, execution, and risk management.</p>
          <div class="flex items-center text-sm text-gray-500 mb-4 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-orange-500 dark:text-orange-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-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"></path></svg>
            <span>4.8 (1,500 reviews)</span>
          </div>
          <div class="flex items-center mb-4">
            <img class="w-8 h-8 rounded-full mr-3 border-2 border-orange-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/women/14.jpg" alt="Instructor avatar">
            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Sophia Clark</span>
          </div>
          <a href="#" class="mt-auto inline-block bg-orange-600 text-white font-medium py-3 px-6 rounded-lg text-center shadow-md hover:bg-orange-700 transition-colors duration-300 dark:bg-amber-600 dark:hover:bg-amber-700">
            View Course
          </a>
        </div>
      </div>

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