Search Components

All Components

Browse all available Tailwind CSS components

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>

Product Reviews Component

A simple, responsive product reviews component with organic/nature-inspired design, sepia/brown tones, dark mode support, and suitable for entertainment/media platforms.

Open Preview

                <div class="font-sans antialiased text-gray-800 bg-amber-50 dark:bg-stone-900 dark:text-gray-200 p-4 sm:p-6 lg:p-8 flex items-center justify-center min-h-screen">
  <div class="w-full max-w-2xl bg-amber-100 dark:bg-stone-800 rounded-xl shadow-lg overflow-hidden border border-amber-200 dark:border-stone-700 mx-auto">
    <div class="p-6 sm:p-8">
      <h2 class="text-2xl sm:text-3xl font-serif text-amber-900 dark:text-amber-50 mb-6 text-center tracking-wide">What Our Viewers Say</h2>

      <!-- Review 1 -->
      <div class="bg-amber-50 dark:bg-stone-700 p-5 rounded-lg mb-6 last:mb-0 border border-amber-100 dark:border-stone-600 shadow-sm flex flex-col sm:flex-row items-start sm:items-center">
        <img class="w-16 h-16 rounded-full object-cover mr-4 mb-4 sm:mb-0 border-2 border-amber-300 dark:border-amber-600 flex-shrink-0" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Alice Johnson">
        <div class="flex-grow">
          <div class="flex items-center mb-2">
            <span class="text-amber-700 dark:text-amber-300 font-semibold mr-2">Alice J.</span>
            <div class="flex text-amber-500 dark:text-amber-400">
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
            </div>
          </div>
          <p class="text-stone-700 dark:text-stone-300 leading-relaxed text-sm lg:text-base">"Absolutely captivated! The storyline was so immersive, and the visuals were stunning. A truly unique experience that felt both fresh and familiar."</p>
        </div>
      </div>

      <!-- Review 2 -->
      <div class="bg-amber-50 dark:bg-stone-700 p-5 rounded-lg mb-6 last:mb-0 border border-amber-100 dark:border-stone-600 shadow-sm flex flex-col sm:flex-row items-start sm:items-center">
        <img class="w-16 h-16 rounded-full object-cover mr-4 mb-4 sm:mb-0 border-2 border-amber-300 dark:border-amber-600 flex-shrink-0" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Mark Davis">
        <div class="flex-grow">
          <div class="flex items-center mb-2">
            <span class="text-amber-700 dark:text-amber-300 font-semibold mr-2">Mark D.</span>
            <div class="flex text-amber-500 dark:text-amber-400">
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-4 h-4 fill-current text-amber-200 dark:text-stone-500" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
            </div>
          </div>
          <p class="text-stone-700 dark:text-stone-300 leading-relaxed text-sm lg:text-base">"Great content for a relaxing evening. The pacing was perfect, and the character development was surprisingly deep. Definitely recommend it!"</p>
        </div>
      </div>
      
      <!-- Review 3 -->
      <div class="bg-amber-50 dark:bg-stone-700 p-5 rounded-lg last:mb-0 border border-amber-100 dark:border-stone-600 shadow-sm flex flex-col sm:flex-row items-start sm:items-center">
        <img class="w-16 h-16 rounded-full object-cover mr-4 mb-4 sm:mb-0 border-2 border-amber-300 dark:border-amber-600 flex-shrink-0" src="https://randomuser.me/api/portraits/women/22.jpg" alt="Sophia Lee">
        <div class="flex-grow">
          <div class="flex items-center mb-2">
            <span class="text-amber-700 dark:text-amber-300 font-semibold mr-2">Sophia L.</span>
            <div class="flex text-amber-500 dark:text-amber-400">
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
            </div>
          </div>
          <p class="text-stone-700 dark:text-stone-300 leading-relaxed text-sm lg:text-base">"A cinematic masterpiece! The production quality was top-notch, and the music score was simply breathtaking. It truly transported me to another world."</p>
        </div>
      </div>

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

Interactive Components Component

An interactive component designed for educational platforms, featuring warm sunset gradient tones, smooth transitions, and dark mode support. It includes clickable cards that change appearance on hover/focus.

