Search Components

Media Components

Components for displaying various types of media content

Memphis_Media_Component_Educational

A responsive media component for educational platforms, designed with a Memphis-style aesthetic using bold colors, geometric shapes, and a neon/electric color scheme. Supports dark mode.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-400 to-pink-500 dark:from-gray-900 dark:to-purple-900 min-h-screen font-sans">
  <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

    <!-- Course Card 1 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-4 border-fuchsia-500 dark:border-cyan-400">
      <div class="absolute inset-0 bg-gradient-to-br from-fuchsia-400 to-electric-blue-600 dark:from-cyan-500 dark:to-lime-400 opacity-20 dark:opacity-10 transform -rotate-6 scale-125"></div>
      <div class="relative p-6">
        <img src="https://picsum.photos/id/10/400/250" alt="Course Thumbnail" class="w-full h-48 object-cover rounded-lg mb-4 border-2 border-dashed border-lime-400 dark:border-fuchsia-400">
        <h3 class="text-2xl font-extrabold text-blue-800 dark:text-lime-400 mb-2 leading-tight">Introduction to Quantum Computing</h3>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Dive into the fascinating world of quantum mechanics and its computational applications.</p>
        <div class="flex items-center justify-between mb-4">
          <div class="flex -space-x-2 overflow-hidden">
            <img class="inline-block h-8 w-8 rounded-full ring-2 ring-fuchsia-500 dark:ring-cyan-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Instructor 1">
            <img class="inline-block h-8 w-8 rounded-full ring-2 ring-fuchsia-500 dark:ring-cyan-400" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Instructor 2">
          </div>
          <span class="text-lg font-bold text-hot-pink-600 dark:text-electric-blue-400">$199.99</span>
        </div>
        <button class="w-full py-3 px-6 rounded-lg bg-lime-400 text-blue-900 dark:bg-fuchsia-500 dark:text-white font-bold uppercase tracking-wider text-lg transform hover:scale-95 transition-transform duration-200 ease-in-out shadow-lg hover:shadow-xl">
          Enroll Now
        </button>
      </div>
    </div>

    <!-- Course Card 2 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-4 border-lime-400 dark:border-fuchsia-500">
      <div class="absolute inset-0 bg-gradient-to-br from-lime-400 to-hot-pink-500 dark:from-fuchsia-500 dark:to-cyan-400 opacity-20 dark:opacity-10 transform rotate-12 scale-125"></div>
      <div class="relative p-6">
        <img src="https://picsum.photos/id/25/400/250" alt="Course Thumbnail" class="w-full h-48 object-cover rounded-lg mb-4 border-2 border-dashed border-fuchsia-400 dark:border-lime-400">
        <h3 class="text-2xl font-extrabold text-blue-800 dark:text-lime-400 mb-2 leading-tight">Memphis Design Fundamentals</h3>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Master the bold aesthetics of 80s Memphis design with practical projects.</p>
        <div class="flex items-center justify-between mb-4">
          <div class="flex -space-x-2 overflow-hidden">
            <img class="inline-block h-8 w-8 rounded-full ring-2 ring-lime-500 dark:ring-purple-400" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Instructor 1">
            <img class="inline-block h-8 w-8 rounded-full ring-2 ring-lime-500 dark:ring-purple-400" src="https://randomuser.me/api/portraits/women/67.jpg" alt="Instructor 2">
          </div>
          <span class="text-lg font-bold text-electric-blue-600 dark:text-hot-pink-400">$149.99</span>
        </div>
        <button class="w-full py-3 px-6 rounded-lg bg-fuchsia-500 text-white dark:bg-lime-400 dark:text-blue-900 font-bold uppercase tracking-wider text-lg transform hover:scale-95 transition-transform duration-200 ease-in-out shadow-lg hover:shadow-xl">
          Learn More
        </button>
      </div>
    </div>

    <!-- Course Card 3 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-4 border-cyan-400 dark:border-hot-pink-500">
      <div class="absolute inset-0 bg-gradient-to-br from-cyan-400 to-purple-500 dark:from-hot-pink-500 dark:to-electric-blue-400 opacity-20 dark:opacity-10 transform -rotate-12 scale-125"></div>
      <div class="relative p-6">
        <img src="https://picsum.photos/id/40/400/250" alt="Course Thumbnail" class="w-full h-48 object-cover rounded-lg mb-4 border-2 border-dashed border-hot-pink-400 dark:border-cyan-400">
        <h3 class="text-2xl font-extrabold text-blue-800 dark:text-lime-400 mb-2 leading-tight">Advanced AI & Machine Learning</h3>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Explore cutting-edge AI algorithms and build intelligent systems.</p>
        <div class="flex items-center justify-between mb-4">
          <div class="flex -space-x-2 overflow-hidden">
            <img class="inline-block h-8 w-8 rounded-full ring-2 ring-cyan-500 dark:ring-fuchsia-400" src="https://randomuser.me/api/portraits/women/78.jpg" alt="Instructor 1">
            <img class="inline-block h-8 w-8 rounded-full ring-2 ring-cyan-500 dark:ring-fuchsia-400" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Instructor 2">
          </div>
          <span class="text-lg font-bold text-lime-600 dark:text-fuchsia-400">$249.99</span>
        </div>
        <button class="w-full py-3 px-6 rounded-lg bg-electric-blue-500 text-white dark:bg-hot-pink-400 dark:text-white font-bold uppercase tracking-wider text-lg transform hover:scale-95 transition-transform duration-200 ease-in-out shadow-lg hover:shadow-xl">
          View Details
        </button>
      </div>
    </div>

    <!-- Video Lesson Card -->
    <div class="relative md:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-4 border-hot-pink-500 dark:border-lime-400">
      <div class="absolute inset-0 bg-gradient-to-br from-hot-pink-400 to-lime-500 dark:from-electric-blue-500 dark:to-fuchsia-400 opacity-20 dark:opacity-10 transform scale-110"></div>
      <div class="relative p-6 flex flex-col md:flex-row items-center">
        <div class="md:w-1/2 mb-6 md:mb-0 md:mr-6">
          <img src="https://picsum.photos/id/90/600/350" alt="Video Thumbnail" class="w-full rounded-lg shadow-xl border-2 border-dashed border-electric-blue-400 dark:border-hot-pink-400">
        </div>
        <div class="md:w-1/2">
          <span class="text-xs font-bold uppercase tracking-wide text-hot-pink-600 dark:text-lime-400 mb-2 block">Featured Lesson</span>
          <h3 class="text-3xl font-extrabold text-blue-800 dark:text-lime-400 mb-3 leading-tight">Understanding Asynchronous JavaScript</h3>
          <p class="text-gray-700 dark:text-gray-300 text-base mb-6">A comprehensive guide to promises, async/await, and event loops in modern JavaScript development.</p>
          <div class="flex items-center mb-6">
            <img class="h-10 w-10 rounded-full ring-2 ring-hot-pink-500 dark:ring-lime-400 mr-3" src="https://randomuser.me/api/portraits/men/7.jpg" alt="Instructor">
            <div>
              <p class="text-sm font-bold text-gray-800 dark:text-gray-200">Dr. Elara Vance</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Senior Developer & Educator</p>
            </div>
          </div>
          <button class="w-full md:w-auto py-3 px-8 rounded-lg bg-electric-blue-500 text-white dark:bg-fuchsia-500 dark:text-white font-bold uppercase tracking-wider text-lg transform hover:scale-95 transition-transform duration-200 ease-in-out shadow-lg hover:shadow-xl">
            Watch Now
            <span class="ml-2 text-2xl">&#9654;</span>
          </button>
        </div>
      </div>
    </div>

    <!-- Downloadable Resource Card -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-4 border-fuchsia-500 dark:border-cyan-400">
      <div class="absolute inset-0 bg-gradient-to-br from-fuchsia-400 to-electric-blue-600 dark:from-cyan-500 dark:to-lime-400 opacity-20 dark:opacity-10 transform rotate-6 scale-125"></div>
      <div class="relative p-6">
        <div class="text-center mb-4">
          <svg class="mx-auto h-16 w-16 text-lime-500 dark:text-fuchsia-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm0-2a6 6 0 100-12 6 6 0 000 12z" clip-rule="evenodd"></path>
          </svg>
        </div>
        <h3 class="text-2xl font-extrabold text-blue-800 dark:text-lime-400 mb-2 leading-tight text-center">Essential Python Cheat Sheet</h3>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 text-center">A quick reference guide for Python syntax, functions, and common libraries.</p>
        <span class="block text-center text-xs font-semibold text-gray-500 dark:text-gray-400 mb-4">PDF, 2.5 MB</span>
        <button class="w-full py-3 px-6 rounded-lg bg-cyan-400 text-blue-900 dark:bg-electric-blue-500 dark:text-white font-bold uppercase tracking-wider text-lg transform hover:scale-95 transition-transform duration-200 ease-in-out shadow-lg hover:shadow-xl">
          Download PDF
        </button>
      </div>
    </div>

  </div>
