Search Components

All Components

Browse all available Tailwind CSS components

Bauhaus_Retro_Photography_TOC

A complex, responsive Table of Contents component for photography websites, inspired by Bauhaus design principles and a retro/vintage color palette. Features geometric forms, muted colors, and full dark mode support, ideal for photo galleries and portfolios.

Open Preview

                <div class="font-sans bg-[#F4F1EA] text-[#3D3B40] dark:bg-[#2A2B2D] dark:text-[#EAE7DC] p-4 sm:p-6 md:p-8 lg:p-10 min-h-screen">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 lg:grid-cols-5 gap-6 sm:gap-8 md:gap-10">

    <!-- Main Content Area (simulated) -->
    <div class="hidden md:block md:col-span-3 lg:col-span-4 rounded-lg p-6 lg:p-8 bg-[#EAE7DC] dark:bg-[#3D3B40] shadow-md dark:shadow-lg">
      <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#ACD5C3] dark:text-[#A7C9A4] mb-4">Gallery Showcase</h1>
      <p class="text-lg leading-relaxed mb-6">Explore the meticulous details and vibrant stories captured through our lens. This simulated content area demonstrates how the Table of Contents would integrate alongside your main photography gallery or portfolio.</p>
      
      <h2 class="text-2xl sm:text-3xl font-semibold mb-4 text-[#ACD5C3] dark:text-[#A7C9A4]">Project Overview</h2>
      <img src="https://picsum.photos/seed/bauhaus1/800/450" alt="Abstract geometric art" class="w-full h-auto object-cover rounded-md mb-6 shadow-sm">
      <p class="mb-4">Paragraph about the project. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

      <h2 class="text-2xl sm:text-3xl font-semibold mb-4 text-[#ACD5C3] dark:text-[#A7C9A4]">Technique &amp; Vision</h2>
      <img src="https://picsum.photos/seed/bauhaus2/800/450" alt="Photography equipment" class="w-full h-auto object-cover rounded-md mb-6 shadow-sm">
      <p class="mb-4">Further details on the techniques used. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

      <h2 class="text-2xl sm:text-3xl font-semibold mb-4 text-[#ACD5C3] dark:text-[#A7C9A4]">Behind the Scenes</h2>
      <img src="https://picsum.photos/seed/bauhaus3/800/450" alt="Photographer at work" class="w-full h-auto object-cover rounded-md mb-6 shadow-sm">
      <p>Insights into the creative process. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <!-- Table of Contents Sidebar -->
    <div class="md:col-span-1 lg:col-span-1">
      <div class="bg-[#ACD5C3] dark:bg-[#8D9B8C] p-4 sm:p-6 rounded-lg shadow-xl dark:shadow-2xl overflow-hidden">
        <h2 class="text-xl sm:text-2xl font-bold text-[#F4F1EA] dark:text-[#2A2B2D] mb-4 pb-2 border-b-2 border-[#D7B102] dark:border-[#BFB996]">
          <span class="block transform -rotate-6 origin-bottom-left inline-block mr-2 text-2xl">&#x25B8;</span>
          Contents
        </h2>

        <nav class="">
          <ul class="space-y-3">
            <li>
              <a href="#section1" class="block p-3 rounded-md transition-all duration-300 ease-in-out 
                          bg-[#D7B102] text-[#3D3B40] font-semibold tracking-wide uppercase 
                          hover:bg-[#EAE7DC] hover:text-[#3D3B40] hover:shadow-inner-md 
                          dark:bg-[#BFB996] dark:text-[#2A2B2D] 
                          dark:hover:bg-[#EAE7DC] dark:hover:text-[#2A2B2D] 
                          relative overflow-hidden group">
                <span class="relative z-10">
                  1. <span class="hidden sm:inline">Project</span> Overview
                </span>
                <span class="absolute top-0 left-0 w-8 h-full bg-[#EAE7DC] dark:bg-[#2A2B2D] transform -skew-x-12 origin-top-left 
                            group-hover:w-full transition-all duration-500 ease-out z-0 opacity-0 group-hover:opacity-100"></span>
              </a>
            </li>
            <li>
              <a href="#section2" class="block p-3 rounded-md transition-all duration-300 ease-in-out 
                          bg-[#D3A20B] text-[#3D3B40] font-semibold tracking-wide uppercase
                          hover:bg-[#EAE7DC] hover:text-[#3D3B40] hover:shadow-inner-md 
                          dark:bg-[#B3A880] dark:text-[#2A2B2D] 
                          dark:hover:bg-[#EAE7DC] dark:hover:text-[#2A2B2D] 
                          relative overflow-hidden group">
                <span class="relative z-10">
                  2. <span class="hidden sm:inline">Technique &amp;</span> Vision
                </span>
                <span class="absolute top-0 left-0 w-8 h-full bg-[#EAE7DC] dark:bg-[#2A2B2D] transform -skew-x-12 origin-top-left 
                            group-hover:w-full transition-all duration-500 ease-out z-0 opacity-0 group-hover:opacity-100"></span>
              </a>
            </li>
            <li>
              <a href="#section3" class="block p-3 rounded-md transition-all duration-300 ease-in-out 
                          bg-[#CF920E] text-[#3D3B40] font-semibold tracking-wide uppercase
                          hover:bg-[#EAE7DC] hover:text-[#3D3B40] hover:shadow-inner-md 
                          dark:bg-[#A99F7A] dark:text-[#2A2B2D] 
                          dark:hover:bg-[#EAE7DC] dark:hover:text-[#2A2B2D] 
                          relative overflow-hidden group">
                <span class="relative z-10">
                  3. <span class="hidden sm:inline">Behind the</span> Scenes
                </span>
                <span class="absolute top-0 left-0 w-8 h-full bg-[#EAE7DC] dark:bg-[#2A2B2D] transform -skew-x-12 origin-top-left 
                            group-hover:w-full transition-all duration-500 ease-out z-0 opacity-0 group-hover:opacity-100"></span>
              </a>
            </li>
            <li>
              <a href="#section4" class="block p-3 rounded-md transition-all duration-300 ease-in-out 
                          bg-[#CB8310] text-[#3D3B40] font-semibold tracking-wide uppercase
                          hover:bg-[#EAE7DC] hover:text-[#3D3B40] hover:shadow-inner-md 
                          dark:bg-[#A09673] dark:text-[#2A2B2D] 
                          dark:hover:bg-[#EAE7DC] dark:hover:text-[#2A2B2D] 
                          relative overflow-hidden group">
                <span class="relative z-10">
                  4. <span class="hidden sm:inline">Client</span> Testimonials
                </span>
                <span class="absolute top-0 left-0 w-8 h-full bg-[#EAE7DC] dark:bg-[#2A2B2D] transform -skew-x-12 origin-top-left 
                            group-hover:w-full transition-all duration-500 ease-out z-0 opacity-0 group-hover:opacity-100"></span>
              </a>
            </li>
            <li>
              <a href="#section5" class="block p-3 rounded-md transition-all duration-300 ease-in-out 
                          bg-[#C77412] text-[#3D3B40] font-semibold tracking-wide uppercase
                          hover:bg-[#EAE7DC] hover:text-[#3D3B40] hover:shadow-inner-md 
                          dark:bg-[#978D6D] dark:text-[#2A2B2D] 
                          dark:hover:bg-[#EAE7DC] dark:hover:text-[#2A2B2D] 
                          relative overflow-hidden group">
                <span class="relative z-10">
                  5. <span class="hidden sm:inline">Contact</span> &amp; Booking
                </span>
                <span class="absolute top-0 left-0 w-8 h-full bg-[#EAE7DC] dark:bg-[#2A2B2D] transform -skew-x-12 origin-top-left 
                            group-hover:w-full transition-all duration-500 ease-out z-0 opacity-0 group-hover:opacity-100"></span>
              </a>
            </li>
          </ul>
        </nav>

        <div class="mt-8 pt-6 border-t-2 border-[#D7B102] dark:border-[#BFB996]">
          <h3 class="text-lg font-bold text-[#F4F1EA] dark:text-[#2A2B2D] mb-4">Related Galleries</h3>
          <ul class="space-y-4">
            <li>
              <a href="#" class="flex items-center space-x-3 text-[#F4F1EA] hover:text-[#D7B102] dark:text-[#EAE7DC] dark:hover:text-[#BFB996] transition-colors duration-200">
                <img src="https://picsum.photos/seed/gallery1/60/60" alt="Image from cityscape gallery" class="w-12 h-12 object-cover rounded-md shadow-sm border border-[#D7B102] dark:border-[#BFB996]">
                <span class="font-medium text-sm">Cityscapes &amp; Architecture</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center space-x-3 text-[#F4F1EA] hover:text-[#D7B102] dark:text-[#EAE7DC] dark:hover:text-[#BFB996] transition-colors duration-200">
                <img src="https://picsum.photos/seed/gallery2/60/60" alt="Image from nature photography gallery" class="w-12 h-12 object-cover rounded-md shadow-sm border border-[#D7B102] dark:border-[#BFB996]">
                <span class="font-medium text-sm">Nature &amp; Wildlife</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center space-x-3 text-[#F4F1EA] hover:text-[#D7B102] dark:text-[#EAE7DC] dark:hover:text-[#BFB996] transition-colors duration-200">
                <img src="https://picsum.photos/seed/gallery3/60/60" alt="Image from portrait gallery" class="w-12 h-12 object-cover rounded-md shadow-sm border border-[#D7B102] dark:border-[#BFB996]">
                <span class="font-medium text-sm">Portraits &amp; Editorial</span>
              </a>
            </li>
          </ul>
        </div>

        <div class="mt-8 pt-6 border-t-2 border-[#D7B102] dark:border-[#BFB996]">
          <h3 class="text-lg font-bold text-[#F4F1EA] dark:text-[#2A2B2D] mb-4">Your Photographer</h3>
          <div class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/82.jpg" alt="Photographer's avatar" class="w-16 h-16 rounded-full object-cover border-4 border-[#D7B102] dark:border-[#BFB996] shadow-md">
            <div>
              <p class="font-semibold text-lg text-[#F4F1EA] dark:text-[#EAE7DC]">Max Steiner</p>
              <p class="text-sm text-[#F4F1EA] dark:text-[#CECAC2] opacity-80">Lead Photographer</p>
            </div>
          </div>
          <p class="text-sm italic text-[#F4F1EA] dark:text-[#EAE7DC] opacity-90 mt-4">"Capturing moments, crafting stories. Bauhaus principles inspire my compositions."
          </p>
          <a href="#" class="mt-4 block w-full px-4 py-2 text-center rounded-md text-[#3D3B40] bg-[#D7B102] hover:bg-[#EAE7DC] 
                      dark:text-[#2A2B2D] dark:bg-[#BFB996] dark:hover:bg-[#EAE7DC] 
                      font-bold transition-all duration-300 ease-in-out shadow-md hover:shadow-lg 
                      transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-[#D7B102] dark:focus:ring-[#BFB996] focus:ring-opacity-75">
            View Portfolio
          </a>
        </div>

      </div>
    </div>

  </div>
</div>

Back to Top Button Component

A responsive back to top button with a paper/print-inspired design, using a black and white color scheme with a subtle accent. Suitable for educational platforms, it includes dark mode support and a clean, accessible layout.

Open Preview

                <div class="relative min-h-screen bg-gray-50 dark:bg-gray-900 font-sans">

  <!-- Simulate page content to demonstrate button functionality -->
  <div class="container mx-auto px-4 py-12">
    <h1 class="text-4xl md:text-5xl font-bold mb-8 text-gray-900 dark:text-gray-100 leading-tight">Welcome to Our Learning Platform</h1>
    
    <p class="mb-6 text-lg text-gray-700 dark:text-gray-300 leading-relaxed">
      Explore a world of knowledge and expand your horizons. Our courses are designed to be engaging, informative, and accessible to everyone. Dive deep into subjects that ignite your curiosity and empower your future.
    </p>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/300/200?random=1" alt="Course Thumbnail" class="w-full h-40 object-cover rounded-md mb-4 border border-gray-300 dark:border-gray-600">
        <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100">Fundamentals of Web Development</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm">Learn the basics of HTML, CSS, and JavaScript to build your first website.</p>
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/300/200?random=2" alt="Course Thumbnail" class="w-full h-40 object-cover rounded-md mb-4 border border-gray-300 dark:border-gray-600">
        <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100">Introduction to Data Science</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm">Discover the power of data analysis and machine learning with practical examples.</p>
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/300/200?random=3" alt="Course Thumbnail" class="w-full h-40 object-cover rounded-md mb-4 border border-gray-300 dark:border-gray-600">
        <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100">Creative Writing Workshop</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm">Unleash your inner storyteller and master the art of compelling narratives.</p>
      </div>
    </div>

    <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-inner border border-gray-200 dark:border-gray-700 text-gray-800 dark:text-gray-200 prose lg:prose-lg max-w-none mb-12">
      <h2 class="text-3xl font-bold mb-4 border-b pb-2 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100">Deep Dive into Learning</h2>
      <p>Our platform offers a diverse range of courses, from technology to arts, designed to foster continuous learning. We believe that education should be accessible and enjoyable. Each lesson is crafted by experts in their field, ensuring you receive high-quality, up-to-date information.</p>
      <p>Gain practical skills through hands-on exercises and real-world projects. Connect with a vibrant community of learners and educators. Share insights, ask questions, and collaborate on exciting new ideas. Education is a journey, and we're here to guide you every step of the way.</p>
      <p>Whether you're a beginner looking to pick up a new skill or an experienced professional aiming to refine your expertise, our comprehensive curriculum has something for everyone. Embrace the future of learning with us.</p>
      
      <ul class="list-disc list-inside space-y-2 mt-6">
        <li>Interactive lessons and quizzes</li>
        <li>Downloadable resources and guides</li>
        <li>Expert-led video tutorials</li>
        <li>Student discussion forums</li>
        <li>Certificate of completion</li>
      </ul>
      
      <p class="mt-6 italic text-gray-600 dark:text-gray-400">“The more that you read, the more things you will know. The more that you learn, the more places you'll go.” – Dr. Seuss</p>
    </div>

    <!-- Placeholder content to make the page scrollable -->
    <div class="h-[800px] w-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center rounded-lg shadow-md border border-gray-200 dark:border-gray-700 text-gray-800 dark:text-gray-200 text-xl font-semibold mb-12">
      Scroll down further to see the button appear!
    </div>
    <div class="h-[800px] w-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center rounded-lg shadow-md border border-gray-200 dark:border-gray-700 text-gray-800 dark:text-gray-200 text-xl font-semibold mb-12">
      Keep scrolling...
    </div>
    <div class="h-[800px] w-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center rounded-lg shadow-md border border-gray-200 dark:border-gray-700 text-gray-800 dark:text-gray-200 text-xl font-semibold">
      End of a very long page section.
    </div>

  </div>

  <!-- Back to Top Button -->
  <!-- Using a simple JS snippet to handle scroll visibility and scroll behavior -->
  <button id="back-to-top-btn" 
          class="fixed bottom-6 right-6 lg:bottom-8 lg:right-8 
                 opacity-0 translate-y-4 pointer-events-none 
                 transition-all duration-300 ease-in-out 
                 p-3 md:p-4 
                 bg-white dark:bg-gray-800 
                 border-2 border-gray-900 dark:border-gray-100 
                 rounded-full shadow-lg 
                 text-gray-900 dark:text-gray-100 
                 focus:outline-none focus:ring-4 focus:ring-accent-500/50 dark:focus:ring-accent-400/50 
                 hover:bg-gray-100 dark:hover:bg-gray-700 
                 hover:shadow-xl 
                 group"
          onclick="window.scrollTo({ top: 0, behavior: 'smooth' })">
    <svg class="w-6 h-6 md:w-7 md:h-7 group-hover:scale-110 transition-transform duration-200 ease-in-out" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
    </svg>
    <span class="sr-only">Back to top</span>
  </button>

</div>

<script>
  const backToTopBtn = document.getElementById('back-to-top-btn');

  window.addEventListener('scroll', () => {
    if (window.scrollY > 300) { // Show button after scrolling 300px
      backToTopBtn.classList.remove('opacity-0', 'translate-y-4', 'pointer-events-none');
      backToTopBtn.classList.add('opacity-100', 'translate-y-0');
    } else {
      backToTopBtn.classList.remove('opacity-100', 'translate-y-0');
      backToTopBtn.classList.add('opacity-0', 'translate-y-4', 'pointer-events-none');
    }
  });

  // Using the scrollIntoView for smooth scroll when button is clicked
  backToTopBtn.addEventListener('click', () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  });
<\/script>

<style>
  /* Define accent color variable */
  :root {
    --accent-color: #ef4444; /* Tailwind red-500 */
  }
  .dark:root {
    --accent-color: #f87171; /* Tailwind red-400 for dark mode */
  }

  /* Apply accent color to focus ring */
  .focus\:ring-accent-500\/50 {
    box-shadow: 0 0 0 4px rgba(var(--tw-accent-500-rgb), 0.5);
  }
  .dark\:focus\:ring-accent-400\/50 {
    box-shadow: 0 0 0 4px rgba(var(--tw-accent-400-rgb), 0.5);
  }

  /* Tailwind does not have a direct way to define custom colors on the fly for arbitrary properties, 
     so we're using a slight workaround with CSS variables for the focus ring, 
     assuming 'accent-500' and 'accent-400' are conceptually mapped to primary accent colors. 
     For a true Tailwind-only solution without global CSS, one would typically use 
     pre-defined Tailwind colors like `focus:ring-red-500/50`. 
     For this demo, we'll demonstrate a custom accent using the red-500/400 mapping. 
  */
  /* Example: Setting custom RGB values for accent to be used by ring */
  .focus\:ring-accent-500\/50 {
    --tw-accent-500-rgb: 239, 68, 68; /* red-500 */
  }
  .dark .focus\:ring-accent-400\/50 {
    --tw-accent-400-rgb: 248, 113, 113; /* red-400 */
  }

  /* Simulate a paper-like texture if desired (optional and beyond simple Tailwind classes) */
  /* 
  .bg-white, .dark:bg-gray-800 {
    background-image: url('data:image/svg+xml,%3Csvg width="6" height="6" viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%239C92AC" fill-opacity="0.1" fill-rule="evenodd"%3E%3Cpath d="M0 0h3v3H0V0zm3 3h3v3H3V3z"/%3E%3C/g%3E%3C/svg%3E');
    background-size: 6px 6px;
  }
  */
</style>

Gaming Timeline Component

A simple, vibrant, and responsive timeline component with a subtle 3D design optimized for gaming websites, featuring dark mode support.

Open Preview

                <div class="p-4 md:p-8 lg:p-12 bg-gradient-to-br from-indigo-900 to-purple-900 dark:from-gray-900 dark:to-black min-h-screen font-sans">

  <h2 class="text-4xl md:text-5xl lg:text-6xl font-extrabold text-center mb-12 text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-fuchsia-500 dark:from-red-400 dark:to-fuchsia-400 drop-shadow-lg leading-tight">
    <span class="block">Epic Milestones</span>
    <span class="block text-2xl md:text-3xl lg:text-4xl font-semibold opacity-80 text-white dark:text-gray-200 mt-2">The Journey of Valor</span>
  </h2>

  <div class="max-w-4xl mx-auto relative">

    <!-- Timeline Line -->
    <div class="absolute left-1/2 -translate-x-1/2 w-1 h-full bg-gradient-to-b from-yellow-400 via-pink-500 to-purple-600 dark:from-yellow-300 dark:via-pink-400 dark:to-purple-500 shadow-xl rounded-full z-0"></div>

    <!-- Timeline Items Container -->
    <div class="space-y-16 relative z-10">

      <!-- Timeline Item 1 -->
      <div class="flex flex-col md:flex-row items-center justify-between relative">
        <div class="w-full md:w-1/2 md:pr-8 text-right">
          <div class="bg-gradient-to-br from-blue-600 to-indigo-700 dark:from-blue-700 dark:to-indigo-800 p-6 rounded-xl shadow-2xl transform hover:scale-105 transition-transform duration-300 ease-in-out border-b-4 border-r-4 border-blue-800 dark:border-blue-900 relative group">
            <span class="absolute -top-3 -right-3 px-4 py-1 bg-gradient-to-br from-pink-500 to-red-600 text-white text-sm font-bold rounded-lg shadow-lg rotate-3">New Chapter!</span>
            <h3 class="text-white text-2xl font-bold mb-2 drop-shadow-md">The Dawn of Realms</h3>
            <p class="text-indigo-100 text-lg opacity-90">The ancient prophecy fulfilled, heroes unite to face the encroaching shadows. The first realm is reclaimed.</p>
            <span class="block text-indigo-200 text-sm mt-3 opacity-70">Q1 2024</span>
          </div>
        </div>

        <div class="md:absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 mt-4 md:mt-0">
          <div class="w-8 h-8 rounded-full bg-gradient-to-br from-yellow-400 to-orange-500 dark:from-yellow-300 dark:to-orange-400 flex items-center justify-center border-4 border-white dark:border-gray-800 shadow-xl">
            <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.24 1.5l1.63 3.32a.5.5 0 00.37.27l3.66.53a.5.5 0 01.28.85l-2.65 2.58a.5.5 0 00-.14.44l.63 3.65a.5.5 0 01-.73.53L10 13.06a.5.5 0 00-.46 0l-3.27 1.72a.5.5 0 01-.73-.53l.63-3.65a.5.5 0 00-.14-.44l-2.65-2.58a.5.5 0 01.28-.85l3.66-.53a.5.5 0 00.37-.27L9.24 1.5z" clip-rule="evenodd"></path></svg>
          </div>
        </div>

        <div class="w-full md:w-1/2 md:pl-8 mt-4 md:mt-0">
          <!-- Empty for alternating layout -->
        </div>
      </div>

      <!-- Timeline Item 2 -->
      <div class="flex flex-col md:flex-row items-center justify-between relative">
        <div class="w-full md:w-1/2 md:pr-8 order-2 md:order-1 text-right">
          <!-- Empty for alternating layout -->
        </div>

        <div class="md:absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 mt-4 md:mt-0">
          <div class="w-8 h-8 rounded-full bg-gradient-to-br from-red-500 to-fuchsia-600 dark:from-red-400 dark:to-fuchsia-500 flex items-center justify-center border-4 border-white dark:border-gray-800 shadow-xl">
            <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 01-8 8v-8H2z"></path><path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path></svg>
          </div>
        </div>

        <div class="w-full md:w-1/2 md:pl-8 order-1 md:order-2">
          <div class="bg-gradient-to-br from-green-500 to-teal-600 dark:from-green-600 dark:to-teal-700 p-6 rounded-xl shadow-2xl transform hover:scale-105 transition-transform duration-300 ease-in-out border-b-4 border-r-4 border-green-700 dark:border-green-800 relative group">
             <span class="absolute -top-3 -left-3 px-4 py-1 bg-gradient-to-br from-orange-400 to-yellow-500 text-white text-sm font-bold rounded-lg shadow-lg -rotate-3">Expansion!</span>
            <h3 class="text-white text-2xl font-bold mb-2 drop-shadow-md">The Emerald Jungle</h3>
            <p class="text-teal-100 text-lg opacity-90">New exotic lands are discovered, bringing unique challenges and powerful artifacts. Guilds establish outposts.</p>
            <span class="block text-teal-200 text-sm mt-3 opacity-70">Q3 2024</span>
          </div>
        </div>
      </div>

      <!-- Timeline Item 3 -->
      <div class="flex flex-col md:flex-row items-center justify-between relative">
        <div class="w-full md:w-1/2 md:pr-8 text-right">
          <div class="bg-gradient-to-br from-purple-600 to-pink-700 dark:from-purple-700 dark:to-pink-800 p-6 rounded-xl shadow-2xl transform hover:scale-105 transition-transform duration-300 ease-in-out border-b-4 border-r-4 border-purple-800 dark:border-purple-900 relative group">
             <span class="absolute -top-3 -right-3 px-4 py-1 bg-gradient-to-br from-blue-500 to-indigo-600 text-white text-sm font-bold rounded-lg shadow-lg rotate-3">Major Event!</span>
            <h3 class="text-white text-2xl font-bold mb-2 drop-shadow-md">The Shadow Citadel Falls</h3>
            <p class="text-pink-100 text-lg opacity-90">After a grueling siege, the ultimate fortress of evil is vanquished. The world breathes a sigh of temporary peace.</p>
            <span class="block text-pink-200 text-sm mt-3 opacity-70">Q4 2024</span>
          </div>
        </div>

        <div class="md:absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 mt-4 md:mt-0">
          <div class="w-8 h-8 rounded-full bg-gradient-to-br from-cyan-400 to-blue-500 dark:from-cyan-300 dark:to-blue-400 flex items-center justify-center border-4 border-white dark:border-gray-800 shadow-xl">
            <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L11.586 2.586A2 2 0 0010.172 2H6zM6 4h4v3a1 1 0 001 1h3v7a1 1 0 01-1 1H6a1 1 0 01-1-1V5a1 1 0 011-1zm3 8a1 1 0 00-1 1v1a1 1 0 001 1h2a1 1 0 001-1v-1a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
          </div>
        </div>

        <div class="w-full md:w-1/2 md:pl-8 mt-4 md:mt-0">
          <!-- Empty for alternating layout -->
        </div>
      </div>

    </div>
  </div>

</div>

Retro_Healthcare_Sitemap_Component

A simple, responsive sitemap component with a retro/vintage aesthetic, analogous color scheme, suitable for healthcare applications, including dark mode support.

Open Preview

                <div class="font-mono text-gray-800 bg-gradient-to-br from-indigo-200 via-purple-200 to-pink-200 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 dark:text-gray-200 p-6 sm:p-8 lg:p-12 min-h-screen">
  <div class="max-w-6xl mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg border-2 border-purple-500 dark:border-pink-500 overflow-hidden">
    <div class="p-6 sm:p-8 lg:p-10 border-b border-purple-300 dark:border-pink-700 bg-purple-100 dark:bg-gray-900">
      <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-pink-400 mb-2 text-center tracking-wider uppercase">
        <span class="text-purple-600 dark:text-indigo-400">MediCorp</span> Sitemap
      </h1>
      <p class="text-center text-gray-600 dark:text-gray-400 text-lg sm:text-xl">Navigate our digital archive</p>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6 sm:p-8 lg:p-10">

      <!-- Section 1: About Us -->
      <div class="border-2 border-indigo-400 dark:border-indigo-600 rounded-lg p-5 bg-indigo-50 dark:bg-gray-700 shadow-md transform hover:scale-105 transition-transform duration-300">
        <h2 class="text-2xl font-bold text-indigo-700 dark:text-indigo-300 mb-3 uppercase tracking-wide">About Us</h2>
        <ul class="space-y-2 text-gray-700 dark:text-gray-300">
          <li><a href="#" class="hover:text-indigo-900 dark:hover:text-indigo-100 underline decoration-indigo-400 hover:decoration-indigo-700 dark:decoration-indigo-600 dark:hover:decoration-indigo-300 text-lg">Our Mission</a></li>
          <li><a href="#" class="hover:text-indigo-900 dark:hover:text-indigo-100 underline decoration-indigo-400 hover:decoration-indigo-700 dark:decoration-indigo-600 dark:hover:decoration-indigo-300 text-lg">Our History</a></li>
          <li><a href="#" class="hover:text-indigo-900 dark:hover:text-indigo-100 underline decoration-indigo-400 hover:decoration-indigo-700 dark:decoration-indigo-600 dark:hover:decoration-indigo-300 text-lg">Leadership Team</a></li>
          <li><a href="#" class="hover:text-indigo-900 dark:hover:text-indigo-100 underline decoration-indigo-400 hover:decoration-indigo-700 dark:decoration-indigo-600 dark:hover:decoration-indigo-300 text-lg">Careers</a></li>
        </ul>
      </div>

      <!-- Section 2: Services -->
      <div class="border-2 border-purple-400 dark:border-purple-600 rounded-lg p-5 bg-purple-50 dark:bg-gray-700 shadow-md transform hover:scale-105 transition-transform duration-300">
        <h2 class="text-2xl font-bold text-purple-700 dark:text-purple-300 mb-3 uppercase tracking-wide">Services</h2>
        <ul class="space-y-2 text-gray-700 dark:text-gray-300 leading-relaxed">
          <li><a href="#" class="hover:text-purple-900 dark:hover:text-purple-100 underline decoration-purple-400 hover:decoration-purple-700 dark:decoration-purple-600 dark:hover:decoration-purple-300  text-lg">Primary Care</a></li>
          <li><a href="#" class="hover:text-purple-900 dark:hover:text-purple-100 underline decoration-purple-400 hover:decoration-purple-700 dark:decoration-purple-600 dark:hover:decoration-purple-300  text-lg">Specialties</a></li>
          <li><a href="#" class="hover:text-purple-900 dark:hover:text-purple-100 underline decoration-purple-400 hover:decoration-purple-700 dark:decoration-purple-600 dark:hover:decoration-purple-300  text-lg">Emergency</a></li>
          <li><a href="#" class="hover:text-purple-900 dark:hover:text-purple-100 underline decoration-purple-400 hover:decoration-purple-700 dark:decoration-purple-600 dark:hover:decoration-purple-300  text-lg">Telehealth</a></li>
        </ul>
      </div>

      <!-- Section 3: Patients & Visitors -->
      <div class="border-2 border-pink-400 dark:border-pink-600 rounded-lg p-5 bg-pink-50 dark:bg-gray-700 shadow-md transform hover:scale-105 transition-transform duration-300">
        <h2 class="text-2xl font-bold text-pink-700 dark:text-pink-300 mb-3 uppercase tracking-wide">Patients & Visitors</h2>
        <ul class="space-y-2 text-gray-700 dark:text-gray-300 leading-relaxed">
          <li><a href="#" class="hover:text-pink-900 dark:hover:text-pink-100 underline decoration-pink-400 hover:decoration-pink-700 dark:decoration-pink-600 dark:hover:decoration-pink-300  text-lg">Patient Portal</a></li>
          <li><a href="#" class="hover:text-pink-900 dark:hover:text-pink-100 underline decoration-pink-400 hover:decoration-pink-700 dark:decoration-pink-600 dark:hover:decoration-pink-300  text-lg">Appointments</a></li>
          <li><a href="#" class="hover:text-pink-900 dark:hover:text-pink-100 underline decoration-pink-400 hover:decoration-pink-700 dark:decoration-pink-600 dark:hover:decoration-pink-300  text-lg">Visiting Hours</a></li>
          <li><a href="#" class="hover:text-pink-900 dark:hover:text-pink-100 underline decoration-pink-400 hover:decoration-pink-700 dark:decoration-pink-600 dark:hover:decoration-pink-300  text-lg">Billing & Insurance</a></li>
        </ul>
      </div>

      <!-- Section 4: Health Resources -->
      <div class="border-2 border-indigo-400 dark:border-indigo-600 rounded-lg p-5 bg-indigo-50 dark:bg-gray-700 shadow-md transform hover:scale-105 transition-transform duration-300">
        <h2 class="text-2xl font-bold text-indigo-700 dark:text-indigo-300 mb-3 uppercase tracking-wide">Resources</h2>
        <ul class="space-y-2 text-gray-700 dark:text-gray-300 leading-relaxed">
          <li><a href="#" class="hover:text-indigo-900 dark:hover:text-indigo-100 underline decoration-indigo-400 hover:decoration-indigo-700 dark:decoration-indigo-600 dark:hover:decoration-indigo-300  text-lg">Health Blog</a></li>
          <li><a href="#" class="hover:text-indigo-900 dark:hover:text-indigo-100 underline decoration-indigo-400 hover:decoration-indigo-700 dark:decoration-indigo-600 dark:hover:decoration-indigo-300  text-lg">Medical Library</a></li>
          <li><a href="#" class="hover:text-indigo-900 dark:hover:text-indigo-100 underline decoration-indigo-400 hover:decoration-indigo-700 dark:decoration-indigo-600 dark:hover:decoration-indigo-300  text-lg">Events & Classes</a></li>
          <li><a href="#" class="hover:text-indigo-900 dark:hover:text-indigo-100 underline decoration-indigo-400 hover:decoration-indigo-700 dark:decoration-indigo-600 dark:hover:decoration-indigo-300  text-lg">FAQs</a></li>
        </ul>
      </div>

      <!-- Section 5: Locations -->
      <div class="border-2 border-purple-400 dark:border-purple-600 rounded-lg p-5 bg-purple-50 dark:bg-gray-700 shadow-md transform hover:scale-105 transition-transform duration-300">
        <h2 class="text-2xl font-bold text-purple-700 dark:text-purple-300 mb-3 uppercase tracking-wide">Locations</h2>
        <ul class="space-y-2 text-gray-700 dark:text-gray-300 leading-relaxed">
          <li><a href="#" class="hover:text-purple-900 dark:hover:text-purple-100 underline decoration-purple-400 hover:decoration-purple-700 dark:decoration-purple-600 dark:hover:decoration-purple-300  text-lg">Find a Clinic</a></li>
          <li><a href="#" class="hover:text-purple-900 dark:hover:text-purple-100 underline decoration-purple-400 hover:decoration-purple-700 dark:decoration-purple-600 dark:hover:decoration-purple-300  text-lg">Hospitals</a></li>
          <li><a href="#" class="hover:text-purple-900 dark:hover:text-purple-100 underline decoration-purple-400 hover:decoration-purple-700 dark:decoration-purple-600 dark:hover:decoration-purple-300  text-lg">Directions</a></li>
          <li><a href="#" class="hover:text-purple-900 dark:hover:text-purple-100 underline decoration-purple-400 hover:decoration-purple-700 dark:decoration-purple-600 dark:hover:decoration-purple-300  text-lg">Parking</a></li>
        </ul>
      </div>

      <!-- Section 6: Contact Us -->
      <div class="border-2 border-pink-400 dark:border-pink-600 rounded-lg p-5 bg-pink-50 dark:bg-gray-700 shadow-md transform hover:scale-105 transition-transform duration-300">
        <h2 class="text-2xl font-bold text-pink-700 dark:text-pink-300 mb-3 uppercase tracking-wide">Contact Us</h2>
        <ul class="space-y-2 text-gray-700 dark:text-gray-300 leading-relaxed">
          <li><a href="#" class="hover:text-pink-900 dark:hover:text-pink-100 underline decoration-pink-400 hover:decoration-pink-700 dark:decoration-pink-600 dark:hover:decoration-pink-300  text-lg">General Inquiries</a></li>
          <li><a href="#" class="hover:text-pink-900 dark:hover:text-pink-100 underline decoration-pink-400 hover:decoration-pink-700 dark:decoration-pink-600 dark:hover:decoration-pink-300  text-lg">Feedback</a></li>
          <li><a href="#" class="hover:text-pink-900 dark:hover:text-pink-100 underline decoration-pink-400 hover:decoration-pink-700 dark:decoration-pink-600 dark:hover:decoration-pink-300  text-lg">Call Us</a></li>
          <li><a href="#" class="hover:text-pink-900 dark:hover:text-pink-100 underline decoration-pink-400 hover:decoration-pink-700 dark:decoration-pink-600 dark:hover:decoration-pink-300  text-lg">Email Us</a></li>
        </ul>
      </div>

    </div>

    <div class="p-6 sm:p-8 lg:p-10 text-center text-gray-600 dark:text-gray-400 border-t border-purple-300 dark:border-pink-700 bg-purple-100 dark:bg-gray-900">
      <p class="text-lg sm:text-xl">&copy; 2023 MediCorp. All rights reserved.</p>
    </div>
  </div>
</div>

Memphis_Rainbow_Breadcrumb_Navigation

A simple, responsive breadcrumb navigation component with a bold Memphis Design aesthetic featuring a multi-color rainbow gradient, suitable for blog/content sites. Includes dark mode support.

Open Preview

                <nav class="flex justify-center py-4 px-2 sm:px-4 md:px-6 lg:px-8 bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 dark:from-gray-800 dark:via-gray-900 dark:to-black" aria-label="Breadcrumb">
  <ol class="flex items-center space-x-2 sm:space-x-4">
    <li>
      <div class="flex items-center">
        <a href="#" class="text-white hover:text-yellow-200 transition duration-300 ease-in-out font-bold text-sm sm:text-base tracking-wider relative group">
          <svg class="flex-shrink-0 h-4 w-4 sm:h-5 sm:w-5 text-white group-hover:text-yellow-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001 1h3v-9a1 1 0 00-1-1H9a1 1 0 00-1 1v9h3m-3 1h6" />
          </svg>
          <span class="sr-only">Home</span>
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-yellow-200 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out origin-left"></span>
        </a>
      </div>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 text-yellow-300 transform rotate-45" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          <path d="M5.293 15.707a1 1 0 010-1.414L9.586 10 5.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
        </svg>
        <a href="#" class="ml-2 sm:ml-4 text-white hover:text-yellow-200 transition duration-300 ease-in-out font-bold text-sm sm:text-base tracking-wider relative group">
          Blog
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-yellow-200 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out origin-left"></span>
        </a>
      </div>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 text-yellow-300 transform rotate-45" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          <path d="M5.293 15.707a1 1 0 010-1.414L9.586 10 5.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
        </svg>
        <a href="#" class="ml-2 sm:ml-4 text-white hover:text-yellow-200 transition duration-300 ease-in-out font-bold text-sm sm:text-base tracking-wider relative group" aria-current="page">
          Latest Articles
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-yellow-200 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out origin-left"></span>
        </a>
      </div>
    </li>
  </ol>
</nav>

Mega Menu Component - Dating/Social

A simple, responsive mega menu component designed for dating/social platforms, featuring microinteractions and a purple/violet color scheme. Includes dark mode support.

Open Preview

                <nav class="relative bg-white shadow-lg dark:bg-gray-900 transition-colors duration-300">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between">
    <a href="#" class="text-2xl font-bold text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 transition-colors duration-200">ConnectMe</a>
    
    <!-- Mobile menu button -->
    <div class="lg:hidden">
      <button id="mobile-menu-button" class="text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 rounded-md p-2 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200">
        <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 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>

    <!-- Desktop/Tablet Menu -->
    <div class="hidden lg:flex lg:items-center lg:space-x-8" id="desktop-menu">
      <div class="group relative">
        <button class="inline-flex items-center text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 font-medium py-2 px-3 rounded-md transition-all duration-200 group-hover:bg-purple-50 dark:group-hover:bg-gray-800">
          Discover
          <svg class="ml-2 w-4 h-4 transform group-hover:rotate-180 transition-transform duration-200" 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 9l-7 7-7-7"></path>
          </svg>
        </button>
        <div class="absolute left-1/2 -translate-x-1/2 mt-2 w-64 bg-white dark:bg-gray-800 shadow-xl rounded-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible group-hover:mt-3 transition-all duration-300 transform group-hover:scale-100 scale-95 origin-top z-10 p-4 border border-purple-100 dark:border-gray-700">
          <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-purple-50 dark:hover:bg-gray-700 hover:text-purple-600 dark:hover:text-purple-400 rounded-md transition-colors duration-200 group flex items-center space-x-2">
            <svg class="w-5 h-5 text-purple-500 group-hover:animate-bounce-y" 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>Nearby Profiles</span>
          </a>
          <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-purple-50 dark:hover:bg-gray-700 hover:text-purple-600 dark:hover:text-purple-400 rounded-md transition-colors duration-200 group flex items-center space-x-2">
            <svg class="w-5 h-5 text-purple-500 group-hover:animate-pulse" 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="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
            <span>Instant Matches</span>
          </a>
          <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-purple-50 dark:hover:bg-gray-700 hover:text-purple-600 dark:hover:text-purple-400 rounded-md transition-colors duration-200 group flex items-center space-x-2">
            <svg class="w-5 h-5 text-purple-500 group-hover:scale-110 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="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>
            <span>Who Likes You</span>
          </a>
        </div>
      </div>

      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition-colors duration-200 font-medium py-2 px-3 rounded-md hover:bg-purple-50 dark:hover:bg-gray-800">Messages</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition-colors duration-200 font-medium py-2 px-3 rounded-md hover:bg-purple-50 dark:hover:bg-gray-800">Events</a>
      <a href="#" class="text-purple-600 dark:text-purple-400 border border-purple-600 dark:border-purple-400 hover:bg-purple-600 hover:text-white dark:hover:bg-purple-400 dark:hover:text-gray-900 font-medium py-2 px-4 rounded-full transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 group relative overflow-hidden">
        <span class="relative z-10">Go Premium</span>
        <span class="absolute inset-0 bg-white dark:bg-gray-900 opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform scale-50 group-hover:scale-100 rounded-full"></span>
      </a>
    </div>
  </div>

  <!-- Mobile Menu Content (initially hidden) -->
  <div id="mobile-menu" class="hidden lg:hidden bg-white dark:bg-gray-900 pb-4 border-t border-gray-200 dark:border-gray-700">
    <div class="px-4 pt-2 space-y-2">
      <button id="mobile-discover-button" class="w-full flex items-center justify-between text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 font-medium py-2 px-3 rounded-md hover:bg-purple-50 dark:hover:bg-gray-800 transition-colors duration-200">
        <span>Discover</span>
        <svg class="w-4 h-4 transform transition-transform duration-200" 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 9l-7 7-7-7"></path>
        </svg>
      </button>
      <div id="mobile-discover-submenu" class="hidden pl-4 space-y-2">
        <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-purple-50 dark:hover:bg-gray-700 hover:text-purple-600 dark:hover:text-purple-400 rounded-md transition-colors duration-200 flex items-center space-x-2">
          <svg class="w-5 h-5 text-purple-500" 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>Nearby Profiles</span>
        </a>
        <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-purple-50 dark:hover:bg-gray-700 hover:text-purple-600 dark:hover:text-purple-400 rounded-md transition-colors duration-200 flex items-center space-x-2">
          <svg class="w-5 h-5 text-purple-500" 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="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
          <span>Instant Matches</span>
        </a>
        <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-purple-50 dark:hover:bg-gray-700 hover:text-purple-600 dark:hover:text-purple-400 rounded-md transition-colors duration-200 flex items-center space-x-2">
          <svg class="w-5 h-5 text-purple-500" 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>
          <span>Who Likes You</span>
        </a>
      </div>
      <a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition-colors duration-200 font-medium py-2 px-3 rounded-md hover:bg-purple-50 dark:hover:bg-gray-800">Messages</a>
      <a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition-colors duration-200 font-medium py-2 px-3 rounded-md hover:bg-purple-50 dark:hover:bg-gray-800">Events</a>
      <a href="#" class="block text-purple-600 dark:text-purple-400 border border-purple-600 dark:border-purple-400 hover:bg-purple-600 hover:text-white dark:hover:bg-purple-400 dark:hover:text-gray-900 font-medium py-2 px-4 rounded-full text-center transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 mt-2 block">Go Premium</a>
    </div>
  </div>
</nav>

<style>
  /* Custom animations for microinteractions */
  @keyframes bounce-y {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }
  .group-hover\:animate-bounce-y:hover {
    animation: bounce-y 0.6s ease-in-out;
  }

  /* Tailwind's animate-pulse is good for pulse */

  /* Dark mode setup (assuming dark class is on body or html) */
  /* This CSS is typically handled by Tailwind's dark: prefix automatically, 
     but is included for clarity on how it would map if custom animations 
     needed dark mode specific styles */
</style>

<script>
  // Simple JavaScript to toggle mobile menu visibility and submenu
  document.addEventListener('DOMContentLoaded', () => {
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');
    const mobileDiscoverButton = document.getElementById('mobile-discover-button');
    const mobileDiscoverSubmenu = document.getElementById('mobile-discover-submenu');

    mobileMenuButton.addEventListener('click', () => {
      mobileMenu.classList.toggle('hidden');
      // Rotate icon for mobile menu button
      const svg = mobileMenuButton.querySelector('svg');
      if (mobileMenu.classList.contains('hidden')) {
        svg.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>';
      } else {
        svg.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>';
      }
    });

    mobileDiscoverButton.addEventListener('click', () => {
      mobileDiscoverSubmenu.classList.toggle('hidden');
      // Rotate icon for mobile discover button
      mobileDiscoverButton.querySelector('svg').classList.toggle('rotate-180');
    });

    // Close mobile menu when switching to desktop view
    window.addEventListener('resize', () => {
      if (window.innerWidth >= 1024) { // Equivalent to Tailwind's lg breakpoint
        mobileMenu.classList.add('hidden');
        mobileMenuButton.querySelector('svg').innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>';
      }
    });
  });
</script>

ArtDecoAuthComponent

Art Deco inspired authentication component for healthcare/medical applications, featuring geometric patterns, high contrast colors, and full responsiveness with dark mode support. Suitable for login or registration forms.

Open Preview

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-gray-800 font-sans">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 shadow-2xl rounded-lg overflow-hidden border-t-8 border-b-8 border-teal-500 dark:border-teal-700 transform transition-all duration-300 scale-95 md:scale-100 ease-in-out hover:shadow-3xl hover:scale-100">
    <div class="p-8 pb-0 text-center">
      <svg class="mx-auto h-16 w-16 text-teal-600 dark:text-teal-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.001 12.001 0 002.92 12c0 3.072 1.354 5.961 3.75 8.016A12.001 12.001 0 0012 21c3.072 0 5.961-1.354 8.016-3.75A12.001 12.001 0 0021.08 12c0-3.072-1.354-5.961-3.75-8.016z" />
      </svg>
      <h2 class="mt-4 text-3xl font-extrabold text-gray-900 dark:text-white tracking-wider uppercase leading-tight font-serif">
        <span class="text-teal-600 dark:text-teal-500">Pharma</span>Login
      </h2>
      <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
        Your health, simplified.
      </p>
    </div>
    <div class="p-8 pt-6">
      <form class="space-y-6">
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
          <div class="mt-1 relative rounded-md shadow-sm">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <svg class="h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
                <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
              </svg>
            </div>
            <input id="email" name="email" type="email" autocomplete="email" required class="block w-full py-3 pl-10 pr-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-teal-500 focus:border-teal-500 sm:text-sm text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400" placeholder="[email protected]">
          </div>
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
          <div class="mt-1 relative rounded-md shadow-sm">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <svg class="h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2h2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2h2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
              </svg>
            </div>
            <input id="password" name="password" type="password" autocomplete="current-password" required class="block w-full py-3 pl-10 pr-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-teal-500 focus:border-teal-500 sm:text-sm text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400" placeholder="••••••••">
          </div>
        </div>

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

          <div class="text-sm">
            <a href="#" class="font-medium text-teal-600 dark:text-teal-500 hover:text-teal-500 dark:hover:text-teal-400 hover:underline">
              Forgot your password?
            </a>
          </div>
        </div>

        <div>
          <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-bold text-white bg-teal-600 hover:bg-teal-700 dark:bg-teal-700 dark:hover:bg-teal-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 uppercase tracking-widest transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105">
            Sign In
          </button>
        </div>
      </form>

      <div class="mt-6 text-center">
        <p class="text-sm text-gray-600 dark:text-gray-400">
          Don't have an account?
          <a href="#" class="font-medium text-teal-600 dark:text-teal-500 hover:text-teal-500 dark:hover:text-teal-400 hover:underline">
            Sign Up for free
          </a>
        </p>
      </div>
    </div>
    <div class="relative bg-gradient-to-r from-teal-500 to-teal-700 dark:from-teal-700 dark:to-teal-900 h-16 flex items-center justify-center">
      <div class="absolute w-full h-full opacity-10 dark:opacity-20" style="background-image: url('data:image/svg+xml,%3Csvg width=\'60\' height=\'60\' viewBox=\'0 0 60 60\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'none\' fill-rule=\'evenodd\'%3E%3Cg fill=\'%23000\' fill-opacity=\'0.05\'%3E%3Cpath d=\'M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6zm30 30v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zm0 4v-4H4v4H0v2h4v4h2v-4h4v-2H6zM42 0h-2v4h-4v2h4v4h2V6h4V4h-4zM24 6v4h-4v-4h-4V0h4v4h4V0h4v4h4V0h-4v6h-4zm0-6V0h-2v4h-4v2h4v4h2V6h4V4h-4zM0 6h4V0h-4v6zM42 6h4V0h-4v6zM0 42h4V36H0v6zM42 42h4V36h-4v6zM24 42h4V36h-4v6zM6 42h4V36H6v6zM36 42h4V36h-4v6zM48 6h4V0h-4v6zM54 0h-2v4h-4v2h4v4h2V6h4V4h-4zM54 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM48 42h4V36h-4v6zM54 42h4V36h-4v6zM48 36h4v6h-4v-6zM36 0h4V6h-4V0zM60 0h-4v6h4V0zM60 36h-4v6h4V36zM36 36h4v6h-4v-6zM6 0h4V6H6V0zM6 36h4v6H6v-6zM24 0h4V6h-4V0zM24 36h4V42h-4V36zM30 6h4V0h-4v6zM30 36h4V42h-4V36zM18 0h4V6h-4V0zM18 36h4V42h-4V36zM12 0h4V6h-4V0zM12 36h4V42h-4V36z%27/%3E%3C/g%3E%3C/svg%3E'); display: block;"></div>
      <p class="relative z-10 text-xs text-white uppercase tracking-widest">
        Secure & Compliant Access
      </p>
    </div>
  </div>
</div>

Neumorphic_Real_Estate_Sitemap_Component

A simple, responsive neumorphic site map component for real estate platforms with a gradient rainbow color scheme and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 font-sans">
  <div class="w-full max-w-4xl p-6 sm:p-8 lg:p-10 rounded-3xl backdrop-blur-sm shadow-xl
              bg-gradient-to-br from-green-300 via-blue-300 to-purple-300
              dark:from-gray-800 dark:via-gray-850 dark:to-gray-900
              dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.6),_0_4px_8px_rgba(0,0,0,0.8)]
              shadow-[inset_0_2px_4px_rgba(255,255,255,0.7),_0_4px_8px_rgba(150,150,150,0.3)]
              transform transition-all duration-300 ease-in-out">
    <h2 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-center mb-8
               bg-clip-text text-transparent bg-gradient-to-r from-red-500 via-yellow-500 to-indigo-500
               dark:from-red-300 dark:via-yellow-300 dark:to-indigo-300
               drop-shadow-lg">
      Explore Our Properties
    </h2>

    <nav class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
      <!-- Category 1: Buy Homes -->
      <div class="p-5 rounded-2xl flex flex-col items-center justify-center
                  bg-gray-200 dark:bg-gray-800
                  shadow-[5px_5px_10px_#bebebe,-5px_-5px_10px_#ffffff]
                  dark:shadow-[5px_5px_10px_#0a0a0a,-5px_-5px_10px_#262626]
                  transform transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-[7px_7px_14px_#bebebe,-7px_-7px_14px_#ffffff]
                  dark:hover:shadow-[7px_7px_14px_#0a0a0a,-7px_-7px_14px_#262626]">
        <h3 class="text-lg sm:text-xl font-semibold mb-3
                   bg-clip-text text-transparent bg-gradient-to-r from-teal-500 to-cyan-500
                   dark:from-teal-300 dark:to-cyan-300">
          Buy Homes
        </h3>
        <ul class="text-center space-y-2 text-gray-700 dark:text-gray-300">
          <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400 text-sm sm:text-base">Houses for Sale</a></li>
          <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400 text-sm sm:text-base">Condos & Apartments</a></li>
          <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400 text-sm sm:text-base">New Constructions</a></li>
          <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400 text-sm sm:text-base">Luxury Estates</a></li>
        </ul>
      </div>

      <!-- Category 2: Rent Homes -->
      <div class="p-5 rounded-2xl flex flex-col items-center justify-center
                  bg-gray-200 dark:bg-gray-800
                  shadow-[5px_5px_10px_#bebebe,-5px_-5px_10px_#ffffff]
                  dark:shadow-[5px_5px_10px_#0a0a0a,-5px_-5px_10px_#262626]
                  transform transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-[7px_7px_14px_#bebebe,-7px_-7px_14px_#ffffff]
                  dark:hover:shadow-[7px_7px_14px_#0a0a0a,-7px_-7px_14px_#262626]">
        <h3 class="text-lg sm:text-xl font-semibold mb-3
                   bg-clip-text text-transparent bg-gradient-to-r from-orange-500 to-yellow-500
                   dark:from-orange-300 dark:to-yellow-300">
          Rent Homes
        </h3>
        <ul class="text-center space-y-2 text-gray-700 dark:text-gray-300">
          <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400 text-sm sm:text-base">Houses for Rent</a></li>
          <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400 text-sm sm:text-base">Apartments for Rent</a></li>
          <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400 text-sm sm:text-base">Pet-Friendly Rentals</a></li>
          <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400 text-sm sm:text-base">Short-Term Rentals</a></li>
        </ul>
      </div>

      <!-- Category 3: Sell Your Home -->
      <div class="p-5 rounded-2xl flex flex-col items-center justify-center
                  bg-gray-200 dark:bg-gray-800
                  shadow-[5px_5px_10px_#bebebe,-5px_-5px_10px_#ffffff]
                  dark:shadow-[5px_5px_10px_#0a0a0a,-5px_-5px_10px_#262626]
                  transform transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-[7px_7px_14px_#bebebe,-7px_-7px_14px_#ffffff]
                  dark:hover:shadow-[7px_7px_14px_#0a0a0a,-7px_-7px_14px_#262626]">
        <h3 class="text-lg sm:text-xl font-semibold mb-3
                   bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-pink-500
                   dark:from-purple-300 dark:to-pink-300">
          Sell Your Home
        </h3>
        <ul class="text-center space-y-2 text-gray-700 dark:text-gray-300">
          <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400 text-sm sm:text-base">Get a Home Value</a></li>
          <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400 text-sm sm:text-base">Find an Agent</a></li>
          <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400 text-sm sm:text-base">Selling Process</a></li>
          <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400 text-sm sm:text-base">Listing Your Property</a></li>
        </ul>
      </div>
    </nav>

    <div class="mt-10 pt-6 border-t-2 border-gray-300 dark:border-gray-700
                flex flex-col sm:flex-row justify-between items-center text-center sm:text-left">
      <p class="text-gray-600 dark:text-gray-400 text-sm sm:text-base mb-4 sm:mb-0">© 2023 Real Estate Inc. All rights reserved.</p>
      <ul class="flex flex-wrap justify-center sm:justify-start space-x-4 sm:space-x-6 text-gray-700 dark:text-gray-300 text-sm sm:text-base">
        <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400">Privacy Policy</a></li>
        <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400">Terms of Service</a></li>
        <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400">Contact Us</a></li>
      </ul>
    </div>
  </div>
</div>

Session Timeout Alert Component - Neumorphism Candy

A responsive session timeout alert component with a neumorphism design style, using a candy/sweet color scheme. Features include dark mode support and a countdown timer for fashion/beauty brands.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-pink-100 dark:bg-gray-900 p-4 font-sans">
  <div class="w-full max-w-sm rounded-3xl shadow-xl p-8 bg-gradient-to-br from-pink-200 to-purple-200 dark:from-gray-700 dark:to-gray-800
              flex flex-col items-center justify-center
              transform transition-all duration-300 ease-in-out
              dark:border dark:border-gray-600
              shadow-[10px_10px_20px_#bebebe,-10px_-10px_20px_#ffffff] dark:shadow-[10px_10px_20px_#1a1a1a,-10px_-10px_20px_#333333]">

    <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-gradient-to-br from-pink-300 to-purple-300 dark:from-indigo-600 dark:to-purple-600
                shadow-lg transition-transform duration-300 ease-in-out transform scale-95 hover:scale-100
                shadow-[inset_5px_5px_10px_#9f7aea,inset_-5px_-5px_10px_#ff99d9] dark:shadow-[inset_5px_5px_10px_#5e34b7,inset_-5px_-5px_10px_#2c2c2c]">
      <svg class="w-10 h-10 text-white dark:text-gray-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.487 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
      </svg>
    </div>

    <h3 class="mt-6 mb-2 text-2xl font-bold text-pink-700 dark:text-pink-300 text-center">
      Session Timeout
    </h3>
    <p class="text-center text-gray-700 dark:text-gray-400 text-sm mb-6 max-w-xs">
      Your session is about to expire due to inactivity. Save your work or you will be logged out in:
    </p>

    <div class="relative w-36 h-12 rounded-full bg-gradient-to-br from-pink-300 to-purple-300 dark:from-gray-600 dark:to-gray-700
                shadow-[inset_5px_5px_10px_#9f7aea,inset_-5px_-5px_10px_#ff99d9] dark:shadow-[inset_5px_5px_10px_#4a4a4a,inset_-5px_-5px_10px_#2c2c2c]
                flex items-center justify-center mb-8 transition-all duration-300 ease-in-out">
      <span class="text-3xl font-extrabold text-white dark:text-white" id="countdown">00:59</span>
    </div>

    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 w-full justify-center">
      <button class="flex-1 py-3 px-6 rounded-3xl font-semibold
                     bg-gradient-to-br from-purple-400 to-indigo-500 dark:from-purple-700 dark:to-indigo-800
                     text-white shadow-md
                     hover:from-purple-500 hover:to-indigo-600 dark:hover:from-purple-800 dark:hover:to-indigo-900
                     active:shadow-inner active:from-purple-300 active:to-indigo-400 dark:active:from-purple-600 dark:active:to-indigo-700
                     transition-all duration-200 ease-in-out
                     shadow-[5px_5px_10px_#bebebe,-5px_-5px_10px_#ffffff] dark:shadow-[5px_5px_10px_#1a1a1a,-5px_-5px_10px_#333333]">
        Stay Logged In
      </button>
      <button class="flex-1 py-3 px-6 rounded-3xl font-semibold
                     bg-gradient-to-br from-pink-400 to-rose-500 dark:from-pink-700 dark:to-rose-800
                     text-white shadow-md
                     hover:from-pink-500 hover:to-rose-600 dark:hover:from-pink-800 dark:hover:to-rose-900
                     active:shadow-inner active:from-pink-300 active:to-rose-400 dark:active:from-pink-600 dark:active:to-rose-700
                     transition-all duration-200 ease-in-out
                     shadow-[5px_5px_10px_#bebebe,-5px_-5px_10px_#ffffff] dark:shadow-[5px_5px_10px_#1a1a1a,-5px_-5px_10px_#333333]">
        Log Out
      </button>
    </div>
  </div>
</div>

Cyberpunk_Real_Estate_Lightbox

A simple, responsive image lightbox component with cyberpunk-inspired muted color scheme, suitable for real estate property listings. Features dark mode support and uses semantic HTML.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-950 dark:bg-zinc-950 p-4 font-mono antialiased">
  <!-- Image Lightbox Component -->
  <div class="relative w-full max-w-lg mx-auto bg-gray-900 dark:bg-zinc-900 rounded-lg shadow-lg shadow-indigo-900/40 border border-purple-800 dark:border-indigo-800 overflow-hidden group">

    <!-- Main Image (Placeholder) -->
    <img src="https://picsum.photos/800/600?random=1" alt="Property Image" class="w-full h-80 object-cover object-center rounded-t-lg group-hover:opacity-75 transition-opacity duration-300">

    <!-- Overlay for Lightbox interaction -->
    <div class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 cursor-pointer" aria-hidden="true">
      <button type="button" class="text-purple-400 dark:text-indigo-400 text-3xl p-4 rounded-full bg-slate-900/60 hover:bg-slate-800/80 focus:outline-none focus:ring-2 focus:ring-purple-600 dark:focus:ring-indigo-600 transition-all duration-200">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
        </svg>
        <span class="sr-only">View Larger</span>
      </button>
    </div>

    <!-- Property Details (Minimal) -->
    <div class="p-4">
      <h3 class="text-xl font-semibold text-purple-300 dark:text-indigo-300 mb-2">Urban Loft 789</h3>
      <p class="text-sm text-gray-400 dark:text-zinc-400 mb-3">District A9, Neo-Kyoto City</p>

      <div class="flex items-center justify-between text-base text-purple-400 dark:text-indigo-400">
        <span class="flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1 text-purple-600 dark:text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.727A8 8 0 016.343 7.273L17.657 16.727zm0 0L22 21M7.273 6.343L2 2" />
          </svg>
          3 Beds
        </span>
        <span class="flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1 text-purple-600 dark:text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z" />
          </svg>
          2 Baths
        </span>
      </div>
    </div>
  </div>
</div>

1 ... 91 92 93 94 95 ... 335

Search Components

Categories

All Components