Open Preview

                <div class="min-h-screen py-12 flex items-center justify-center bg-gradient-to-br from-orange-50 to-amber-200 dark:from-gray-900 dark:to-gray-800 transition-all duration-500">
  <div class="container mx-auto px-4 max-w-6xl">

    <div class="text-center mb-12">
      <h2 class="text-4xl sm:text-5xl font-extrabold text-orange-900 dark:text-amber-300 mb-4 leading-tight">
        Explore Interactive Learning
      </h2>
      <p class="text-lg text-orange-800 dark:text-gray-300 max-w-2xl mx-auto">
        Dive into engaging course modules with a focus on active participation and visual feedback.
      </p>
    </div>

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

      <!-- Interactive Card 1 -->
      <div class="group relative overflow-hidden bg-white dark:bg-gray-800 rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-2 focus-within:-translate-y-2 outline-none" tabindex="0" role="button" aria-label="Explore Module 1: Foundational Concepts">
        <div class="absolute inset-0 bg-gradient-to-br from-amber-400 to-orange-500 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity duration-300"></div>
        <div class="relative p-6 flex flex-col items-center text-center">
          <div class="bg-white/70 dark:bg-gray-900/70 p-4 rounded-full mb-4 shadow-md transition-all duration-300 group-hover:scale-110 group-focus-within:scale-110">
            <svg class="h-12 w-12 text-orange-600 dark:text-amber-400 group-hover:text-white group-focus-within:text-white transition-colors 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.75 17L9.25 17L6 17M15 17L15 17L18 17M12 17L12 17M12 8V7M12 12V11M12 16V15M17 12H16M13 12H12M8 12H7M12 4a2 2 0 100-4 2 2 0 000 4zM12 20a2 2 0 100-4 2 2 0 000 4zM20 12a2 2 0 100-4 2 2 0 000 4zM4 12a2 2 0 100-4 2 2 0 000 4z"></path>
            </svg>
          </div>
          <h3 class="text-xl font-bold text-orange-900 dark:text-white mb-2 transition-colors duration-300 group-hover:text-white group-focus-within:text-white">
            <a href="#" class="outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-orange-500 rounded-md block">
              Module 1: Foundational Concepts
            </a>
          </h3>
          <p class="text-orange-700 dark:text-gray-300 text-sm transition-colors duration-300 group-hover:text-amber-50 group-focus-within:text-amber-50 mb-4">
            Start your journey with core principles and essential building blocks.
          </p>
          <span class="text-xs font-semibold px-3 py-1 rounded-full bg-orange-100 dark:bg-gray-700 text-orange-700 dark:text-gray-200 group-hover:bg-amber-100 group-hover:text-orange-900 dark:group-hover:bg-orange-600 dark:group-hover:text-white transition-all duration-300">
            Beginner Friendly
          </span>
        </div>
      </div>

      <!-- Interactive Card 2 -->
      <div class="group relative overflow-hidden bg-white dark:bg-gray-800 rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-2 focus-within:-translate-y-2 outline-none" tabindex="0" role="button" aria-label="Explore Module 2: Advanced Techniques">
        <div class="absolute inset-0 bg-gradient-to-br from-rose-400 to-red-500 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity duration-300"></div>
        <div class="relative p-6 flex flex-col items-center text-center">
          <div class="bg-white/70 dark:bg-gray-900/70 p-4 rounded-full mb-4 shadow-md transition-all duration-300 group-hover:scale-110 group-focus-within:scale-110">
            <svg class="h-12 w-12 text-red-600 dark:text-rose-400 group-hover:text-white group-focus-within:text-white transition-colors 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" />
            </svg>
          </div>
          <h3 class="text-xl font-bold text-orange-900 dark:text-white mb-2 transition-colors duration-300 group-hover:text-white group-focus-within:text-white">
            <a href="#" class="outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-rose-500 rounded-md block">
              Module 2: Advanced Techniques
            </a>
          </h3>
          <p class="text-orange-700 dark:text-gray-300 text-sm transition-colors duration-300 group-hover:text-rose-50 group-focus-within:text-rose-50 mb-4">
            Master complex methodologies and elevate your skills to the next level.
          </p>
          <span class="text-xs font-semibold px-3 py-1 rounded-full bg-rose-100 dark:bg-gray-700 text-rose-700 dark:text-gray-200 group-hover:bg-red-100 group-hover:text-red-900 dark:group-hover:bg-red-600 dark:group-hover:text-white transition-all duration-300">
            Intermediate Level
          </span>
        </div>
      </div>

      <!-- Interactive Card 3 -->
      <div class="group relative overflow-hidden bg-white dark:bg-gray-800 rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-2 focus-within:-translate-y-2 outline-none" tabindex="0" role="button" aria-label="Explore Module 3: Project Applications">
        <div class="absolute inset-0 bg-gradient-to-br from-yellow-400 to-amber-500 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity duration-300"></div>
        <div class="relative p-6 flex flex-col items-center text-center">
          <div class="bg-white/70 dark:bg-gray-900/70 p-4 rounded-full mb-4 shadow-md transition-all duration-300 group-hover:scale-110 group-focus-within:scale-110">
            <svg class="h-12 w-12 text-amber-600 dark:text-yellow-400 group-hover:text-white group-focus-within:text-white transition-colors 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 20v-3m0 0l4.038 2.219M12 17l-4.038 2.219M9.663 17A9.001 9.001 0 0012 21a9.001 9.001 0 002.337-4H9.663zM17.5 11H6.5a2 2 0 01-2-2V6a2 2 0 012-2h11a2 2 0 012 2v3a2 2 0 01-2 2z" />
            </svg>
          </div>
          <h3 class="text-xl font-bold text-orange-900 dark:text-white mb-2 transition-colors duration-300 group-hover:text-white group-focus-within:text-white">
            <a href="#" class="outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-yellow-500 rounded-md block">
              Module 3: Project Applications
            </a>
          </h3>
          <p class="text-orange-700 dark:text-gray-300 text-sm transition-colors duration-300 group-hover:text-yellow-50 group-focus-within:text-yellow-50 mb-4">
            Apply your knowledge to real-world projects and build a strong portfolio.
          </p>
          <span class="text-xs font-semibold px-3 py-1 rounded-full bg-yellow-100 dark:bg-gray-700 text-yellow-700 dark:text-gray-200 group-hover:bg-amber-100 group-hover:text-amber-900 dark:group-hover:bg-yellow-600 dark:group-hover:text-white transition-all duration-300">
            Project Focus
          </span>
        </div>
      </div>

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

Industrial_AddToCartButton

An industrial-style 'Add to Cart' button component designed with ocean/blue tones for government/public service websites. Features exposed elements, utilitarian aesthetics, full responsiveness, and dark mode support.