</div>

<style>
  /* Custom colors for Memphis theme */
  /* You would typically define these in tailwind.config.js */
  .bg-electric-blue-500 {
    background-color: #00FFFF; /* Aqua/Electric Blue */
  }
  .text-electric-blue-500 {
    color: #00FFFF;
  }
  .dark\:bg-electric-blue-500 {
    background-color: #00FFFF;
  }
  .dark\:text-electric-blue-400 {
    color: #00FFFF;
  }

  .bg-hot-pink-500 {
    background-color: #FF1493; /* Deep Pink/Hot Pink */
  }
  .text-hot-pink-600 {
    color: #C71585; /* Darker hot pink */
  }
  .dark\:bg-hot-pink-400 {
    background-color: #FF69B4; /* Lighter hot pink for dark mode */
  }
  .dark\:text-hot-pink-400 {
    color: #FF69B4;
  }

  .bg-lime-400 {
    background-color: #A3E635; /* Lime Green */
  }
  .text-lime-400 {
    color: #A3E635;
  }
  .text-lime-600 {
    color: #84CC16;
  }
  .dark\:bg-lime-400 {
    background-color: #BEF264; /* Lighter lime for dark mode */
  }
  .dark\:text-lime-400 {
    color: #BEF264;
  }

  .border-fuchsia-500 {
    border-color: #D946EF; /* Brighter fuchsia */
  }
  .border-cyan-400 {
    border-color: #22D3EE; /* Brighter cyan */
  }
  .border-hot-pink-400 {
    border-color: #FF69B4; 
  }
  .border-electric-blue-400 {
    border-color: #00FFFF;
  }

  /* Background gradients for overall theme */
  .from-purple-400 {
      --tw-gradient-from: #C084FC;
      --tw-gradient-to: rgba(192, 132, 252, 0);
  }
  .to-pink-500 {
      --tw-gradient-to: #EC4899;
  }

  .dark\:from-gray-900 {
      --tw-gradient-from: #111827;
      --tw-gradient-to: rgba(17, 24, 32, 0);
  }
  .dark\:to-purple-900 {
      --tw-gradient-to: #581C87;
  }
</style>

Playful_Booking_Media_Component

A simple, playful, and responsive media component for booking/reservation systems, featuring a triadic color scheme, rounded elements, and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-blue-50 dark:bg-gray-800 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-md mx-auto bg-white dark:bg-gray-900 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.02] border-4 border-rose-400 dark:border-rose-600">
    <div class="relative bg-rose-200 dark:bg-rose-700 h-40 overflow-hidden flex items-center justify-center p-4">
      <img src="https://picsum.photos/400/250?random=1" alt="Booking header image" class="absolute inset-0 w-full h-full object-cover rounded-t-3xl opacity-80">
      <div class="absolute inset-0 bg-gradient-to-t from-rose-400/80 to-rose-200/50 dark:from-rose-800/80 dark:to-rose-700/50"></div>
      <h2 class="relative text-center text-3xl sm:text-4xl font-extrabold text-white dark:text-gray-100 drop-shadow-lg leading-tight p-2">
        Ready to Book Your Spot?
      </h2>
    </div>

    <div class="p-6 sm:p-8 space-y-6 text-center">
      <div class="flex justify-center -mt-16 mb-4">
        <img class="w-24 h-24 sm:w-28 sm:h-28 rounded-full border-4 border-yellow-300 dark:border-yellow-500 shadow-lg object-cover" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="Service Provider Avatar">
      </div>
      
      <p class="text-gray-700 dark:text-gray-300 text-lg sm:text-xl font-semibold mb-4">
        Hello! I'm <span class="text-rose-500 dark:text-rose-400">Alex</span>,<br>your friendly service provider.
      </p>

      <p class="text-gray-600 dark:text-gray-400 text-base sm:text-lg leading-relaxed">
        Let's find the perfect time for your appointment. It's super easy!
      </p>

      <div class="flex flex-col sm:flex-row justify-center gap-4 pt-4">
        <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-yellow-400 hover:bg-yellow-500 dark:bg-yellow-600 dark:hover:bg-yellow-700 transition-colors duration-300 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
          <svg class="-ml-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
          </svg>
          Book Now
        </a>
        <a href="#" class="inline-flex items-center justify-center px-6 py-3 border-2 border-yellow-400 dark:border-yellow-600 text-base font-medium rounded-full text-yellow-600 dark:text-yellow-400 hover:bg-yellow-50 dark:hover:bg-gray-800 transition-colors duration-300 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
          <svg class="-ml-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684L10.5 9l2.5-2.5L14.5 9l1.5-1.5L18 11.5V14a2 2 0 01-2 2H8a2 2 0 01-2-2V6a2 2 0 012-2h3.28a1 1 0 01.948.684L10.5 9l2.5-2.5L14.5 9l1.5-1.5L18 11.5V14a2 2 0 01-2 2H8a2 2 0 01-2-2V6c0-1.1.9-2 2-2h3.28a1 1 0 01.948.684L10.5 9z" />
          </svg>
          Learn More
        </a>
      </div>
    </div>
  </div>
</div>

Industrial_Marketplace_Media_Component

A simple, industrial-style media component for a marketplace, featuring an image, title, and price, with a focus on raw materials and utilitarian aesthetics. Uses autumn colors and supports dark mode.

Open Preview

                <div class="p-4 sm:p-6 bg-amber-100 dark:bg-zinc-800 rounded-lg shadow-md border border-amber-300 dark:border-zinc-700 font-sans">
  <div class="relative overflow-hidden mb-4 rounded-md border-2 border-amber-500 dark:border-zinc-600">
    <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-40 sm:h-48 object-cover transition-transform duration-300 hover:scale-105">
    <span class="absolute top-2 left-2 px-3 py-1 bg-amber-700 dark:bg-amber-600 text-white text-xs font-semibold uppercase rounded-full shadow-sm">New</span>
  </div>
  <h3 class="text-lg sm:text-xl font-bold text-amber-900 dark:text-amber-100 mb-1 leading-tight">
    Industrial Gear Crate
  </h3>
  <p class="text-sm text-amber-800 dark:text-amber-300 mb-3 line-clamp-2">
    A durable and versatile gear crate, perfect for workshop storage. Crafted from reclaimed metal. Made for heavy duty use.
  </p>
  <div class="flex items-center justify-between">
    <span class="text-xl sm:text-2xl font-extrabold text-amber-700 dark:text-amber-400">
      $49.99
    </span>
    <button class="px-4 py-2 bg-amber-600 dark:bg-amber-700 text-white text-sm font-semibold rounded-md shadow-lg hover:bg-amber-700 dark:hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-800 transition-colors duration-200">
      Add to Cart
    </button>
  </div>
</div>

Media Components Component

A complex, dark mode UI media component for documentation/wiki sites, featuring a gradient rainbow color scheme. It includes various media types like video, audio, and images with detailed information and interactive elements, all responsive and using semantic HTML.

Open Preview

                <div class="min-h-screen bg-gray-950 dark:bg-gray-950 text-gray-200 p-4 sm:p-8 lg:p-12 font-sans overflow-hidden">

  <div class="max-w-7xl mx-auto space-y-12">

    <!-- Page Title/Header -->
    <header class="mb-8">
      <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold pb-4 text-transparent bg-clip-text bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 dark:from-purple-400 dark:via-pink-400 dark:to-red-400">
        Multimedia Gallery
      </h1>
      <p class="text-lg sm:text-xl text-gray-400 dark:text-gray-500 max-w-3xl">
        Explore a rich collection of videos, audio clips, and images. Each item offers detailed information and quick access for learning.
      </p>
    </header>

    <!-- Main Grid Layout for Media Categories -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Video Section -->
      <section class="rounded-xl shadow-lg p-6 relative overflow-hidden"
        style="background: linear-gradient(135deg, rgba(30,30,40,0.8), rgba(60,20,60,0.8)); border: 1px solid rgba(100,50,100,0.5);">
        <div class="absolute inset-0 blur-xl opacity-20" style="background: radial-gradient(circle at top left, #6B46C1, transparent 50%), radial-gradient(circle at bottom right, #FF0077, transparent 50%);"></div>
        <div class="relative z-10">
          <h2 class="text-2xl font-bold mb-4 text-purple-300 dark:text-purple-400">Video Tutorials</h2>
          <div class="space-y-6">

            <!-- Video Card 1 -->
            <article class="bg-violet-900 bg-opacity-30 rounded-lg p-4 flex flex-col sm:flex-row items-start gap-4 border border-violet-800 border-opacity-50 hover:border-violet-700 hover:bg-violet-900 hover:bg-opacity-50 transition duration-300">
              <div class="relative w-full sm:w-40 h-24 sm:h-24 flex-shrink-0 rounded-md overflow-hidden bg-gray-800">
                <img src="https://picsum.photos/300/200?random=1" alt="Video Thumbnail" class="w-full h-full object-cover">
                <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-40">
                  <svg class="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M8 5v14l11-7z"/>
                  </svg>
                </div>
              </div>
              <div class="flex-grow">
                <h3 class="text-lg font-semibold text-gray-100 mb-1">Understanding Async/Await</h3>
                <p class="text-sm text-gray-400 mb-2 line-clamp-2">Delve into the complexities of asynchronous programming patterns with practical examples.</p>
                <div class="flex items-center text-sm text-gray-500">
                  <span class="mr-2">12:45</span> 
                  <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Author Avatar" class="w-6 h-6 rounded-full mr-2">
                  <span>Jane Doe</span>
                </div>
              </div>
            </article>

            <!-- Video Card 2 -->
            <article class="bg-violet-900 bg-opacity-30 rounded-lg p-4 flex flex-col sm:flex-row items-start gap-4 border border-violet-800 border-opacity-50 hover:border-violet-700 hover:bg-violet-900 hover:bg-opacity-50 transition duration-300">
              <div class="relative w-full sm:w-40 h-24 sm:h-24 flex-shrink-0 rounded-md overflow-hidden bg-gray-800">
                <img src="https://picsum.photos/300/200?random=2" alt="Video Thumbnail" class="w-full h-full object-cover">
                <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-40">
                  <svg class="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M8 5v14l11-7z"/>
                  </svg>
                </div>
              </div>
              <div class="flex-grow">
                <h3 class="text-lg font-semibold text-gray-100 mb-1">CSS Grid Fundamentals</h3>
                <p class="text-sm text-gray-400 mb-2 line-clamp-2">Master the basics of CSS Grid for responsive and robust web layouts.</p>
                <div class="flex items-center text-sm text-gray-500">
                  <span class="mr-2">08:30</span>
                  <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Author Avatar" class="w-6 h-6 rounded-full mr-2">
                  <span>John Smith</span>
                </div>
              </div>
            </article>

             <a href="#" class="mt-4 block text-center text-purple-400 hover:text-purple-300 font-semibold transition-colors duration-300">View all videos &rarr;</a>

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

      <!-- Audio Section -->
      <section class="rounded-xl shadow-lg p-6 relative overflow-hidden"
        style="background: linear-gradient(135deg, rgba(30,30,40,0.8), rgba(60,20,40,0.8)); border: 1px solid rgba(130,50,70,0.5);">
        <div class="absolute inset-0 blur-xl opacity-20" style="background: radial-gradient(circle at top left, #FF0055, transparent 50%), radial-gradient(circle at bottom right, #FFAA33, transparent 50%);"></div>
        <div class="relative z-10">
          <h2 class="text-2xl font-bold mb-4 text-pink-300 dark:text-pink-400">Audio Lectures</h2>
          <div class="space-y-6">

            <!-- Audio Card 1 -->
            <article class="bg-red-900 bg-opacity-30 rounded-lg p-4 flex flex-col sm:flex-row items-center gap-4 border border-red-800 border-opacity-50 hover:border-red-700 hover:bg-red-900 hover:bg-opacity-50 transition duration-300">
              <div class="flex-shrink-0 p-2 rounded-full border border-red-700 bg-red-800 bg-opacity-70">
                <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6zm-2 16c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/>
                </svg>
              </div>
              <div class="flex-grow text-center sm:text-left">
                <h3 class="text-lg font-semibold text-gray-100 mb-1">The Future of AI Ethics</h3>
                <p class="text-sm text-gray-400 mb-2 line-clamp-2">An insightful discussion on the ethical implications of advanced AI development.</p>
                <div class="flex items-center justify-center sm:justify-start text-sm text-gray-500">
                  <span class="mr-2">45:10</span>
                  <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Speaker Avatar" class="w-6 h-6 rounded-full mr-2">
                  <span>David Lee</span>
                </div>
              </div>
            </article>

            <!-- Audio Card 2 -->
            <article class="bg-red-900 bg-opacity-30 rounded-lg p-4 flex flex-col sm:flex-row items-center gap-4 border border-red-800 border-opacity-50 hover:border-red-700 hover:bg-red-900 hover:bg-opacity-50 transition duration-300">
              <div class="flex-shrink-0 p-2 rounded-full border border-red-700 bg-red-800 bg-opacity-70">
                <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6zm-2 16c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/>
                </svg>
              </div>
              <div class="flex-grow text-center sm:text-left">
                <h3 class="text-lg font-semibold text-gray-100 mb-1">Quantum Computing Explained</h3>
                <p class="text-sm text-gray-400 mb-2 line-clamp-2">Demystifying the principles and potential of quantum computing for beginners.</p>
                <div class="flex items-center justify-center sm:justify-start text-sm text-gray-500">
                  <span class="mr-2">32:00</span>
                  <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Speaker Avatar" class="w-6 h-6 rounded-full mr-2">
                  <span>Sarah Chen</span>
                </div>
              </div>
            </article>

            <a href="#" class="mt-4 block text-center text-pink-400 hover:text-pink-300 font-semibold transition-colors duration-300">Browse all audio &rarr;</a>

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

      <!-- Image Gallery Section -->
      <section class="rounded-xl shadow-lg p-6 relative overflow-hidden lg:col-span-1"
        style="background: linear-gradient(135deg, rgba(30,30,40,0.8), rgba(40,40,60,0.8)); border: 1px solid rgba(80,80,120,0.5);">
        <div class="absolute inset-0 blur-xl opacity-20" style="background: radial-gradient(circle at top left, #33CCFF, transparent 50%), radial-gradient(circle at bottom right, #BB66FF, transparent 50%);"></div>
        <div class="relative z-10">
          <h2 class="text-2xl font-bold mb-4 text-sky-300 dark:text-sky-400">Visual Assets</h2>
          <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-4">

            <!-- Image Card 1 -->
            <figure class="group relative rounded-lg overflow-hidden bg-gray-800 aspect-video col-span-2 sm:col-span-1 lg:col-span-1 xl:col-span-1">
              <img src="https://picsum.photos/400/250?random=3" alt="Abstract Design" class="w-full h-full object-cover transform group-hover:scale-105 transition duration-300">
              <figcaption class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-3">
                <h3 class="text-sm font-semibold text-white">Futuristic Cityscape</h3>
              </figcaption>
            </figure>

            <!-- Image Card 2 -->
            <figure class="group relative rounded-lg overflow-hidden bg-gray-800 aspect-video col-span-1">
              <img src="https://picsum.photos/400/250?random=4" alt="Data Visualization" class="w-full h-full object-cover transform group-hover:scale-105 transition duration-300">
              <figcaption class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-3">
                <h3 class="text-sm font-semibold text-white">Complex Algorithms</h3>
              </figcaption>
            </figure>

            <!-- Image Card 3 -->
            <figure class="group relative rounded-lg overflow-hidden bg-gray-800 aspect-video col-span-1">
              <img src="https://picsum.photos/400/250?random=5" alt="Network Connections" class="w-full h-full object-cover transform group-hover:scale-105 transition duration-300">
              <figcaption class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-3">
                <h3 class="text-sm font-semibold text-white">Global Connectivity</h3>
              </figcaption>
            </figure>

            <!-- Image Card 4 -->
            <figure class="group relative rounded-lg overflow-hidden bg-gray-800 aspect-video col-span-1">
              <img src="https://picsum.photos/400/250?random=6" alt="Servers and Data" class="w-full h-full object-cover transform group-hover:scale-105 transition duration-300">
              <figcaption class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-3">
                <h3 class="text-sm font-semibold text-white">Cloud Infrastructure</h3>
              </figcaption>
            </figure>

            <!-- Image Card 5 -->
            <figure class="group relative rounded-lg overflow-hidden bg-gray-800 aspect-video col-span-1">
              <img src="https://picsum.photos/400/250?random=7" alt="Coding on Screen" class="w-full h-full object-cover transform group-hover:scale-105 transition duration-300">
              <figcaption class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-3">
                <h3 class="text-sm font-semibold text-white">Developer Workflow</h3>
              </figcaption>
            </figure>

          </div>
          <a href="#" class="mt-4 block text-center text-sky-400 hover:text-sky-300 font-semibold transition-colors duration-300">View all images &rarr;</a>

        </div>
      </section>

    </div>

    <!-- Featured Media Section (Example of a larger, dedicated media element) -->
    <section class="rounded-xl shadow-lg p-6 relative overflow-hidden lg:flex lg:items-center lg:space-x-8"
      style="background: linear-gradient(135deg, rgba(20,20,30,0.8), rgba(50,30,50,0.8)); border: 1px solid rgba(100,50,120,0.5);">
      <div class="absolute inset-0 blur-xl opacity-20" style="background: radial-gradient(circle at top right, #FF0099, transparent 50%), radial-gradient(circle at bottom left, #00CCFF, transparent 50%);"></div>
      <div class="relative z-10 w-full lg:w-2/5 flex-shrink-0">
        <h2 class="text-3xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-red-400 to-purple-400 dark:from-red-300 dark:to-purple-300">Featured Research Explainer</h2>
        <div class="relative aspect-video rounded-lg overflow-hidden bg-gray-800 mb-4">
          <img src="https://picsum.photos/600/400?random=8" alt="Featured Video Thumbnail" class="w-full h-full object-cover">
          <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-60">
            <button aria-label="Play video" class="group p-4 bg-purple-600 rounded-full hover:bg-purple-700 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
              <svg class="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 24 24">
                <path d="M8 5v14l11-7z"/>
              </svg>
            </button>
          </div>
        </div>
        <div class="flex items-center justify-between text-sm text-gray-400">
          <span>Duration: 18:00</span>
          <span>Published: 2023-10-26</span>
        </div>
      </div>
      <div class="relative z-10 w-full lg:w-3/5 mt-6 lg:mt-0">
        <p class="text-lg text-gray-300 mb-4 leading-relaxed">
          This comprehensive video delves into the latest breakthroughs in <strong class="text-red-300">synthetic biology</strong>, exploring its ethical dimensions and potential societal impact.
          Learn about CRISPR technology, genetic engineering, and the future of bio-innovations.
        </p>
        <p class="text-md text-gray-400 mb-6">
          <span class="font-medium text-gray-300">Tags:</span> #SyntheticBiology #CRISPR #Bioethics #GeneticEngineering #FutureTech
        </p>
        <div class="flex items-center space-x-4 mb-4">
          <img src="https://randomuser.me/api/portraits/women/5.jpg" alt="Presenter Avatar" class="w-10 h-10 rounded-full ring-2 ring-purple-500">
          <div>
            <p class="font-semibold text-gray-100">Dr. Elena Rodriguez</p>
            <p class="text-sm text-gray-500">Lead Researcher, BioTech Institute</p>
          </div>
        </div>
        <a href="#" class="inline-flex items-center px-6 py-3 rounded-full font-semibold bg-gradient-to-r from-red-600 to-purple-800 text-white shadow-lg hover:from-white hover:to-white hover:text-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-all duration-300 group">
            Watch Full Video
            <svg class="ml-2 w-4 h-4 transform group-hover:translate-x-1 transition-transform duration-300" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/>
            </svg>
        </a>
      </div>
    </section>

  </div>