Open Preview

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

  <!-- Component Wrapper -->
  <div class="w-full max-w-sm rounded-lg overflow-hidden bg-white dark:bg-gray-800 shadow-xl border border-blue-200 dark:border-blue-900 transition-colors duration-300">
    <div class="p-6 space-y-4">
      <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 text-center uppercase tracking-wide border-b-2 border-blue-500 dark:border-blue-700 pb-2">
        Service Procurement
      </h2>

      <!-- Product/Service Card Example -->
      <div class="flex flex-col md:flex-row items-center bg-gray-50 dark:bg-gray-850 p-4 rounded-md shadow-inner border border-gray-200 dark:border-gray-700">
        <img src="https://picsum.photos/100/100?random=1" alt="Service Image" class="w-24 h-24 object-cover rounded-md mb-4 md:mb-0 md:mr-4 border-2 border-blue-400 dark:border-blue-600 flex-shrink-0">
        <div class="flex-grow text-center md:text-left">
          <p class="text-lg font-semibold text-blue-800 dark:text-blue-300">Environmental Impact Assessment</p>
          <p class="text-sm text-gray-700 dark:text-gray-400">Comprehensive analysis for sustainable urban planning.</p>
          <p class="text-xl font-bold text-gray-900 dark:text-gray-100 mt-2">$1,200.00</p>
        </div>
      </div>

      <!-- Quantity Selector (Industrial Style) -->
      <div class="flex items-center justify-between mt-4">
        <label for="quantity" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mr-2">Quantity:</label>
        <div class="relative flex items-center bg-gray-200 dark:bg-gray-700 rounded-md border border-gray-300 dark:border-gray-600 shadow-sm">
          <button type="button" class="flex-shrink-0 bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-gray-200 hover:bg-gray-400 dark:hover:bg-gray-500 p-2 rounded-l-md transition-colors duration-200 border-r border-gray-400 dark:border-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75" aria-label="Decrease quantity">
            <svg class="w-4 h-4" 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="M20 12H4"></path></svg>
          </button>
          <input type="number" id="quantity" name="quantity" value="1" min="1" class="w-16 text-center bg-transparent text-gray-900 dark:text-gray-100 font-semibold focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" aria-label="Service quantity">
          <button type="button" class="flex-shrink-0 bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-gray-200 hover:bg-gray-400 dark:hover:bg-gray-500 p-2 rounded-r-md transition-colors duration-200 border-l border-gray-400 dark:border-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75" aria-label="Increase quantity">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
          </button>
        </div>
      </div>

      <!-- Add to Cart Button -->
      <button type="button"
        class="w-full flex items-center justify-center px-6 py-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white 
               bg-gradient-to-r from-blue-700 to-blue-900 
               hover:from-blue-800 hover:to-blue-950 
               focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 
               dark:from-blue-600 dark:to-blue-800 
               dark:hover:from-blue-700 dark:hover:to-blue-900 
               dark:focus:ring-blue-400 
               transition-all duration-300 ease-in-out 
               transform active:scale-95 
               uppercase tracking-wider 
               relative overflow-hidden group"
      >
        <!-- Left Gear Icon -->
        <svg class="w-5 h-5 mr-3 rotate-0 group-hover:rotate-12 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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.942 3.333.903 2.28 2.479a1.724 1.724 0 00.009 2.504c1.053 1.577-.746 3.422-2.28 2.479a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.942-3.333-.903-2.28-2.479a1.724 1.724 0 00-.009-2.504c-1.053-1.577.746-3.422 2.28-2.479a1.724 1.724 0 002.573-1.066z"></path>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
        </svg>
        <span class="relative z-10">Add to Procurement List</span>
        <!-- Right Cart Icon -->
        <svg class="w-5 h-5 ml-3 scale-100 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 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.769.707 1.769H17m0 0A2 2 0 1020 18a2 2 0 00-4 0m0 0H5.4m7 0a2 2 0 102 2 2 2 0 00-2-2z"></path>
        </svg>

        <!-- Industrial Bolt/Rivets Visual Effect -->
        <span class="absolute top-1 left-1 w-2 h-2 bg-blue-900 rounded-full dark:bg-blue-300"></span>
        <span class="absolute top-1 right-1 w-2 h-2 bg-blue-900 rounded-full dark:bg-blue-300"></span>
        <span class="absolute bottom-1 left-1 w-2 h-2 bg-blue-900 rounded-full dark:bg-blue-300"></span>
        <span class="absolute bottom-1 right-1 w-2 h-2 bg-blue-900 rounded-full dark:bg-blue-300"></span>
      </button>

      <p class="text-xs text-gray-500 dark:text-gray-400 text-center mt-4">Secure and transparent procurement process.</p>
    </div>
  </div>
</div>

Neumorphic Like/Reaction Buttons