</div>

Bauhaus_E-commerce_Media_Component

A responsive and functional e-commerce media component with a Bauhaus-inspired monochromatic design, dark mode support, emphasizing geometric forms and clear visual hierarchy for product presentation.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 font-sans">
  <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 bg-white dark:bg-gray-800 shadow-lg rounded-none overflow-hidden">

    <!-- Product Image Section -->
    <div class="relative col-span-1 md:col-span-2 lg:col-span-1 border-b-2 md:border-r-2 lg:border-r-2 md:border-b-0 border-gray-200 dark:border-gray-700 p-4 sm:p-6 grid place-items-center">
      <img src="https://picsum.photos/id/1018/800/600" alt="Modern Product Image" class="w-full h-auto object-cover max-h-96 md:max-h-full aspect-square" loading="lazy">
      <div class="absolute top-0 left-0 bg-yellow-400 dark:bg-yellow-600 text-gray-900 dark:text-white px-3 py-1 text-xs font-semibold uppercase tracking-wider -rotate-45 -translate-x-6 translate-y-6 pt-4 pr-4">
        New
      </div>
    </div>

    <!-- Product Details Section -->
    <div class="p-4 sm:p-6 lg:p-8 flex flex-col justify-between col-span-1">
      <div>
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white mb-2 sm:mb-4 leading-tight">
          Geometric Lamp
        </h2>
        <p class="text-lg sm:text-xl text-gray-600 dark:text-gray-400 mb-4 sm:mb-6 leading-relaxed">
          A fusion of form and function. This lamp embodies the Bauhaus principle of design simplicity and utility.
        </p>
        <div class="flex items-baseline mb-4 sm:mb-6">
          <span class="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mr-2">$199.99</span>
          <span class="text-lg sm:text-xl text-gray-500 dark:text-gray-400 line-through">$249.99</span>
        </div>
        <div class="mb-4 sm:mb-6">
          <h3 class="text-sm uppercase tracking-wide font-semibold text-gray-700 dark:text-gray-300 mb-2">Color</h3>
          <div class="flex space-x-2">
            <button aria-label="Select black color" class="w-8 h-8 rounded-full bg-gray-900 dark:bg-gray-100 ring-2 ring-transparent hover:ring-gray-400 dark:hover:ring-gray-600 focus:ring-gray-400 focus:outline-none transition-colors duration-200"></button>
            <button aria-label="Select white color" class="w-8 h-8 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 ring-2 ring-gray-900 dark:ring-white focus:ring-gray-900 focus:outline-none transition-colors duration-200"></button>
            <button aria-label="Select gray color" class="w-8 h-8 rounded-full bg-gray-500 dark:bg-gray-500 ring-2 ring-transparent hover:ring-gray-400 dark:hover:ring-gray-600 focus:ring-gray-400 focus:outline-none transition-colors duration-200"></button>
          </div>
        </div>
      </div>

      <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
        <button class="flex-1 py-3 px-6 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-lg font-bold uppercase tracking-wider shadow-md hover:bg-gray-700 dark:hover:bg-gray-300 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-gray-900 dark:focus:ring-gray-100 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
          Add to Cart
        </button>
        <button aria-label="Add to Wishlist" class="py-3 px-6 border-2 border-gray-900 dark:border-gray-100 text-gray-900 dark:text-gray-100 text-lg font-bold uppercase tracking-wider hover:bg-gray-900 hover:text-white dark:hover:bg-gray-100 dark:hover:text-gray-900 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-gray-900 dark:focus:ring-gray-100 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Additional Information / Reviews Section -->
    <div class="p-4 sm:p-6 lg:p-8 col-span-1 lg:col-span-1 border-t-2 md:border-t-0 lg:border-t-0 md:border-l-2 border-gray-200 dark:border-gray-700 flex flex-col justify-between">
      <div>
        <h3 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-white mb-3">Product Features</h3>
        <ul class="list-none space-y-2 text-gray-700 dark:text-gray-300 mb-6">
          <li class="flex items-center"><span class="text-xl font-bold mr-2 text-gray-500 dark:text-gray-400">&#9679;</span> Durable Steel Structure</li>
          <li class="flex items-center"><span class="text-xl font-bold mr-2 text-gray-500 dark:text-gray-400">&#9679;</span> Adjustable Brightness</li>
          <li class="flex items-center"><span class="text-xl font-bold mr-2 text-gray-500 dark:text-gray-400">&#9679;</span> Energy Efficient LED</li>
          <li class="flex items-center"><span class="text-xl font-bold mr-2 text-gray-500 dark:text-gray-400">&#9679;</span> Minimalist Design Aesthetic</li>
        </ul>

        <h3 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-white mb-3">Customer Reviews</h3>
        <div class="flex items-center text-gray-800 dark:text-gray-200 mb-4">
          <div class="flex text-yellow-400 dark:text-yellow-500 mr-2">
            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.071 3.292a1 1 0 00.95.691h3.468c.969 0 1.371 1.24.588 1.81L13.84 10.97c-.328.24-.46.66-.145 1.09l1.071 3.292c.3.921-.558 1.628-1.353 1.053L10 14.331c-.328-.24-.778-.24-1.106 0l-2.739 2.012c-.795.575-1.653-.132-1.353-1.053l1.07-3.292c.315-.43.183-.85-.145-1.09L3.43 8.72c-.783-.57-.38-1.81.588-1.81h3.468a1 1 0 00.95-.691l1.07-3.292z"></path></svg>
            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.071 3.292a1 1 0 00.95.691h3.468c.969 0 1.371 1.24.588 1.81L13.84 10.97c-.328.24-.46.66-.145 1.09l1.071 3.292c.3.921-.558 1.628-1.353 1.053L10 14.331c-.328-.24-.778-.24-1.106 0l-2.739 2.012c-.795.575-1.653-.132-1.353-1.053l1.07-3.292c.315-.43.183-.85-.145-1.09L3.43 8.72c-.783-.57-.38-1.81.588-1.81h3.468a1 1 0 00.95-.691l1.07-3.292z"></path></svg>
            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.071 3.292a1 1 0 00.95.691h3.468c.969 0 1.371 1.24.588 1.81L13.84 10.97c-.328.24-.46.66-.145 1.09l1.071 3.292c.3.921-.558 1.628-1.353 1.053L10 14.331c-.328-.24-.778-.24-1.106 0l-2.739 2.012c-.795.575-1.653-.132-1.353-1.053l1.07-3.292c.315-.43.183-.85-.145-1.09L3.43 8.72c-.783-.57-.38-1.81.588-1.81h3.468a1 1 0 00.95-.691l1.07-3.292z"></path></svg>
            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.071 3.292a1 1 0 00.95.691h3.468c.969 0 1.371 1.24.588 1.81L13.84 10.97c-.328.24-.46.66-.145 1.09l1.071 3.292c.3.921-.558 1.628-1.353 1.053L10 14.331c-.328-.24-.778-.24-1.106 0l-2.739 2.012c-.795.575-1.653-.132-1.353-1.053l1.07-3.292c.315-.43.183-.85-.145-1.09L3.43 8.72c-.783-.57-.38-1.81.588-1.81h3.468a1 1 0 00.95-.691l1.07-3.292z"></path></svg>
            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.071 3.292a1 1 0 00.95.691h3.468c.969 0 1.371 1.24.588 1.81L13.84 10.97c-.328.24-.46.66-.145 1.09l1.071 3.292c.3.921-.558 1.628-1.353 1.053L10 14.331c-.328-.24-.778-.24-1.106 0l-2.739 2.012c-.795.575-1.653-.132-1.353-1.053l1.07-3.292c.315-.43.183-.85-.145-1.09L3.43 8.72c-.783-.57-.38-1.81.588-1.81h3.468a1 1 0 00.95-.691l1.07-3.292z"></path></svg>
          </div>
          <span class="text-sm italic">(45 Reviews)</span>
        </div>

        <article class="bg-gray-50 dark:bg-gray-700 p-4 rounded-none border border-gray-200 dark:border-gray-600 mb-4">
          <div class="flex items-center mb-2">
            <img class="h-10 w-10 rounded-full object-cover mr-3 border-2 border-gray-300 dark:border-gray-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
              <p class="font-semibold text-gray-900 dark:text-white">John Doe</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Verified Purchase</p>
            </div>
          </div>
          <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">"Absolutely love the design! Fits perfectly with my minimalist interior. The light is soft but bright enough for reading."</p>
        </article>
      </div>
    </div>

  </div>
</div>

Monospace_Developer_Media_Component

A complex, education-oriented media component with a monospace/developer design style and ocean/blue color scheme, designed for learning platforms. Includes media playback, code snippets, and structured content sections.

Open Preview

                <div class="font-['Menlo',_Monaco,_Consolas,_'Liberation_Mono',_'Courier_New',_monospace] bg-gray-50 text-blue-900 min-h-screen p-4 dark:bg-gray-900 dark:text-blue-100 transition-colors duration-300">
  <div class="max-w-7xl mx-auto bg-white shadow-lg rounded-lg overflow-hidden dark:bg-gray-800 border border-blue-200 dark:border-blue-700">
    <!-- Header/Title Section -->
    <header class="bg-blue-800 text-white p-4 flex items-center justify-between dark:bg-blue-900">
      <h1 class="text-xl font-bold flex items-center">
        <svg class="w-6 h-6 mr-2 text-blue-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.316 3.051A1 1 0 0113 2v2.247a1 1 0 01-.018.067L10.021 12.5h-2.11C5.698 12.5 5 13.197 5 14s.698 1.5 1.5 1.5h1.968l-3.328 3.328A1 1 0 016.328 20L9 17.328l3.328 3.328A1 1 0 0113.672 20L11 17.328l3.672-3.672A1 1 0 0115 13c-.001-.01-.004-.019-.009-.028-.684-1.12-1.921-1.872-3.327-1.977l.006-8.084zM10 5.25v6.5h-2.25v-6.5zm-3 3.5v-3.5h-1.5v3.5zm6 0v-3.5h1.5v3.5zM12 7.75v3.5h1.5v-3.5zm-3 3.5v-3.5h-1.5v3.5z" clip-rule="evenodd"></path></svg>
        Module: Introduction to Data Structures
      </h1>
      <div class="flex space-x-3">
        <button class="px-3 py-1 bg-blue-700 rounded text-sm hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Download Resources</button>
        <button class="px-3 py-1 bg-blue-700 rounded text-sm hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Mark Complete</button>
      </div>
    </header>

    <!-- Main Content Area -->
    <div class="md:flex">
      <!-- Left Column: Video Player & Description -->
      <section class="md:w-3/5 p-6 border-r border-blue-100 dark:border-blue-700">
        <div class="aspect-w-16 aspect-h-9 bg-black rounded overflow-hidden mb-6 border border-blue-500 dark:border-blue-600">
          <iframe class="w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>

        <h2 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-200">Lesson 1: Understanding Arrays</h2>
        <p class="mb-4 leading-relaxed text-gray-700 dark:text-gray-300">
          Arrays are fundamental data structures that store a fixed-size sequential collection of elements of the same type. This lesson covers their basic definition, memory allocation, and common operations like initialization, accessing elements, and basic traversal.
        </p>
        \div class="text-sm text-gray-600 dark:text-gray-400 mb-6">
          <p>Published: <time datetime="2023-10-26">October 26, 2023</time></p>
          <p>Instructor: Dr. Alice Smith</p>
        </div">

        <!-- Key Concepts Section -->
        <article class="border-t border-b border-blue-200 py-6 mb-6 dark:border-blue-700">
          <h3 class="text-xl font-semibold mb-4 text-blue-800 dark:text-blue-200">Key Concepts</h3>
          <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 marker:text-blue-600 dark:marker:text-blue-400">
            <li class="mb-2">Definition of an array and its contiguous memory allocation.</li>
            <li class="mb-2">Indexing: zero-based vs. one-based.</li>
            <li class="mb-2">Common operations: declaration, initialization, element access, and update.</li>
            <li>Distinction between static and dynamic arrays.</li>
          </ul>
        </article>

        <!-- Further Reading -->
        <article>
          <h3 class="text-xl font-semibold mb-4 text-blue-800 dark:text-blue-200">Further Reading</h3>
          <ul class="space-y-3">
            <li><a href="#" class="flex items-center text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors"><svg class="w-4 h-4 mr-2 text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg> Wikipedia: Array Data Structure</a></li>
            <li><a href="#" class="flex items-center text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors"><svg class="w-4 h-4 mr-2 text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg> GeeksforGeeks: Arrays</a></li>
          </ul>
        </article>
      </section>

      <!-- Right Column: Code Snippets, Q&A, and Navigation -->
      <aside class="md:w-2/5 p-6 bg-blue-50 dark:bg-gray-850">
        <!-- Code Snippet Section -->
        <div class="mb-6">
          <h3 class="text-xl font-semibold mb-3 text-blue-800 dark:text-blue-200">Code Example: Array Initialization (Python)</h3>
          <pre class="bg-blue-900 text-blue-50 p-4 rounded-md text-sm overflow-x-auto dark:bg-gray-950 dark:text-gray-100 border border-blue-700 dark:border-blue-700">
            <code class="language-python">