A simple, responsive set of like/reaction buttons with a neumorphic design style, jewel tone color scheme, and dark mode support, suitable for finance/banking interfaces.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-emerald-50 dark:bg-emerald-950 p-4 font-sans">
  <div class="flex space-x-4 p-4 rounded-3xl shadow-xl dark:shadow-2xl bg-emerald-100 dark:bg-emerald-900
              shadow-emerald-200/80 dark:shadow-emerald-900/80
              dark:shadow-inner-xl dark:shadow-emerald-800/80">

    <!-- Like Button -->
    <button class="flex items-center justify-center w-12 h-12 rounded-full 
                   bg-emerald-100 dark:bg-emerald-900 
                   shadow-neumorphic-light dark:shadow-neumorphic-dark 
                   text-emerald-700 dark:text-emerald-300 
                   hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark 
                   focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50
                   transition-all duration-300 ease-in-out">
      <svg class="w-6 h-6" 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.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"></path>
      </svg>
    </button>

    <!-- Thumbs Up Button -->
    <button class="flex items-center justify-center w-12 h-12 rounded-full 
                   bg-emerald-100 dark:bg-emerald-900 
                   shadow-neumorphic-light dark:shadow-neumorphic-dark 
                   text-emerald-700 dark:text-emerald-300 
                   hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark 
                   focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50
                   transition-all duration-300 ease-in-out">
      <svg class="w-6 h-6" 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="M14 10V9m0-1a7 7 0 00-14 0v1m14 0a7 7 0 0114 0v1m-7 8c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3zM4 16h-.01M7 16h.01M10 16h.01M13 16h.01M16 16h.01M19 16h.01M22 16h.01"></path>
      </svg>
    </button>

    <!-- Thumbs Down Button -->
    <button class="flex items-center justify-center w-12 h-12 rounded-full 
                   bg-emerald-100 dark:bg-emerald-900 
                   shadow-neumorphic-light dark:shadow-neumorphic-dark 
                   text-emerald-700 dark:text-emerald-300 
                   hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark 
                   focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50
                   transition-all duration-300 ease-in-out">
      <svg class="w-6 h-6 transform rotate-180" 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="M14 10V9m0-1a7 7 0 00-14 0v1m14 0a7 7 0 0114 0v1m-7 8c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3zM4 16h-.01M7 16h.01M10 16h.01M13 16h.01M16 16h.01M19 16h.01M22 16h.01"></path>
      </svg>
    </button>

  </div>
</div>

<style>
  /* Neumorphic Shadows (Tailwind custom values) */
  /* Light Mode */
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #98d8be, -6px -6px 12px #c9fff2;
  }
  .hover\:shadow-neumorphic-inset-light:hover {
    box-shadow: inset 4px 4px 8px #98d8be, inset -4px -4px 8px #c9fff2;
  }

  /* Dark Mode */
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #0a3d2e, -6px -6px 12px #33a77a;
  }
  .dark .hover\:shadow-neumorphic-inset-dark:hover {
    box-shadow: inset 4px 4px 8px #0a3d2e, inset -4px -4px 8px #33a77a;
  }

  /* General neumorphic base for the container */
  .shadow-xl {
    box-shadow: 10px 10px 20px rgba(0,0,0,0.1), -10px -10px 20px rgba(255,255,255,1); /* Light mode base */
  }
  .dark .shadow-2xl {
    box-shadow: 10px 10px 20px rgba(0,0,0,0.5), -10px -10px 20px rgba(45,45,45,1); /* Dark mode base */
  }

  /* Specific overrides for the emerald background */
  .shadow-emerald-200\/80 {
    box-shadow: 10px 10px 20px rgba(181, 237, 212, 0.8), -10px -10px 20px rgba(239, 255, 247, 1);
  }
  .dark .shadow-emerald-900\/80 {
    box-shadow: 10px 10px 20px rgba(18, 59, 45, 0.8), -10px -10px 20px rgba(41, 107, 81, 1);
  }

  /* Inner shadow for the main container (more pronounced in dark mode) */
  .dark .shadow-inner-xl {
    box-shadow: inset 5px 5px 10px #0a3d2e, inset -5px -5px 10px #33a77a;
  }
</style>

Glassmorphism_Footer_Component

A responsive, glassmorphism-style footer component designed for booking/reservation systems, featuring a complementary color scheme, interactive elements, and full dark mode support.