# Declaring and initializing an array
my_array = [10, 20, 30, 40, 50]

# Accessing an element
print(f"First element: {my_array[0]}") # Output: 10

# Iterating through an array
for element in my_array:
    print(element)
            </code>
          </pre>
        </div>

        <!-- Table of Contents / Navigation -->
        <nav class="mb-6">
          <h3 class="text-xl font-semibold mb-3 text-blue-800 dark:text-blue-200">Module Navigation</h3>
          <ul class="space-y-2">
            <li><a href="#" class="block p-3 bg-blue-100 rounded hover:bg-blue-200 text-blue-800 font-medium dark:bg-blue-700 dark:hover:bg-blue-600 dark:text-blue-100 transition-colors"><span class="mr-2 text-blue-600 dark:text-blue-200">&#9658;</span> Lesson 1: Understanding Arrays <span class="text-xs text-blue-500 dark:text-blue-300 ml-2">(Current)</span></a></li>
            <li><a href="#" class="block p-3 rounded hover:bg-blue-100 text-gray-700 dark:text-gray-300 dark:hover:bg-blue-700 dark:hover:text-blue-100 transition-colors"><span class="mr-2 text-gray-400 dark:text-blue-500">&#9658;</span> Lesson 2: Array Operations</a></li>
            <li><a href="#" class="block p-3 rounded hover:bg-blue-100 text-gray-700 dark:text-gray-300 dark:hover:bg-blue-700 dark:hover:text-blue-100 transition-colors"><span class="mr-2 text-gray-400 dark:text-blue-500">&#9658;</span> Lesson 3: Multidimensional Arrays</a></li>
            <li><a href="#" class="block p-3 rounded hover:bg-blue-100 text-gray-700 dark:text-gray-300 dark:hover:bg-blue-700 dark:hover:text-blue-100 transition-colors"><span class="mr-2 text-gray-400 dark:text-blue-500">&#9658;</span> Quiz: Array Fundamentals</a></li>
          </ul>
        </nav>

        <!-- Instructor Profile -->
        <div class="bg-white rounded-lg shadow-sm p-4 text-center dark:bg-gray-800 border border-blue-200 dark:border-blue-700">
          <h3 class="text-xl font-semibold mb-4 text-blue-800 dark:text-blue-200">Instructor Info</h3>
          <img class="w-24 h-24 rounded-full mx-auto mb-3 border-2 border-blue-400 dark:border-blue-500" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Instructor Alice Smith">
          <p class="text-lg font-bold text-blue-800 dark:text-blue-200">Dr. Alice Smith</p>
          <p class="text-xs text-gray-600 dark:text-gray-400 mb-3">Lead Data Scientist & Adjunct Professor</p>
          <p class="text-sm text-gray-700 dark:text-gray-300">Specializing in algorithms and complex data structures. Passionate about making computer science accessible.</p>
        </div>
      </aside>
    </div>

    <!-- Comments/Questions Section (Placeholder) -->
    <section class="bg-blue-50 p-6 border-t border-blue-100 dark:bg-gray-850 dark:border-blue-700">
      <h2 class="text-2xl font-bold mb-4 text-blue-800 dark:text-blue-200">Questions & Discussion</h2>
      <div class="bg-white rounded-lg p-4 shadow-sm dark:bg-gray-700 border border-blue-200 dark:border-blue-700">
        <p class="text-gray-700 dark:text-gray-300">No questions yet. Be the first to ask!</p>
        <button class="mt-4 px-4 py-2 bg-blue-700 text-white rounded hover:bg-blue-600 dark:bg-blue-800 dark:hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Ask a Question</button>
      </div>
    </section>

    <!-- Footer -->
    <footer class="bg-blue-800 text-white p-4 text-center text-sm dark:bg-blue-900">
      &copy; 2023 Learning Platform. All rights reserved.
    </footer>
  </div>
</div>

Art Deco Travel Media Component

A complex Art Deco inspired media component for travel and tourism websites, featuring destination highlights with sepia/brown tones and geometric patterns. Fully responsive with dark mode support.

Open Preview

                <div class="font-sans bg-amber-50 dark:bg-stone-950 text-stone-800 dark:text-stone-100 p-4 sm:p-8 md:p-12 lg:p-16 antialiased">

  <!-- Outer Deco Frame -->
  <div class="relative border-[6px] border-amber-900/60 dark:border-stone-700/60 p-4 sm:p-6 md:p-8 lg:p-10 shadow-2xl dark:shadow-stone-950/70 overflow-hidden">
    <div class="absolute inset-0 border-[3px] border-solid border-amber-800/40 dark:border-stone-800/40 opacity-70"></div>
    <div class="absolute inset-4 -m-[2px] border-[2px] border-dashed border-amber-700/30 dark:border-stone-600/30 opacity-50"></div>

    <!-- Background Geometric Pattern (Subtle) -->
    <div class="absolute inset-0 bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(255,247,237,0.3)_0%,transparent_100%)] dark:bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(60,60,60,0.3)_0%,transparent_100%)] z-0"></div>
    <div class="absolute inset-0 opacity-10 dark:opacity-5 bg-[size:30px_30px] bg-[repeating-linear-gradient(45deg,_var(--tw-gradient-from)_0,_var(--tw-gradient-from)_1px,_transparent_1px,_transparent_8px),repeating-linear-gradient(-45deg,_var(--tw-gradient-from)_0,_var(--tw-gradient-from)_1px,_transparent_1px,_transparent_8px)] from-amber-700/30 to-amber-700/30 dark:from-stone-700/30 dark:to-stone-700/30 z-0"></div>

    <div class="relative z-10 grid grid-cols-1 lg:grid-cols-3 gap-8 md:gap-12 lg:gap-16">

      <!-- Left Section: Main Media Display -->
      <div class="lg:col-span-2 flex flex-col items-center">
        <div class="w-full aspect-video md:aspect-[16/9] bg-stone-200 dark:bg-stone-800 border-4 border-amber-800 dark:border-stone-700 shadow-xl dark:shadow-stone-900/50 overflow-hidden relative">
          <img src="https://picsum.photos/id/1010/1200/700" alt="Panoramic view of ancient city" class="w-full h-full object-cover transform transition-transform duration-500 hover:scale-105">
          <div class="absolute inset-0 bg-gradient-to-t from-stone-900/50 via-transparent to-transparent">
            <div class="absolute bottom-0 left-0 p-4 sm:p-6 text-white">
              <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-serif tracking-wider leading-tight text-amber-50 drop-shadow-lg">Mysteries of the Nile</h2>
              <p class="mt-2 text-base sm:text-lg opacity-90 max-w-lg hidden sm:block">Explore ancient wonders and timeless landscapes on a journey through history.</p>
            </div>
            <div class="absolute top-4 right-4 bg-amber-800/80 dark:bg-stone-800/80 text-white px-3 py-1 sm:px-4 sm:py-2 text-sm sm:text-base font-semibold tracking-wider uppercase border border-amber-700 dark:border-stone-700 shadow-md">
              Featured Destination
            </div>
          </div>
        </div>

        <!-- Controls/Navigation (Optional: if this were interactive) -->
        <div class="mt-6 w-full flex justify-center space-x-4">
          <button class="flex-shrink-0 w-12 h-12 md:w-16 md:h-16 bg-amber-900 dark:bg-stone-800 text-amber-50 dark:text-stone-300 rounded-full border-2 border-amber-700 dark:border-stone-700 flex items-center justify-center shadow-lg dark:shadow-stone-900/50 hover:bg-amber-800 transform hover:scale-105 transition-all duration-300">
            <svg class="w-6 h-6 md:w-8 md:h-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="M15 19l-7-7 7-7"></path>
            </svg>
          </button>
          <button class="flex-shrink-0 w-12 h-12 md:w-16 md:h-16 bg-amber-900 dark:bg-stone-800 text-amber-50 dark:text-stone-300 rounded-full border-2 border-amber-700 dark:border-stone-700 flex items-center justify-center shadow-lg dark:shadow-stone-900/50 hover:bg-amber-800 transform hover:scale-105 transition-all duration-300">
            <svg class="w-6 h-6 md:w-8 md:h-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 5l7 7-7 7"></path>
            </svg>
          </button>
        </div>
      </div>

      <!-- Right Section: Details & Features -->
      <div class="lg:col-span-1">
        <div class="bg-amber-100 dark:bg-stone-900 p-6 sm:p-8 border-4 border-amber-800 dark:border-stone-700 shadow-xl dark:shadow-stone-900/50">
          <h3 class="text-2xl sm:text-3xl font-serif text-amber-900 dark:text-amber-200 tracking-wide mb-4 border-b-2 border-amber-700/60 dark:border-stone-700/60 pb-2">Journey Highlights</h3>

          <div class="grid gap-4">
            <!-- Highlight 1 -->
            <div class="flex items-start bg-amber-50 dark:bg-stone-800 p-3 rounded-lg border border-amber-600/50 dark:border-stone-700/50 shadow-inner group">
              <img src="https://picsum.photos/id/1020/80/80" alt="Pyramid" class="w-16 h-16 sm:w-20 sm:h-20 object-cover border-2 border-amber-700 dark:border-stone-600 mr-4 group-hover:scale-105 transition-transform duration-300">
              <div>
                <h4 class="text-lg sm:text-xl font-semibold text-amber-900 dark:text-stone-100">Ancient Pyramids</h4>
                <p class="text-sm sm:text-base text-stone-700 dark:text-stone-300">Unravel the secrets of Giza's majestic structures.</p>
              </div>
            </div>

            <!-- Highlight 2 -->
            <div class="flex items-start bg-amber-50 dark:bg-stone-800 p-3 rounded-lg border border-amber-600/50 dark:border-stone-700/50 shadow-inner group">
              <img src="https://picsum.photos/id/1025/80/80" alt="Desert Sunset" class="w-16 h-16 sm:w-20 sm:h-20 object-cover border-2 border-amber-700 dark:border-stone-600 mr-4 group-hover:scale-105 transition-transform duration-300">
              <div>
                <h4 class="text-lg sm:text-xl font-semibold text-amber-900 dark:text-stone-100">Desert Safaris</h4>
                <p class="text-sm sm:text-base text-stone-700 dark:text-stone-300">Experience the golden dunes at dusk.</p>
              </div>
            </div>

            <!-- Highlight 3 -->
            <div class="flex items-start bg-amber-50 dark:bg-stone-800 p-3 rounded-lg border border-amber-600/50 dark:border-stone-700/50 shadow-inner group">
              <img src="https://picsum.photos/id/1038/80/80" alt="River Boat" class="w-16 h-16 sm:w-20 sm:h-20 object-cover border-2 border-amber-700 dark:border-stone-600 mr-4 group-hover:scale-105 transition-transform duration-300">
              <div>
                <h4 class="text-lg sm:text-xl font-semibold text-amber-900 dark:text-stone-100">Nile River Cruises</h4>
                <p class="text-sm sm:text-base text-stone-700 dark:text-stone-300">Leisurely cruising through history.</p>
              </div>
            </div>
          </div>

          <div class="mt-8">
            <p class="text-sm sm:text-base text-stone-600 dark:text-stone-400 mb-2">Discover more about this exquisite journey:</p>
            <button class="w-full bg-amber-800 dark:bg-stone-700 text-white font-bold text-lg sm:text-xl py-3 px-6 rounded-md shadow-lg dark:shadow-stone-900/50 hover:bg-amber-700 dark:hover:bg-stone-600 transform hover:scale-105 transition-all duration-300 border-2 border-amber-700 dark:border-stone-600 tracking-wider uppercase">
              Book Your Adventure
            </button>
          </div>
        </div>

        <!-- Traveler Reviews/Profiles -->
        <div class="mt-8 bg-amber-100 dark:bg-stone-900 p-6 sm:p-8 border-4 border-amber-800 dark:border-stone-700 shadow-xl dark:shadow-stone-900/50">
          <h3 class="text-2xl sm:text-3xl font-serif text-amber-900 dark:text-amber-200 tracking-wide mb-4 border-b-2 border-amber-700/60 dark:border-stone-700/60 pb-2">Traveler's Voice</h3>
          <div class="flex items-center space-x-4 mb-4">
            <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Traveler Avatar" class="w-16 h-16 rounded-full object-cover border-4 border-amber-700 dark:border-stone-600 shadow-md">
            <div>
              <p class="font-bold text-lg text-amber-900 dark:text-stone-100">Eleanor Vance</p>
              <p class="text-sm text-stone-600 dark:text-stone-400">"A truly unforgettable experience!"</p>
            </div>
          </div>
          <div class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Traveler Avatar" class="w-16 h-16 rounded-full object-cover border-4 border-amber-700 dark:border-stone-600 shadow-md">
            <div>
              <p class="font-bold text-lg text-amber-900 dark:text-stone-100">Arthur Sterling</p>
              <p class="text-sm text-stone-600 dark:text-stone-400">"Seamless and breathtaking."</p>
            </div>
          </div>
        </div>

      </div>

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

Skeuomorphic_Grayscale_Media_Component

A complex, responsive media component designed in a skeuomorphic grayscale style for business/corporate websites, featuring multiple interactive elements and dark mode support.