Open Preview

                <footer class="relative bg-blue-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8 overflow-hidden">
  <!-- Background elements for glassmorphism effect -->
  <div class="absolute inset-0 z-0 opacity-20 dark:opacity-10">
    <div class="absolute top-1/4 left-1/4 w-60 h-60 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob dark:bg-purple-700"></div>
    <div class="absolute top-1/2 right-1/4 w-80 h-80 bg-orange-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 dark:bg-orange-700"></div>
    <div class="absolute bottom-1/4 left-1/2 w-72 h-72 bg-blue-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000 dark:bg-blue-700"></div>
  </div>

  <div class="relative z-10 max-w-7xl mx-auto backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 rounded-xl shadow-lg p-8 transform transition-all duration-300 hover:shadow-2xl">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 text-gray-800 dark:text-gray-200">

      <!-- Company Info / Logo -->
      <div class="space-y-4">
        <a href="#" class="flex items-center space-x-2 text-2xl font-bold text-gray-900 dark:text-white">
          <svg class="h-8 w-8 text-orange-500 dark:text-orange-400" 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 2zm3-11h.01M12 11h.01M15 11h.01M8 15h.01M12 15h.01M15 15h.01"></path>
          </svg>
          <span>BookNow</span>
        </a>
        <p class="text-sm text-gray-700 dark:text-gray-300">
          Simplify your bookings with ease. Reserve your spot instantly!
        </p>
        <div class="flex space-x-4">
          <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22c4.781-.75 8.438-4.887 8.438-9.879z" clip-rule="evenodd"></path>
            </svg>
          </a>
          <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M8.29 20.251c-1.413.385-2.827.601-4.22-.601C2.5 19 1 17.5 1 15v-5c0-1.5.5-3 1.5-4C3 5.5 4.5 5 6 5h1c1.5 0 2.5.5 3 1.5 1 3 2 5 4 5h7c1.5 0 2.5.5 3 1.5s.5 2.5.5 4v2c0 2-1 3.5-3 4-1.5.5-3-.5-4-1.5-1-1-2-1.5-4-1h-6.71z"/>
              <linearGradient id="twitter-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" stop-color="#1DA1F2"/>
                <stop offset="100%" stop-color="#8A3AB9"/>
              </linearGradient>
              <path d="M22.46 6c-.73.33-1.51.55-2.32.65.84-.5 1.48-1.29 1.78-2.25-.79.47-1.67.81-2.61.99-.75-.8-1.82-1.3-3.02-1.3-2.29 0-4.15 1.86-4.15 4.15 0 .32.04.63.11.93-3.45-.17-6.5-1.82-8.54-4.3-.36.62-.56 1.35-.56 2.12 0 1.44.73 2.7 1.84 3.45-.68-.02-1.32-.2-1.88-.52v.05c0 2.01 1.43 3.69 3.32 4.07-.35.1-.71.15-1.09.15-.27 0-.53-.03-.79-.07.53 1.64 2.06 2.84 3.89 2.87-1.42 1.11-3.21 1.77-5.15 1.77-.33 0-.66-.02-.98-.06 1.83 1.17 3.99 1.86 6.32 1.86 7.58 0 11.72-6.28 11.72-11.72 0-.18-.01-.36-.01-.54.81-.58 1.52-1.3 2.08-2.13z" fill="url(#twitter-gradient)"></path>
            </svg>
          </a>
          <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.529 2.341 1.088 2.91.829.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.93 0-1.088.384-1.979 1.024-2.678-.103-.253-.446-1.263.098-2.648 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.702.115 2.504.337 1.909-1.296 2.747-1.026 2.747-1.026.546 1.385.202 2.395.099 2.648.64.699 1.023 1.59 1.023 2.678 0 3.827-2.336 4.673-4.565 4.92.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2Z" clip-rule="evenodd"></path>
            </svg>
          </a>
        </div>
      </div>

      <!-- Quick Links -->
      <div>
        <h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Quick Links</h3>
        <ul class="space-y-2">
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Home</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Services</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">About Us</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Contact</a></li>
        </ul>
      </div>

      <!-- Booking Categories -->
      <div>
        <h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Booking Categories</h3>
        <ul class="space-y-2">
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Restaurant Reservations</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Medical Appointments</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Beauty & Spa Services</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Event Tickets</a></li>
        </ul>
      </div>

      <!-- Contact Info / Newsletter -->
      <div>
        <h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Contact & Newsletter</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-2">
          123 Booking St, Suite 400, Reserville, BOOK 12345
        </p>
        <p class="text-gray-700 dark:text-gray-300 mb-2">
          Email: <a href="mailto:[email protected]" class="hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">[email protected]</a>
        </p>
        <p class="text-gray-700 dark:text-gray-300 mb-4">
          Phone: <a href="tel:+1-800-555-BOOK" class="hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">+1-800-555-BOOK</a>
        </p>

        <form class="flex flex-col sm:flex-row gap-2">
          <input type="email" placeholder="Your Email" aria-label="Your Email" class="flex-grow p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white bg-opacity-50 dark:bg-gray-700 dark:bg-opacity-50 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-orange-400 focus:border-transparent outline-none transition-all duration-200">
          <button type="submit" class="p-3 rounded-lg bg-orange-500 text-white font-semibold hover:bg-orange-600 dark:bg-purple-600 dark:hover:bg-purple-700 transition-colors duration-200 shadow-md transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-400 focus:ring-offset-2 dark:focus:ring-purple-400 dark:focus:ring-offset-gray-900">
            Subscribe
          </button>
        </form>
      </div>

    </div>

    <!-- Copyright and Policies -->
    <div class="mt-12 pt-8 border-t border-gray-300 dark:border-gray-700 text-center text-sm text-gray-600 dark:text-gray-400">
      <p>&copy; 2023 BookNow. All rights reserved.</p>
      <div class="mt-2 space-x-4">
        <a href="#" class="hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Privacy Policy</a>
        <a href="#" class="hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Terms of Service</a>
        <a href="#" class="hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Cookie Policy</a>
      </div>
    </div>
  </div>
  
  <!-- Tailwind CSS animation keyframes for blob -->
  <style>
    @keyframes blob {
      0% { transform: translate(0px, 0px) scale(1); }
      33% { transform: translate(30px, -50px) scale(1.1); }
      66% { transform: translate(-20px, 20px) scale(0.9); }
      100% { transform: translate(0px, 0px) scale(1); }
    }
    .animate-blob {
      animation: blob 7s infinite;
    }
    .animation-delay-2000 {
      animation-delay: 2s;
    }
    .animation-delay-4000 {
      animation-delay: 4s;
    }
  </style>
</footer>

Glassmorphism_RealEstate_TableOfContents

A glassmorphism-styled Table of Contents component for real estate listings, featuring translucent elements, blur effects, and a purple/violet color scheme. It's responsive and supports dark mode.