Open Preview

                <div class="p-4 sm:p-8 md:p-12 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-6xl p-6 md:p-10 rounded-3xl shadow-xl bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-950 border border-gray-300 dark:border-gray-700
      flex flex-col lg:flex-row gap-8 lg:gap-12 relative overflow-hidden
      after:content-[''] after:absolute after:inset-0 after:rounded-3xl after:ring-4 after:ring-inset after:ring-white dark:after:ring-gray-800 after:ring-opacity-40 after:pointer-events-none after:z-10">

    <!-- Main Media Display Area -->
    <div class="flex-1 flex flex-col items-center justify-center p-4 sm:p-6 md:p-8
        rounded-2xl shadow-inner-xl bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-800
        relative group overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-950 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      <div class="relative z-10 w-full h-full min-h-[300px] md:min-h-[400px] lg:min-h-[500px] flex items-center justify-center">
        <img src="https://picsum.photos/1200/800?random=1" alt="Main Media Content" class="rounded-xl shadow-lg border border-gray-400 dark:border-gray-600 object-cover w-full h-full">
        <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
          <button class="p-4 rounded-full bg-gray-700 bg-opacity-70 text-white shadow-lg animate-pulse
                         hover:bg-gray-800 hover:bg-opacity-80 transition-colors duration-300
                         focus:outline-none focus:ring-4 focus:ring-gray-500 focus:ring-opacity-60">
            <svg class="w-12 h-12" fill="currentColor" viewBox="0 0 24 24">
              <path d="M8 5v14l11-7z"></path>
            </svg>
          </button>
        </div>
      </div>
      <div class="absolute bottom-4 left-4 right-4 p-3 rounded-xl bg-gray-800 bg-opacity-70 text-white font-mono text-sm
                  shadow-xl dark:border dark:border-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        <div class="flex items-center justify-between">
          <span class="truncate">nature-mountains_adventure.jpg</span>
          <svg class="w-5 h-5 ml-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 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
          </svg>
        </div>
      </div>
    </div>

    <!-- Right Sidebar: Details & Controls -->
    <div class="lg:w-2/5 xl:w-1/3 flex flex-col gap-6">

      <!-- Section: Media Information -->
      <div class="p-6 rounded-2xl shadow-xl bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-950 border border-gray-300 dark:border-gray-700
          relative after:content-[''] after:absolute after:inset-0 after:rounded-2xl after:ring-2 after:ring-inset after:ring-white dark:after:ring-gray-800 after:ring-opacity-40">
        <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Media Information</h3>
        <dl class="text-sm text-gray-700 dark:text-gray-300 space-y-2">
          <div>
            <dt class="font-semibold text-gray-900 dark:text-gray-100">Title:</dt>
            <dd class="ml-4">Serene Mountain Landscape</dd>
          </div>
          <div>
            <dt class="font-semibold text-gray-900 dark:text-gray-100">Type:</dt>
            <dd class="ml-4">Image (JPEG)</dd>
          </div>
          <div>
            <dt class="font-semibold text-gray-900 dark:text-gray-100">Resolution:</dt>
            <dd class="ml-4">1920x1280</dd>
          </div>
          <div>
            <dt class="font-semibold text-gray-900 dark:text-gray-100">Size:</dt>
            <dd class="ml-4">2.1 MB</dd>
          </div>
          <div>
            <dt class="font-semibold text-gray-900 dark:text-gray-100">Uploaded By:</dt>
            <dd class="ml-4 flex items-center">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Uploader" class="w-6 h-6 rounded-full mr-2 shadow-sm border border-gray-400 dark:border-gray-600">
              John Doe
            </dd>
          </div>
          <div>
            <dt class="font-semibold text-gray-900 dark:text-gray-100">Date:</dt>
            <dd class="ml-4">2023-10-26</dd>
          </div>
        </dl>
      </div>

      <!-- Section: Action Controls -->
      <div class="p-6 rounded-2xl shadow-xl bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-950 border border-gray-300 dark:border-gray-700
          relative after:content-[''] after:absolute after:inset-0 after:rounded-2xl after:ring-2 after:ring-inset after:ring-white dark:after:ring-gray-800 after:ring-opacity-40">
        <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Actions</h3>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <button class="flex items-center justify-center px-4 py-3 rounded-xl 
                         bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 
                         text-gray-800 dark:text-gray-200 font-semibold shadow-md border border-gray-400 dark:border-gray-600
                         hover:from-gray-400 hover:to-gray-500 dark:hover:from-gray-600 dark:hover:to-gray-700 hover:shadow-lg transition-all duration-200
                         active:shadow-inner active:from-gray-500 active:to-gray-400 dark:active:from-gray-800 dark:active:to-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-500 focus:ring-opacity-50">
            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z"></path>
            </svg>
            Preview
          </button>
          <button class="flex items-center justify-center px-4 py-3 rounded-xl 
                         bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 
                         text-gray-800 dark:text-gray-200 font-semibold shadow-md border border-gray-400 dark:border-gray-600
                         hover:from-gray-400 hover:to-gray-500 dark:hover:from-gray-600 dark:hover:to-gray-700 hover:shadow-lg transition-all duration-200
                         active:shadow-inner active:from-gray-500 active:to-gray-400 dark:active:from-gray-800 dark:active:to-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-500 focus:ring-opacity-50">
            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
              <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"></path>
            </svg>
            Download
          </button>
          <button class="flex items-center justify-center px-4 py-3 rounded-xl sm:col-span-2
                         bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 
                         text-gray-800 dark:text-gray-200 font-semibold shadow-md border border-gray-400 dark:border-gray-600
                         hover:from-gray-400 hover:to-gray-500 dark:hover:from-gray-600 dark:hover:to-gray-700 hover:shadow-lg transition-all duration-200
                         active:shadow-inner active:from-gray-500 active:to-gray-400 dark:active:from-gray-800 dark:active:to-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-500 focus:ring-opacity-50">
            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
              <path d="M16 12l-4 4-4-4M12 20v-8M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            Share Link
          </button>
        </div>
      </div>

      <!-- Section: Tags/Categories -->
      <div class="p-6 rounded-2xl shadow-xl bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-950 border border-gray-300 dark:border-gray-700
          relative after:content-[''] after:absolute after:inset-0 after:rounded-2xl after:ring-2 after:ring-inset after:ring-white dark:after:ring-gray-800 after:ring-opacity-40">
        <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Tags & Categories</h3>
        <div class="flex flex-wrap gap-2">
          <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium
                        bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800
                        text-gray-800 dark:text-gray-200 shadow-sm border border-gray-400 dark:border-gray-600">
            Nature
          </span>
          <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium
                        bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800
                        text-gray-800 dark:text-gray-200 shadow-sm border border-gray-400 dark:border-gray-600">
            Landscape
          </span>
          <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium
                        bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800
                        text-gray-800 dark:text-gray-200 shadow-sm border border-gray-400 dark:border-gray-600">
            Mountains
          </span>
          <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium
                        bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800
                        text-gray-800 dark:text-gray-200 shadow-sm border border-gray-400 dark:border-gray-600">
            Outdoor
          </span>
          <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium
                        bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800
                        text-gray-800 dark:text-gray-200 shadow-sm border border-gray-400 dark:border-gray-600">
            Photography
          </span>
        </div>
      </div>

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

Media Components Component

A media component for e-commerce with microinteractions, grayscale color scheme, moderate complexity, responsive design, and dark theme support.

Open Preview

                <div class="max-w-xs mx-auto overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800">
  <div class="relative">
    <img class="object-cover w-full h-48 transition-transform duration-300 transform group-hover:scale-105" src="https://picsum.photos/400/300?random=1"
      alt="Product Image">
    <div
      class="absolute top-0 left-0 flex items-center justify-center w-full h-full text-white transition-opacity duration-300 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100">
      <svg class="w-12 h-12" 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
        </path>
      </svg>
    </div>
  </div>
  <div class="px-4 py-3">
    <h3 class="text-lg font-medium text-gray-800 dark:text-white">Product Name</h3>
    <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">Short product description goes here.</p>
    <div class="flex items-center justify-between mt-3">
      <span class="text-xl font-bold text-gray-800 dark:text-white">$29.99</span>
      <button
        class="px-3 py-2 text-xs font-medium text-white uppercase transition-colors duration-300 transform bg-gray-800 rounded hover:bg-gray-700 dark:hover:bg-gray-600 focus:outline-none focus:bg-gray-700 dark:focus:bg-gray-600">
        Add to Cart
      </button>
    </div>
  </div>
</div>

Media Components Component

3D media component for social media with complementary color scheme, moderate complexity, and dark theme support.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex justify-center items-center p-4">
  <div class="bg-gradient-to-br from-blue-400 to-indigo-500 dark:from-blue-700 dark:to-indigo-900 rounded-3xl shadow-2xl p-6 lg:p-10 transform rotate-y-12 hover:rotate-y-0 transition-transform duration-700 ease-in-out relative overflow-hidden max-w-lg w-full">
    <!-- 3D elements for depth -->
    <div class="absolute top-0 left-0 w-full h-full bg-black opacity-10 rounded-3xl transform translateZ(-10px)"></div>
    <div class="absolute bottom-0 right-0 w-full h-full bg-white opacity-10 rounded-3xl transform translateZ(-20px)"></div>

    <div class="relative z-10">
      <div class="flex items-center mb-6">
        <img class="w-16 h-16 rounded-full border-4 border-amber-300 dark:border-amber-500 shadow-lg transform translateZ(15px)" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
        <div class="ml-4">
          <p class="text-white text-xl font-bold transform translateZ(10px)">John Doe</p>
          <p class="text-amber-200 dark:text-amber-400 text-sm transform translateZ(10px)">@john_doe_official</p>
        </div>
      </div>

      <div class="relative w-full h-64 rounded-xl overflow-hidden shadow-xl mb-6 transform translateZ(5px)">
        <img class="w-full h-full object-cover" src="https://picsum.photos/600/400?random=1" alt="Post Image">
        <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300">
          <svg class="h-16 w-16 text-white" fill="currentColor" viewBox="0 0 24 24">
            <path d="M8 5v14l11-7z"/>
          </svg>
        </div>
      </div>

      <p class="text-white text-lg mb-6 leading-relaxed transform translateZ(10px)">
        Excited to share my latest project! It was a challenging but rewarding experience. #webdesign #creative #tailwindcss
      </p>

      <div class="flex justify-between items-center text-white">
        <div class="flex items-center space-x-4">
          <div class="flex items-center transform translateZ(8px)">
            <svg class="h-8 w-8 text-red-300 dark:text-red-500" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
            </svg>
            <span class="ml-1 text-lg">2.5K</span>
          </div>
          <div class="flex items-center transform translateZ(8px)">
            <svg class="h-8 w-8 text-green-300 dark:text-green-500" fill="currentColor" viewBox="0 0 24 24">
              <path d="M18 16.5c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM6 16.5c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM20 8H4V6h16v2zm0 3H4V9h16v2zm0 3H4v-2h16v2z"/>
            </svg>
            <span class="ml-1 text-lg">450</span>
          </div>
        </div>
        <button class="bg-amber-400 hover:bg-amber-500 text-gray-800 font-bold py-3 px-6 rounded-full shadow-lg transform translateZ(8px) hover:scale-105 transition duration-300">
          Share
        </button>
      </div>
    </div>
  </div>
</div>