Open Preview

                <div class="p-4 md:p-8 lg:p-12 min-h-screen bg-gradient-to-br from-purple-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center font-sans">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-white/20 dark:bg-gray-800/30 backdrop-blur-md rounded-3xl shadow-xl border border-white/30 dark:border-gray-700/50 overflow-hidden relative">
    <div class="absolute inset-0 bg-gradient-to-br from-purple-200/50 to-indigo-300/50 dark:from-purple-900/50 dark:to-indigo-900/50 rounded-3xl opacity-30 blur-2xl -z-10"></div>

    <div class="p-6 md:p-8 lg:p-10">
      <h2 class="text-2xl md:text-3xl font-extrabold text-purple-900 dark:text-purple-200 mb-6 text-center drop-shadow-md">
        Property Details
      </h2>

      <nav class="">
        <ul class="space-y-4">
          <li>
            <a href="#overview" class="block p-4 rounded-xl transition-all duration-300 ease-in-out hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900
              bg-purple-100/70 dark:bg-purple-900/60 backdrop-blur-sm shadow-md
              text-purple-800 dark:text-purple-100 font-semibold text-lg md:text-xl
              flex items-center group">
              <svg class="w-6 h-6 md:w-7 md:h-7 mr-3 text-purple-600 dark:text-purple-300 group-hover:rotate-6 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-1.25-3M15 10V5l-1-1H9l-1 1v5m3 0h.01M6 15h12a2 2 0 002-2V9a2 2 0 00-2-2H6a2 2 0 00-2 2v4a2 2 0 002 2z"></path>
              </svg>
              <span>Property Overview</span>
            </a>
          </li>

          <li>
            <a href="#gallery" class="block p-4 rounded-xl transition-all duration-300 ease-in-out hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900
              bg-purple-100/70 dark:bg-purple-900/60 backdrop-blur-sm shadow-md
              text-purple-800 dark:text-purple-100 font-semibold text-lg md:text-xl
              flex items-center group">
              <svg class="w-6 h-6 md:w-7 md:h-7 mr-3 text-purple-600 dark:text-purple-300 group-hover:scale-110 transition-transform" 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>
              <span>Photo Gallery</span>
            </a>
          </li>

          <li>
            <a href="#features" class="block p-4 rounded-xl transition-all duration-300 ease-in-out hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900
              bg-purple-100/70 dark:bg-purple-900/60 backdrop-blur-sm shadow-md
              text-purple-800 dark:text-purple-100 font-semibold text-lg md:text-xl
              flex items-center group">
              <svg class="w-6 h-6 md:w-7 md:h-7 mr-3 text-purple-600 dark:text-purple-300 group-hover:skew-y-3 transition-transform" 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 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
              </svg>
              <span>Key Features</span>
            </a>
          </li>

          <li>
            <a href="#floorplan" class="block p-4 rounded-xl transition-all duration-300 ease-in-out hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900
              bg-purple-100/70 dark:bg-purple-900/60 backdrop-blur-sm shadow-md
              text-purple-800 dark:text-purple-100 font-semibold text-lg md:text-xl
              flex items-center group">
              <svg class="w-6 h-6 md:w-7 md:h-7 mr-3 text-purple-600 dark:text-purple-300 group-hover:animate-bounce transition-transform" 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="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
              </svg>
              <span>Floor Plans</span>
            </a>
          </li>

          <li>
            <a href="#location" class="block p-4 rounded-xl transition-all duration-300 ease-in-out hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900
              bg-purple-100/70 dark:bg-purple-900/60 backdrop-blur-sm shadow-md
              text-purple-800 dark:text-purple-100 font-semibold text-lg md:text-xl
              flex items-center group">
              <svg class="w-6 h-6 md:w-7 md:h-7 mr-3 text-purple-600 dark:text-purple-300 group-hover:translate-x-1 transition-transform" 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.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
              </svg>
              <span>Location & Map</span>
            </a>
          </li>

          <li>
            <a href="#contact" class="block p-4 rounded-xl transition-all duration-300 ease-in-out hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900
              bg-purple-100/70 dark:bg-purple-900/60 backdrop-blur-sm shadow-md
              text-purple-800 dark:text-purple-100 font-semibold text-lg md:text-xl
              flex items-center group">
              <svg class="w-6 h-6 md:w-7 md:h-7 mr-3 text-purple-600 dark:text-purple-300 group-hover:rotate-12 transition-transform" 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 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21L9.5 13.596a18.337 18.337 0 006.702 6.702l1.018-1.018a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
              </svg>
              <span>Contact Agent</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</div>

Healthcare_Medical_Modal_Component

A complex, responsive modal component for healthcare/medical applications, inspired by Material Design with a Sunset/Warm color scheme. Includes form elements, images, and dark mode support.

Open Preview

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-70 dark:bg-gray-900 dark:bg-opacity-80">
  <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto transform transition-all duration-300 scale-100 opacity-100
      border-t-4 border-orange-500 dark:border-red-600
      sm:w-11/12 md:w-3/4 lg:w-2/3 xl:w-1/2
      animate-fade-in-up">

    <!-- Modal Header -->
    <div class="flex items-center justify-between p-6 bg-gradient-to-r from-orange-400 to-red-500 dark:from-red-600 dark:to-orange-700 text-white rounded-t-md">
      <h2 class="text-2xl font-bold font-sans tracking-wide">Patient Consultation Details</h2>
      <button class="text-white hover:text-gray-100 transition-colors duration-200 text-3xl leading-none">
        &times;
      </button>
    </div>

    <!-- Modal Body -->
    <div class="p-6 space-y-6 md:space-y-8">

      <!-- Patient Info Section -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 items-center border-b border-gray-200 dark:border-gray-700 pb-6">
        <div class="md:col-span-1 flex justify-center">
          <img class="w-24 h-24 rounded-full border-4 border-orange-300 dark:border-red-500 shadow-md transform transition-transform duration-300 hover:scale-105" src="https://randomuser.me/api/portraits/men/8.jpg" alt="Patient Avatar">
        </div>
        <div class="md:col-span-2 text-center md:text-left">
          <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">John Doe</h3>
          <p class="text-sm text-gray-600 dark:text-gray-400">ID: P-34567 | Age: 45 | Blood Type: O+</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Last Visit: 2023-10-26</p>
        </div>
      </div>

      <!-- Consultation Form -->
      <form class="space-y-6">
        <div>
          <label for="diagnosis" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Diagnosis</label>
          <textarea id="diagnosis" rows="4" class="block w-full px-4 py-3 rounded-md border border-gray-300 dark:border-gray-600 focus:ring-orange-500 focus:border-orange-500
              bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500
              shadow-sm transition-colors duration-200 resize-y" placeholder="Enter the diagnosis details..."></textarea>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
          <div>
            <label for="medication" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Prescribed Medication</label>
            <input type="text" id="medication" class="block w-full px-4 py-3 rounded-md border border-gray-300 dark:border-gray-600 focus:ring-orange-500 focus:border-orange-500
                bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500
                shadow-sm transition-colors duration-200" placeholder="e.g., Amoxicillin 500mg">
          </div>
          <div>
            <label for="dosage" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Dosage & Frequency</label>
            <input type="text" id="dosage" class="block w-full px-4 py-3 rounded-md border border-gray-300 dark:border-gray-600 focus:ring-orange-500 focus:border-orange-500
                bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500
                shadow-sm transition-colors duration-200" placeholder="e.g., 1 tablet, 2 times a day">
          </div>
        </div>

        <div>
          <label for="follow-up" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Follow-up Date</label>
          <input type="date" id="follow-up" class="block w-full px-4 py-3 rounded-md border border-gray-300 dark:border-gray-600 focus:ring-orange-500 focus:border-orange-500
              bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100
              shadow-sm transition-colors duration-200">
        </div>

        <!-- Attachments Section -->
        <div class="mt-8">
          <h4 class="text-md font-medium text-gray-800 dark:text-gray-200 mb-4">Attachments</h4>
          <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
            <div class="relative group rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 shadow-sm transition-all duration-200 hover:shadow-md">
              <img class="w-full h-24 object-cover" src="https://picsum.photos/id/1018/150/100" alt="Attachment 1">
              <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                <span class="text-white text-xs font-semibold">X-Ray.jpg</span>
              </div>
            </div>
            <div class="relative group rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 shadow-sm transition-all duration-200 hover:shadow-md">
              <img class="w-full h-24 object-cover" src="https://picsum.photos/id/1020/150/100" alt="Attachment 2">
              <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                <span class="text-white text-xs font-semibold">Lab_Results.pdf</span>
              </div>
            </div>
            <div class="flex items-center justify-center rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 p-4 min-h-[96px]
                hover:border-orange-400 dark:hover:border-red-500 transition-colors duration-200 cursor-pointer">
              <label for="file-upload" class="flex flex-col items-center justify-center text-center text-gray-500 dark:text-gray-400 cursor-pointer">
                <svg class="w-6 h-6 mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
                </svg>
                <span class="text-xs font-medium">Add File</span>
                <input id="file-upload" type="file" class="hidden">
              </label>
            </div>
          </div>
        </div>

      </form>

    </div>

    <!-- Modal Footer -->
    <div class="flex justify-end p-6 bg-gray-100 dark:bg-gray-700 rounded-b-md border-t border-gray-200 dark:border-gray-600 space-x-4">
      <button class="px-6 py-2 rounded-md border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300
          hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 shadow-sm font-medium">
        Cancel
      </button>
      <button class="px-6 py-2 rounded-md bg-orange-500 hover:bg-orange-600 dark:bg-red-600 dark:hover:bg-red-700 text-white font-semibold transition-colors duration-200 shadow-md
          focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-red-600">
        Save Consultation
      </button>
    </div>

  </div>
</div>

<style>
  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(20px) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .animate-fade-in-up {
    animation: fade-in-up 0.3s ease-out forwards;
  }
</style>

Chat Window Component

A simple, clean, and professional chat window component with a corporate blue color scheme, suitable for business environments, particularly in fashion/beauty contexts. Features responsive design, dark mode support, and basic chat functionality.

Open Preview

                <div class="flex flex-col h-[500px] w-full max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden font-sans">

  <!-- Chat Header -->
  <div class="flex items-center justify-between p-4 bg-blue-600 dark:bg-blue-800 text-white shadow-md">
    <div class="flex items-center space-x-3">
      <img class="w-10 h-10 rounded-full border-2 border-white dark:border-blue-300" src="https://randomuser.me/api/portraits/women/15.jpg" alt="Agent Avatar">
      <div>
        <p class="font-semibold text-lg">Support Agent</p>
        <p class="text-sm text-blue-100 dark:text-blue-200">Online</p>
      </div>
    </div>
    <button class="text-white hover:text-blue-100 dark:hover:text-blue-200 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 rounded-full p-1">
      <svg class="w-6 h-6" 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="M6 18L18 6M6 6l12 12"></path></svg>
    </button>
  </div>

  <!-- Chat Messages Area -->
  <div class="flex-1 overflow-y-auto p-4 space-y-4 bg-blue-50 dark:bg-gray-700">

    <!-- Incoming Message Example -->
    <div class="flex items-end">
      <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/15.jpg" alt="Agent Avatar">
      <div class="bg-blue-200 dark:bg-blue-600 text-gray-800 dark:text-white p-3 rounded-lg max-w-[75%]">
        <p class="text-sm">Hello! How can I assist you with your fashion queries today?</p>
        <span class="text-xs text-gray-500 dark:text-blue-100 block text-right mt-1">10:00 AM</span>
      </div>
    </div>

    <!-- Outgoing Message Example -->
    <div class="flex justify-end">
      <div class="bg-blue-500 dark:bg-blue-700 text-white p-3 rounded-lg max-w-[75%]">
        <p class="text-sm">I'm looking for advice on styling a new dress for a professional event.</p>
        <span class="text-xs text-blue-100 dark:text-blue-200 block text-right mt-1">10:02 AM</span>
      </div>
    </div>

    <!-- Incoming Message Example 2 -->
    <div class="flex items-end">
      <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/15.jpg" alt="Agent Avatar">
      <div class="bg-blue-200 dark:bg-blue-600 text-gray-800 dark:text-white p-3 rounded-lg max-w-[75%]">
        <p class="text-sm">Certainly! Could you tell me more about the dress's color and cut?</p>
        <span class="text-xs text-gray-500 dark:text-blue-100 block text-right mt-1">10:03 AM</span>
      </div>
    </div>

  </div>

  <!-- Chat Input Area -->
  <div class="flex items-center p-4 bg-blue-100 dark:bg-gray-900 border-t border-blue-200 dark:border-gray-700">
    <input type="text" placeholder="Type your message..." class="flex-1 p-3 rounded-full border border-blue-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 bg-white dark:bg-gray-800 text-gray-800 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 text-sm">
    <button class="ml-3 p-3 bg-blue-600 dark:bg-blue-700 text-white rounded-full hover:bg-blue-700 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-blue-100 dark:focus:ring-offset-gray-900">
      <svg class="w-5 h-5 -rotate-45" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path></svg>
    </button>
  </div>

</div>

Navigation Component

A clean, professional, and responsive navigation bar suitable for educational platforms, featuring a triadic color scheme, dark mode support, and a simple layout with common navigation links and a call-to-action button.

Open Preview

                <nav class="bg-blue-600 dark:bg-gray-900 shadow-md">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between">
    <!-- Logo/Brand Name -->
    <a href="#" class="text-white dark:text-orange-300 text-2xl font-bold tracking-wide hover:text-orange-200 dark:hover:text-white transition duration-300">
      EduHub
    </a>

    <!-- Mobile Menu Button (Hamburger) -->
    <div class="md:hidden">
      <button class="text-white dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-blue-500 rounded-md p-2">
        <svg class="h-6 w-6" 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 6h16M4 12h16m-7 6h7"></path>
        </svg>
      </button>
    </div>

    <!-- Desktop Navigation Links -->
    <div class="hidden md:flex space-x-6 lg:space-x-8 items-center">
      <a href="#" class="text-white dark:text-gray-300 text-lg font-medium hover:text-orange-200 dark:hover:text-blue-500 transition duration-300">
        Courses
      </a>
      <a href="#" class="text-white dark:text-gray-300 text-lg font-medium hover:text-orange-200 dark:hover:text-blue-500 transition duration-300">
        Programs
      </a>
      <a href="#" class="text-white dark:text-gray-300 text-lg font-medium hover:text-orange-200 dark:hover:text-blue-500 transition duration-300">
        About Us
      </a>
      <a href="#" class="text-white dark:text-gray-300 text-lg font-medium hover:text-orange-200 dark:hover:text-blue-500 transition duration-300">
        Contact
      </a>
      <button class="bg-orange-500 dark:bg-emerald-500 text-white dark:text-gray-900 px-6 py-2 rounded-full font-semibold hover:bg-orange-600 dark:hover:bg-emerald-600 transition duration-300 shadow-md">
        Sign Up
      </button>
    </div>

  </div>

  <!-- Mobile Menu (hidden by default, shown via JS toggle if needed) -->
  <!-- For this pure HTML/Tailwind component, we can use a utility class to demonstrate the concept, 
       but a real implementation would require toggle class using JS. -->
  <div class="md:hidden bg-blue-700 dark:bg-gray-800 pb-3 hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dark:text-gray-300 hover:bg-blue-600 dark:hover:bg-gray-700 hover:text-orange-100 dark:hover:text-blue-400 transition duration-300">
        Courses
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dark:text-gray-300 hover:bg-blue-600 dark:hover:bg-gray-700 hover:text-orange-100 dark:hover:text-blue-400 transition duration-300">
        Programs
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dark:text-gray-300 hover:bg-blue-600 dark:hover:bg-gray-700 hover:text-orange-100 dark:hover:text-blue-400 transition duration-300">
        About Us
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dark:text-gray-300 hover:bg-blue-600 dark:hover:bg-gray-700 hover:text-orange-100 dark:hover:text-blue-400 transition duration-300">
        Contact
      </a>
      <button class="block w-full text-left px-3 py-2 mt-2 rounded-md text-base font-semibold text-white dark:text-gray-900 bg-orange-500 dark:bg-emerald-500 hover:bg-orange-600 dark:hover:bg-emerald-600 transition duration-300 shadow-sm">
        Sign Up
      </button>
    </div>
  </div>
</nav>

1 ... 84 85 86 87 88 ... 335