Search Components

All Components

Browse all available Tailwind CSS components

Chat Window Component

A complex, triadic-colored, and microinteraction-focused chat window component suitable for real estate platforms. It features a conversation list, an active chat area with message bubbles, and interactive input field, all fully responsive and with dark mode support.

Open Preview

                <div class="font-sans antialiased text-gray-900 bg-gray-100 dark:bg-gray-900 dark:text-gray-100 min-h-screen flex items-center justify-center p-4 sm:p-6 lg:p-8">
  <div class="relative w-full max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden md:flex flex-row-reverse transform transition-all duration-300 ease-in-out hover:shadow-2xl">

    <!-- Chat Details / Active Chat Area -->
    <div class="flex-1 flex flex-col h-[80vh] md:h-[calc(100vh-6rem)] lg:h-[calc(100vh-8rem)]">
      <!-- Chat Header -->
      <div class="flex items-center justify-between p-4 sm:p-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm">
        <div class="flex items-center space-x-3">
          <button class="md:hidden p-2 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-400 dark:focus:ring-offset-gray-800">
            <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="M15 19l-7-7 7-7"></path></svg>
          </button>
          <div class="relative">
            <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full object-cover border-2 border-green-400 dark:border-green-500" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Agent Name">
            <span class="absolute bottom-0 right-0 block w-3 h-3 bg-green-500 rounded-full ring-2 ring-white dark:ring-gray-800"></span>
          </div>
          <div>
            <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100">John Doe</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400">Online</p>
          </div>
        </div>
        <div class="flex space-x-3">
          <button class="p-2 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-400 dark:focus:ring-offset-gray-800 animate-pulse-once">
            <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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684L10.5 9l2.5-2.5-2.5-2.5m-3 3l2.5 2.5m-2.5 2.5L10.5 9m-2.5 2.5L10.5 9m4.5 4.5l-2.5 2.5-2.5-2.5m3-3l-2.5 2.5m-2.5-2.5l2.5-2.5-2.5-2.5m-3-3l2.5-2.5-2.5-2.5"></path></svg>
          </button>
          <button class="p-2 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 dark:focus:ring-offset-gray-800 animate-pulse-once">
            <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="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path></svg>
          </button>
        </div>
      </div>

      <!-- Chat Messages -->
      <div class="flex-1 p-4 sm:p-6 overflow-y-auto custom-scrollbar-thin space-y-4 bg-gray-50 dark:bg-gray-850">

        <!-- Agent Message -->
        <div class="flex items-end space-x-3 group animate-slide-in-left">
          <img class="w-8 h-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Agent Avatar">
          <div class="bg-green-100 dark:bg-green-700 p-3 rounded-tr-xl rounded-bl-xl rounded-br-xl max-w-sm lg:max-w-md text-gray-800 dark:text-gray-50 relative group-hover:scale-[1.02] transition-transform duration-150">
            <p class="text-sm">Hello! I'm John, your agent for the property at 123 Elm St. How can I assist you today?</p>
            <span class="block text-xs text-right text-gray-500 dark:text-gray-300 mt-1">10:00 AM</span>
            <div class="absolute hidden group-hover:flex bottom-1 -right-8 space-x-1.5 animation-fade-in-right">
              <button class="p-1 bg-gray-200 dark:bg-gray-700 rounded-full text-pink-500 hover:scale-110 transition-transform duration-100 drop-shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-400"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg></button>
              <button class="p-1 bg-gray-200 dark:bg-gray-700 rounded-full text-green-500 hover:scale-110 transition-transform duration-100 drop-shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-400"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18 9v3a2 2 0 01-2 2H8l-4 4V8c0-1.1.9-2 2-2h10a2 2 0 012 2zm-6-2H6v2h6V7zm4 4H6v2h10v-2z"></path></svg></button>
            </div>
          </div>
        </div>

        <!-- User Message -->
        <div class="flex items-end justify-end space-x-3 group animate-slide-in-right">
          <div class="bg-blue-500 dark:bg-blue-600 p-3 rounded-tl-xl rounded-bl-xl rounded-br-xl max-w-sm lg:max-w-md text-white relative group-hover:scale-[1.02] transition-transform duration-150">
            <p class="text-sm">Hi John! I'm interested in scheduling a virtual tour for that property. When are you available?</p>
            <span class="block text-xs text-right text-blue-100 dark:text-blue-200 mt-1">10:05 AM</span>
            <div class="absolute hidden group-hover:flex bottom-1 -left-8 space-x-1.5 animation-fade-in-left">
              <button class="p-1 bg-gray-200 dark:bg-gray-700 rounded-full text-pink-500 hover:scale-110 transition-transform duration-100 drop-shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-400"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg></button>
              <button class="p-1 bg-gray-200 dark:bg-gray-700 rounded-full text-green-500 hover:scale-110 transition-transform duration-100 drop-shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-400"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18 9v3a2 2 0 01-2 2H8l-4 4V8c0-1.1.9-2 2-2h10a2 2 0 012 2zm-6-2H6v2h6V7zm4 4H6v2h10v-2z"></path></svg></button>
            </div>
          </div>
          <img class="w-8 h-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
        </div>

        <!-- Agent Message with Property Card -->
        <div class="flex items-end space-x-3 group animate-slide-in-left">
          <img class="w-8 h-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Agent Avatar">
          <div class="bg-green-100 dark:bg-green-700 p-3 rounded-tr-xl rounded-bl-xl rounded-br-xl max-w-sm lg:max-w-md text-gray-800 dark:text-gray-50 relative group-hover:scale-[1.02] transition-transform duration-150">
            <p class="text-sm mb-2">Great! How about this Thursday at 2 PM PST? Also, here are some details about the property:</p>
            <!-- Property Card in Chat -->
            <div class="bg-white dark:bg-gray-900 rounded-lg overflow-hidden shadow-md border border-gray-200 dark:border-gray-700 flex flex-col sm:flex-row mb-2">
              <img src="https://picsum.photos/300/200?random=1" alt="Property Image" class="w-full sm:w-24 md:w-32 h-24 sm:h-auto object-cover">
              <div class="p-3 flex-1">
                <h4 class="font-semibold text-gray-900 dark:text-gray-100 text-base">Modern Family Home</h4>
                <p class="text-gray-600 dark:text-gray-300 text-sm">123 Elm St, Springfield</p>
                <p class="text-pink-600 dark:text-pink-400 text-base font-bold mt-1">$550,000</p>
                <button class="mt-2 text-blue-600 dark:text-blue-400 hover:underline text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 rounded-md transition-colors duration-200">View Details</button>
              </div>
            </div>
            <span class="block text-xs text-right text-gray-500 dark:text-gray-300 mt-1">10:08 AM</span>
            <div class="absolute hidden group-hover:flex bottom-1 -right-8 space-x-1.5 animation-fade-in-right">
              <button class="p-1 bg-gray-200 dark:bg-gray-700 rounded-full text-pink-500 hover:scale-110 transition-transform duration-100 drop-shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-400"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg></button>
              <button class="p-1 bg-gray-200 dark:bg-gray-700 rounded-full text-green-500 hover:scale-110 transition-transform duration-100 drop-shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-400"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18 9v3a2 2 0 01-2 2H8l-4 4V8c0-1.1.9-2 2-2h10a2 2 0 012 2zm-6-2H6v2h6V7zm4 4H6v2h10v-2z"></path></svg></button>
            </div>
          </div>
        </div>

        <!-- User Message with Confirmation -->
        <div class="flex items-end justify-end space-x-3 group animate-slide-in-right">
          <div class="bg-blue-500 dark:bg-blue-600 p-3 rounded-tl-xl rounded-bl-xl rounded-br-xl max-w-sm lg:max-w-md text-white relative group-hover:scale-[1.02] transition-transform duration-150">
            <p class="text-sm">Thursday at 2 PM works perfectly! Thank you for the property details.</p>
            <span class="block text-xs text-right text-blue-100 dark:text-blue-200 mt-1">10:10 AM</span>
            <div class="absolute hidden group-hover:flex bottom-1 -left-8 space-x-1.5 animation-fade-in-left">
              <button class="p-1 bg-gray-200 dark:bg-gray-700 rounded-full text-pink-500 hover:scale-110 transition-transform duration-100 drop-shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-400"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg></button>
              <button class="p-1 bg-gray-200 dark:bg-gray-700 rounded-full text-green-500 hover:scale-110 transition-transform duration-100 drop-shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-400"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18 9v3a2 2 0 01-2 2H8l-4 4V8c0-1.1.9-2 2-2h10a2 2 0 012 2zm-6-2H6v2h6V7zm4 4H6v2h10v-2z"></path></svg></button>
            </div>
          </div>
          <img class="w-8 h-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
        </div>

      </div>

      <!-- Chat Input -->
      <div class="p-4 sm:p-5 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 flex items-center space-x-3">
        <button class="p-2 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-400 dark:focus:ring-offset-gray-800 animate-jiggle">
          <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 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>
        </button>
        <input type="text" placeholder="Type your message..." class="flex-1 p-3 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 transition-all duration-200 ease-in-out focus:scale-[1.01] shadow-sm">
        <button class="p-3 bg-blue-500 text-white rounded-full hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 transition-all duration-200 ease-in-out transform hover:scale-105 active:scale-95 shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 dark:focus:ring-offset-gray-800 animate-pop-in">
          <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 5l7 7m0 0l-7 7m7-7H3"></path></svg>
        </button>
      </div>
    </div>

    <!-- Chat List / Sidebar -->
    <div class="hidden md:flex flex-col w-72 lg:w-80 border-r border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 flex-none h-[80vh] md:h-[calc(100vh-6rem)] lg:h-[calc(100vh-8rem)]">
      <!-- Search and New Chat -->
      <div class="p-4 sm:p-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
        <div class="relative">
          <input type="text" placeholder="Search chats..." class="w-full p-2 pl-10 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-500 transition-all duration-200 ease-in-out focus:scale-[1.01] shadow-sm">
          <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
        </div>
        <button class="mt-3 w-full bg-pink-500 text-white py-2 rounded-lg hover:bg-pink-600 dark:bg-pink-600 dark:hover:bg-pink-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-400 dark:focus:ring-offset-gray-800 transform active:scale-98 animate-button-pop">
          + New Chat
        </button>
      </div>

      <!-- Conversations List -->
      <div class="flex-1 overflow-y-auto custom-scrollbar-thin">
        <a href="#" class="flex items-center p-4 sm:p-5 space-x-3 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 relative group active:bg-blue-50 dark:active:bg-blue-900 border-l-4 border-l-blue-500 dark:border-l-blue-600 animate-fade-in-up">
          <img class="w-12 h-12 rounded-full object-cover border-2 border-transparent group-hover:border-blue-400 transition-colors duration-200" src="https://randomuser.me/api/portraits/men/45.jpg" alt="John Doe">
          <div class="flex-1">
            <h4 class="font-semibold text-gray-900 dark:text-gray-100">John Doe</h4>
            <p class="text-sm text-gray-600 dark:text-gray-400 truncate">Hi! How can I assist you today?</p>
          </div>
          <p class="text-xs text-gray-500 dark:text-gray-400">10:10 AM</p>
          <div class="absolute hidden group-hover:block right-4 top-1/2 -translate-y-1/2 transition-opacity duration-200 opacity-0 group-hover:opacity-100 animate-slide-in-right-sm">
            <span class="block w-2 h-2 bg-blue-500 dark:bg-blue-600 rounded-full"></span>
          </div>
        </a>

        <a href="#" class="flex items-center p-4 sm:p-5 space-x-3 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 group animate-fade-in-up animate-delay-100">
          <img class="w-12 h-12 rounded-full object-cover border-2 border-transparent group-hover:border-green-400 transition-colors duration-200" src="https://randomuser.me/api/portraits/women/24.jpg" alt="Jane Smith">
          <div class="flex-1">
            <h4 class="font-semibold text-gray-900 dark:text-gray-100">Jane Smith</h4>
            <p class="text-sm text-gray-600 dark:text-gray-400 truncate">About the property at 456 Oak Ave...</p>
          </div>
          <p class="text-xs text-gray-500 dark:text-gray-400">Yesterday</p>
        </a>

        <a href="#" class="flex items-center p-4 sm:p-5 space-x-3 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 animate-fade-in-up animate-delay-200">
          <img class="w-12 h-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/33.jpg" alt="Robert Johnson">
          <div class="flex-1">
            <h4 class="font-semibold text-gray-900 dark:text-gray-100">Robert Johnson</h4>
            <p class="text-sm text-gray-600 dark:text-gray-400 truncate">Can we reschedule the viewing?</p>
          </div>
          <p class="text-xs text-gray-500 dark:text-gray-400">Mon</p>
        </a>

        <a href="#" class="flex items-center p-4 sm:p-5 space-x-3 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 animate-fade-in-up animate-delay-300">
          <img class="w-12 h-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/77.jpg" alt="Emily White">
          <div class="flex-1">
            <h4 class="font-semibold text-gray-900 dark:text-gray-100">Emily White</h4>
            <p class="text-sm text-gray-600 dark:text-gray-400 truncate">Looking for apartments in downtown.</p>
          </div>
          <p class="text-xs text-gray-500 dark:text-gray-400">Last week</p>
        </a>

        <a href="#" class="flex items-center p-4 sm:p-5 space-x-3 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 animate-fade-in-up animate-delay-400">
          <img class="w-12 h-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/50.jpg" alt="Agent Name">
          <div class="flex-1">
            <h4 class="font-semibold text-gray-900 dark:text-gray-100">Michael Brown</h4>
            <p class="text-sm text-gray-600 dark:text-gray-400 truncate">New property listed near campus!</p>
          </div>
          <p class="text-xs text-gray-500 dark:text-gray-400">2 weeks ago</p>
        </a>
      </div>
    </div>

  </div>
</div>

<style>
  /* Custom scrollbar for better aesthetics */
  .custom-scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .custom-scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: rgb(156 163 175 / 0.5);
    border-radius: 3px;
  }

  .custom-scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background-color: rgb(156 163 175 / 0.7);
  }

  .custom-scrollbar-thin::-webkit-scrollbar-track {
    background-color: transparent;
  }

  /* Dark mode scrollbar */
  .dark .custom-scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: rgb(75 85 99 / 0.5);
  }

  .dark .custom-scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background-color: rgb(75 85 99 / 0.7);
  }

  /* Keyframe animations for microinteractions */
  @keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
  }

  @keyframes slideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
  }

  @keyframes slideInRightSm {
    from { opacity: 0; transform: translateX(-5px); }
    to { opacity: 1; transform: translateX(0); }
  }

  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes fadeItIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes pulseOnce {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
  }

  @keyframes jiggle {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
    75% { transform: rotate(-3deg); }
    100% { transform: rotate(0deg); }
  }

  @keyframes popIn {
    0% { transform: scale(0.8); opacity: 0;}
    100% { transform: scale(1); opacity: 1;}
  }

  @keyframes buttonPop {
    0% { transform: scale(1);}
    20% { transform: scale(1.02);}
    40% { transform: scale(0.98);}
    60% { transform: scale(1.01);}
    80% { transform: scale(0.99);}
    100% { transform: scale(1);}
  }

  /* Tailwind classes for animations */
  .animate-slide-in-left {
    animation: slideInLeft 0.3s ease-out;
    animation-fill-mode: backwards;
  }

  .animate-slide-in-right {
    animation: slideInRight 0.3s ease-out;
    animation-fill-mode: backwards;
  }

  .animate-slide-in-right-sm {
    animation: slideInRightSm 0.2s ease-out;
    animation-fill-mode: backwards;
  }

  .animate-fade-in-up {
    animation: fadeInUp 0.3s ease-out;
    animation-fill-mode: backwards;
  }

  .animate-delay-100 { animation-delay: 0.1s; }
  .animate-delay-200 { animation-delay: 0.2s; }
  .animate-delay-300 { animation-delay: 0.3s; }
  .animate-delay-400 { animation-delay: 0.4s; }

  .animation-fade-in-right {
    animation: fadeItIn 0.2s ease-out forwards, slideInRightSm 0.2s ease-out forwards;
    animation-delay: 0.1s; /* Slight delay after hover */
  }

  .animation-fade-in-left {
    animation: fadeItIn 0.2s ease-out forwards, slideInLeftSm 0.2s ease-out forwards;
    animation-delay: 0.1s; /* Slight delay after hover */
  }

  .animate-pulse-once {
    animation: pulseOnce 0.6s ease-in-out;
  }

  .animate-jiggle {
    animation: jiggle 0.4s ease-in-out;
  }

  .animate-pop-in {
    animation: popIn 0.3s ease-out;
  }

  .animate-button-pop {
    animation: buttonPop 0.5s ease-in-out;
  }

  /* Microinteraction for hover state on chat bubbles */
  .group:hover .group-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }

</style>

Monospace Forest Rating System Component

A clean, code-inspired rating system component with a forest green palette, suitable for portfolios. Features interactive stars for rating and displays average ratings, fully responsive with dark mode support.

Open Preview

                <div class="font-mono bg-green-50 text-green-900 min-h-screen p-4 sm:p-8 md:p-12 dark:bg-gray-900 dark:text-green-200 transition-colors duration-300">
  <div class="max-w-4xl mx-auto bg-green-100 dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden border border-green-300 dark:border-green-700">
    <div class="p-6 sm:p-8 lg:p-10 border-b border-green-200 dark:border-gray-700">
      <h2 class="text-2xl sm:text-3xl font-bold text-green-800 dark:text-green-300 mb-2 code-line-prefix ">
        <span class="text-green-600 dark:text-emerald-500">$</span> product_rating_system<span class="text-green-600 dark:text-emerald-500">()</span>
      </h2>
      <p class="text-green-700 dark:text-green-400 text-sm sm:text-base mb-4 code-line-prefix ">
        <span class="text-green-600 dark:text-emerald-600">></span> Evaluate product satisfaction based on user feedback.
      </p>

      <div class="flex flex-col sm:flex-row items-center justify-between py-4 border-t border-b border-green-200 dark:border-gray-700">
        <div class="mb-4 sm:mb-0">
          <p class="text-lg font-semibold text-green-800 dark:text-green-300 code-line-prefix ">
            <span class="text-green-600 dark:text-emerald-500">avg_rating:</span> <span class="text-xl">4.7</span> / <span class="text-sm">5.0</span>
          </p>
          <div class="flex items-center text-green-600 dark:text-emerald-500 mt-1">
            <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-6 h-6 fill-current text-green-300 dark:text-gray-600" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <span class="ml-2 text-green-700 dark:text-green-400 text-sm">(<span class="font-bold">128</span> ratings)</span>
          </div>
        </div>

        <div class="flex flex-col items-center">
          <p class="text-lg font-semibold text-green-800 dark:text-green-300 mb-2 code-line-prefix ">
            <span class="text-green-600 dark:text-emerald-500">$</span> submit_rating<span class="text-green-600 dark:text-emerald-500">()</span>
          </p>
          <div class="flex text-green-400 dark:text-gray-500 space-x-1">
            <button class="star-button focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-green-100 p-1 rounded-sm transition-colors duration-200 hover:text-emerald-500 dark:hover:text-emerald-400" aria-label="1 star">
              <svg class="w-8 h-8 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            </button>
            <button class="star-button focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-green-100 p-1 rounded-sm transition-colors duration-200 hover:text-emerald-500 dark:hover:text-emerald-400" aria-label="2 stars">
              <svg class="w-8 h-8 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            </button>
            <button class="star-button focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-green-100 p-1 rounded-sm transition-colors duration-200 hover:text-emerald-500 dark:hover:text-emerald-400" aria-label="3 stars">
              <svg class="w-8 h-8 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            </button>
            <button class="star-button focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-green-100 p-1 rounded-sm transition-colors duration-200 hover:text-emerald-500 dark:hover:text-emerald-400" aria-label="4 stars">
              <svg class="w-8 h-8 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            </button>
            <button class="star-button focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-green-100 p-1 rounded-sm transition-colors duration-200 hover:text-emerald-500 dark:hover:text-emerald-400" aria-label="5 stars">
              <svg class="w-8 h-8 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="p-6 sm:p-8 lg:p-10">
      <h3 class="text-xl sm:text-2xl font-bold text-green-800 dark:text-green-300 mb-4 code-line-prefix ">
        <span class="text-green-600 dark:text-emerald-500">$</span> recent_reviews<span class="text-green-600 dark:text-emerald-500">()</span>
      </h3>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- Review 1 -->
        <article class="bg-green-50 dark:bg-gray-700 p-5 rounded-lg border border-green-200 dark:border-gray-600 code-block">
          <div class="flex items-center mb-3">
            <img class="w-10 h-10 rounded-full mr-3 border-2 border-green-400 dark:border-emerald-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
              <p class="font-semibold text-green-800 dark:text-green-300">[email protected]</p>
              <p class="text-green-600 dark:text-green-400 text-sm">2 days ago</p>
            </div>
          </div>
          <div class="flex text-green-600 dark:text-emerald-500 mb-2">
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
          </div>
          <p class="text-green-700 dark:text-green-400 leading-relaxed text-sm">"Absolutely stellar! This product exceeded all my expectations. The performance is top-notch and the design is incredibly intuitive. Highly recommend!"</p>
        </article>

        <!-- Review 2 -->
        <article class="bg-green-50 dark:bg-gray-700 p-5 rounded-lg border border-green-200 dark:border-gray-600 code-block">
          <div class="flex items-center mb-3">
            <img class="w-10 h-10 rounded-full mr-3 border-2 border-green-400 dark:border-emerald-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
            <div>
              <p class="font-semibold text-green-800 dark:text-green-300">[email protected]</p>
              <p class="text-green-600 dark:text-green-400 text-sm">1 week ago</p>
            </div>
          </div>
          <div class="flex text-green-600 dark:text-emerald-500 mb-2">
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current text-green-300 dark:text-gray-600" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
          </div>
          <p class="text-green-700 dark:text-green-400 leading-relaxed text-sm">"Solid product for the price. It does exactly what it promises. One small suggestion: a bit more documentation could be helpful."</p>
        </article>

        <!-- Review 3 -->
        <article class="bg-green-50 dark:bg-gray-700 p-5 rounded-lg border border-green-200 dark:border-gray-600 code-block">
          <div class="flex items-center mb-3">
            <img class="w-10 h-10 rounded-full mr-3 border-2 border-green-400 dark:border-emerald-600" src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar">
            <div>
              <p class="font-semibold text-green-800 dark:text-green-300">[email protected]</p>
              <p class="text-green-600 dark:text-green-400 text-sm">3 weeks ago</p>
            </div>
          </div>
          <div class="flex text-green-600 dark:text-emerald-500 mb-2">
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current text-green-300 dark:text-gray-600" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
          </div>
          <p class="text-green-700 dark:text-green-400 leading-relaxed text-sm">"Integration was easier than expected. Great tool for data visualization! Some minor bugs, but nothing that breaks the workflow."</p>
        </article>

        <!-- Review 4 -->
        <article class="bg-green-50 dark:bg-gray-700 p-5 rounded-lg border border-green-200 dark:border-gray-600 code-block">
          <div class="flex items-center mb-3">
            <img class="w-10 h-10 rounded-full mr-3 border-2 border-green-400 dark:border-emerald-600" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
            <div>
              <p class="font-semibold text-green-800 dark:text-green-300">[email protected]</p>
              <p class="text-green-600 dark:text-green-400 text-sm">1 month ago</p>
            </div>
          </div>
          <div class="flex text-green-600 dark:text-emerald-500 mb-2">
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
          </div>
          <p class="text-green-700 dark:text-green-400 leading-relaxed text-sm">"A game changer for my workflow! The features are incredibly robust and the support has been fantastic. Can't recommend enough."</p>
        </article>
      </div>
    </div>
  </div>
</div>

<style>
  /* This is for the 'code-line-prefix' which creates the > or $ symbol */
  .code-line-prefix::before {
      content: ' ';
      display: inline-block;
      margin-right: 0.5em;
  }
  .code-line-prefix:not(.code-block) > span:first-child::before {
      content: ''; /* Remove prefix if it's explicitly the first span for styling it green */
      margin-right: 0;
  }

  h2.code-line-prefix::before, h3.code-line-prefix::before {
      content: '$';
      color: var(--tw-color-green-600);
  }

  .dark h2.code-line-prefix::before, .dark h3.code-line-prefix::before {
    color: var(--tw-color-emerald-500);
  }

  p.code-line-prefix::before {
      content: '>';
      color: var(--tw-color-green-600);
  }

  .dark p.code-line-prefix::before {
    color: var(--tw-color-emerald-600);
  }

  /* Simulate interactive star hover/focus for submit rating */
  .star-button:focus svg,
  .star-button:hover svg {
    color: var(--tw-color-emerald-500); /* Applies to light theme */
  }

  .dark .star-button:focus svg,
  .dark .star-button:hover svg {
    color: var(--tw-color-emerald-400); /* Applies to dark theme */
  }

  /* Example of how to 'fill' stars, would typically be done with JS but for static HTML, we use class based */
  .star-button:nth-child(1):hover ~ .star-button,
  .star-button:nth-child(2):hover ~ .star-button:nth-child(3),
  .star-button:nth-child(2):hover ~ .star-button:nth-child(4),
  .star-button:nth-child(2):hover ~ .star-button:nth-child(5),
  .star-button:nth-child(3):hover ~ .star-button:nth-child(4),
  .star-button:nth-child(3):hover ~ .star-button:nth-child(5),
  .star-button:nth-child(4):hover ~ .star-button:nth-child(5) {
      color: initial; /* Reset color for non-hovered stars */
  }

  .star-button:hover > svg,
  .star-button:hover ~ .star-button svg {
      color: inherit; /* Stars before the hovered one */
  }
  .star-button:hover + .star-button > svg {
       color: initial;
  }

</style>

Healthcare Sidebar Component

A complex, minimalist, and responsive sidebar component for healthcare applications, featuring an analogous color scheme and dark mode support. Includes navigation, user profile, and quick links.

Open Preview

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200">
  <!-- Sidebar -->
  <div class="flex flex-col w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 shadow-lg transition-all duration-300 ease-in-out md:translate-x-0" id="sidebar">
    <!-- Sidebar Header -->
    <div class="flex items-center justify-between h-16 px-4 border-b border-gray-200 dark:border-gray-700">
      <a href="#" class="flex items-center space-x-2">
        <svg class="h-8 w-8 text-indigo-600 dark:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
        </svg>
        <span class="text-xl font-semibold text-gray-900 dark:text-white">MedPanel</span>
      </a>
      <!-- Mobile menu button - hidden on desktop -->
      <button type="button" class="md:hidden text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 rounded" aria-controls="sidebar" aria-expanded="false" onclick="document.getElementById('sidebar').classList.toggle('translate-x-0'); document.getElementById('sidebar').classList.toggle('-translate-x-full');">
        <span class="sr-only">Open sidebar</span>
        <svg class="h-6 w-6" 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="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>
    </div>

    <!-- User Profile -->
    <div class="flex items-center p-4 border-b border-gray-200 dark:border-gray-700">
      <img class="h-12 w-12 rounded-full ring-2 ring-indigo-500 dark:ring-indigo-400" src="https://randomuser.me/api/portraits/women/6.jpg" alt="User avatar">
      <div class="ml-3">
        <p class="text-lg font-medium text-gray-900 dark:text-white">Dr. Elena Smith</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">Cardiologist</p>
      </div>
    </div>

    <!-- Main Navigation -->
    <nav class="flex-1 px-2 py-4 space-y-1 overflow-y-auto">
      <a href="#" class="flex items-center p-3 rounded-lg text-indigo-700 dark:text-indigo-300 bg-indigo-100 dark:bg-indigo-700/30 font-semibold hover:bg-indigo-100 dark:hover:bg-indigo-700/50 group transition-colors duration-200">
        <svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-6-6v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
        </svg>
        <span>Dashboard</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 group transition-colors duration-200">
        <svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <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" />
        </svg>
        <span>Patients</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 group transition-colors duration-200">
        <svg class="h-6 w-6 mr-3" 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 2zm7-9v5m-5-5h5m-5 0h.01M12 12c-1.104 0-2 .896-2 2s.896 2 2 2 2-.896 2-2-.896-2-2-2z" />
        </svg>
        <span>Appointments</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 group transition-colors duration-200">
        <svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
        </svg>
        <span>Records</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 group transition-colors duration-200">
        <svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M10 14v10m-2-5a2 2 0 002 2h4a2 2 0 002-2m-2 0V11m0 0h2m-2 0H8m6 0h2m-2 0v5m4-5v5M7 7h.01M17 7h.01" />
        </svg>
        <span>Analytics</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 group transition-colors duration-200">
        <svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
        </svg>
        <span>Messages <span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">3</span></span>
      </a>
    </nav>

    <!-- Quick Links / Settings -->
    <div class="mt-auto px-2 py-4 border-t border-gray-200 dark:border-gray-700">
      <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 group transition-colors duration-200">
        <svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <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-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
        </svg>
        <span>Settings</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 group transition-colors duration-200">
        <svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
        </svg>
        <span>Logout</span>
      </a>
    </div>
  </div>

  <!-- Main Content Area (dummy content for layout) -->
  <main class="flex-1 p-6 md:p-8 overflow-y-auto">
    <h1 class="text-3xl font-bold mb-6 text-gray-900 dark:text-white">Dashboard Overview</h1>
    <p class="text-gray-700 dark:text-gray-300">Welcome to your healthcare management system. Use the sidebar to navigate through different sections.</p>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
        <h2 class="text-xl font-semibold mb-3 text-gray-900 dark:text-white">Upcoming Appointments</h2>
        <p class="text-gray-700 dark:text-gray-300">Dr. John Doe - Cardiology, Today 10:00 AM</p>
        <p class="text-gray-700 dark:text-gray-300">Ms. Jane Smith - Pediatrics, Tomorrow 02:30 PM</p>
        <a href="#" class="mt-4 inline-block text-indigo-600 dark:text-indigo-400 hover:underline">View all</a>
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
        <h2 class="text-xl font-semibold mb-3 text-gray-900 dark:text-white">Recent Patients</h2>
        <ul class="list-disc list-inside text-gray-700 dark:text-gray-300">
          <li>Patient ID: P2023001 - <span class="font-medium">Sarah Connor</span></li>
          <li>Patient ID: P2023002 - <span class="font-medium">Kyle Reese</span></li>
        </ul>
        <a href="#" class="mt-4 inline-block text-indigo-600 dark:text-indigo-400 hover:underline">View all</a>
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
        <h2 class="text-xl font-semibold mb-3 text-gray-900 dark:text-white">Pending Tasks</h2>
        <p class="text-gray-700 dark:text-gray-300">Review lab results for Patient P2023001</p>
        <p class="text-gray-700 dark:text-gray-300">Update medication for Patient P2023002</p>
        <a href="#" class="mt-4 inline-block text-indigo-600 dark:text-indigo-400 hover:underline">View all</a>
      </div>
    </div>
  </main>

  <!-- Overlay for mobile sidebar -->
  <div class="fixed inset-0 bg-gray-900 bg-opacity-50 z-40 md:hidden -translate-x-full transition-opacity duration-300 ease-in-out" id="sidebar-overlay" onclick="document.getElementById('sidebar').classList.toggle('translate-x-0'); document.getElementById('sidebar').classList.toggle('-translate-x-full'); document.getElementById('sidebar-overlay').classList.toggle('opacity-100'); document.getElementById('sidebar-overlay').classList.toggle('-translate-x-full');"></div>

  <script>
    // This small script is for handling the mobile sidebar open/close functionality.
    // In a real application, you'd likely use a framework or more robust JS.
    const sidebar = document.getElementById('sidebar');
    const sidebarToggleButton = document.querySelector('button[aria-controls="sidebar"]');
    const sidebarOverlay = document.getElementById('sidebar-overlay');

    sidebarToggleButton.addEventListener('click', () => {
      sidebar.classList.toggle('-translate-x-full');
      sidebarOverlay.classList.toggle('-translate-x-full');
    });

    sidebarOverlay.addEventListener('click', () => {
      sidebar.classList.add('-translate-x-full');
      sidebarOverlay.classList.add('-translate-x-full');
    });
  </script>
</div>

ArtDecoPhotographyMegaMenu

A simple, responsive mega menu component designed in an Art Deco style with jewel tones, suitable for photography portfolios. Includes dark mode support.

Open Preview

                <nav class="bg-emerald-800 dark:bg-gray-900 shadow-lg font-serif">
  <div class="container mx-auto px-4 py-2 flex justify-between items-center">
    <a href="#" class="text-ruby-300 dark:text-emerald-300 text-2xl font-bold tracking-wider uppercase transform skew-x-[-10deg]">
      <span class="block -skew-x-[10deg]">Reflections</span>
    </a>
    
    <!-- Mobile Menu Button -->
    <button id="menu-button" class="md:hidden text-emerald-100 dark:text-emerald-100 focus:outline-none">
      <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
      </svg>
    </button>

    <!-- Mega Menu - Desktop and Hidden Mobile -->
    <div id="mega-menu" class="hidden md:flex flex-col md:flex-row md:space-x-8 mt-4 md:mt-0">
      <div class="relative group">
        <button class="peer py-2 px-3 text-emerald-100 dark:text-emerald-100 hover:text-white dark:hover:text-white transition duration-300 focus:outline-none text-lg tracking-wide">Galleries</button>
        <div class="absolute hidden peer-hover:block hover:block w-48 md:w-96 lg:w-3/4 max-w-lg bg-emerald-700 dark:bg-gray-800 shadow-xl transition-all duration-300 ease-in-out transform scale-y-0 origin-top group-hover:scale-y-100 rounded-md py-4 mt-2 z-10">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 px-4">
            <div>
              <h3 class="text-sapphire-300 dark:text-sapphire-300 text-sm uppercase mb-2">Collections</h3>
              <a href="#" class="block px-3 py-1 text-emerald-100 dark:text-emerald-100 hover:bg-emerald-600 dark:hover:bg-gray-700 rounded-sm text-base">Portraits</a>
              <a href="#" class="block px-3 py-1 text-emerald-100 dark:text-emerald-100 hover:bg-emerald-600 dark:hover:bg-gray-700 rounded-sm text-base">Landscapes</a>
              <a href="#" class="block px-3 py-1 text-emerald-100 dark:text-emerald-100 hover:bg-emerald-600 dark:hover:bg-gray-700 rounded-sm text-base">Abstract</a>
              <a href="#" class="block px-3 py-1 text-emerald-100 dark:text-emerald-100 hover:bg-emerald-600 dark:hover:bg-gray-700 rounded-sm text-base">Candid</a>
            </div>
            <div>
              <h3 class="text-sapphire-300 dark:text-sapphire-300 text-sm uppercase mb-2">Featured Work</h3>
              <div class="mb-2"><img src="https://picsum.photos/150/100?random=1" alt="Featured Image 1" class="w-full h-auto rounded-sm"></div>
              <div class="mb-2"><img src="https://picsum.photos/150/100?random=2" alt="Featured Image 2" class="w-full h-auto rounded-sm"></div>
            </div>
          </div>
        </div>
      </div>

      <a href="#" class="py-2 px-3 text-emerald-100 dark:text-emerald-100 hover:text-white dark:hover:text-white transition duration-300 text-lg tracking-wide">Services</a>
      <a href="#" class="py-2 px-3 text-emerald-100 dark:text-emerald-100 hover:text-white dark:hover:text-white transition duration-300 text-lg tracking-wide">About</a>
      <a href="#" class="py-2 px-3 text-emerald-100 dark:text-emerald-100 hover:text-white dark:hover:text-white transition duration-300 text-lg tracking-wide">Contact</a>
    </div>
  </div>
</nav>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const menuButton = document.getElementById('menu-button');
    const megaMenu = document.getElementById('mega-menu');

    menuButton.addEventListener('click', function() {
      megaMenu.classList.toggle('hidden');
      megaMenu.classList.toggle('flex');
      megaMenu.classList.toggle('flex-col');
    });
  });
</script>

Retro_Vintage_Corporate_Blue_Breadcrumb_Navigation

A simple, responsive breadcrumb navigation component with a retro/vintage aesthetic, using corporate blue tones, designed for educational platforms. Includes dark mode support.

Open Preview

                <nav class="flex" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse font-sans">
    <li class="inline-flex items-center">
      <a href="#" class="inline-flex items-center text-sm font-medium text-blue-700 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200 uppercase tracking-widest">
        <svg class="w-3 h-3 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
          <path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"/>
        </svg>
        Home
      </a>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="rtl:rotate-180 w-3 h-3 text-blue-600 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
        </svg>
        <a href="#" class="ms-1 text-sm font-medium text-blue-700 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200 uppercase tracking-widest">Courses</a>
      </div>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <svg class="rtl:rotate-180 w-3 h-3 text-blue-600 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
        </svg>
        <span class="ms-1 text-sm font-medium text-blue-500 dark:text-blue-500 uppercase tracking-widest">Lesson 1</span>
      </div>
    </li>
  </ol>
</nav>

Product Comparison Component - Crypto

A responsive product comparison component with a luxury/premium design, candy/sweet color scheme, tailored for cryptocurrency/blockchain applications. Features dark mode support, elegant typography, and placeholder data.

Open Preview

                <div class="font-sans bg-gradient-to-br from-pink-50 to-purple-50 dark:from-gray-900 dark:to-gray-800 text-gray-800 dark:text-gray-200 p-4 md:p-8 lg:p-12 min-h-screen">
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-850 shadow-xl rounded-2xl overflow-hidden animate-fade-in">
    <header class="p-6 md:p-8 bg-gradient-to-r from-pink-400 to-purple-400 dark:from-gray-700 dark:to-gray-900 text-white dark:text-gray-100 text-center">
      <h1 class="text-3xl md:text-4xl lg:text-5xl font-extrabold tracking-tight mb-2">
        Choose Your Crypto Platform
      </h1>
      <p class="text-lg md:text-xl opacity-90">
        Compare features to find your perfect blockchain solution.
      </p>
    </header>

    <div class="relative overflow-x-auto">
      <table class="w-full table-auto border-separate border-spacing-y-2 lg:border-spacing-y-4 p-4">
        <thead class="sr-only lg:not-sr-only">
          <tr>
            <th class="w-1/4 p-4 text-left text-lg font-semibold text-gray-600 dark:text-gray-300"></th>
            <th class="w-1/4 p-4 text-center text-lg font-semibold text-gray-600 dark:text-gray-300">Platform Alpha</th>
            <th class="w-1/4 p-4 text-center text-lg font-semibold text-gray-600 dark:text-gray-300">Platform Beta</th>
            <th class="w-1/4 p-4 text-center text-lg font-semibold text-gray-600 dark:text-gray-300">Platform Gamma</th>
          </tr>
        </thead>
        <tbody>
          <!-- Product Headers for Mobile/Tablet -->
          <tr class="lg:hidden">
            <td class="py-4 px-2 sm:px-4 lg:px-6 w-full flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4">
              <div class="flex-1">
                <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Platform Alpha</h3>
                <img src="https://picsum.photos/300/200?random=1" alt="Platform Alpha Logo" class="w-full max-w-xs mx-auto rounded-lg shadow-md mb-2">
                <p class="text-gray-600 dark:text-gray-400 text-sm italic">A leading-edge blockchain for DeFi.</p>
              </div>
              <div class="flex-1">
                <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Platform Beta</h3>
                <img src="https://picsum.photos/300/200?random=2" alt="Platform Beta Logo" class="w-full max-w-xs mx-auto rounded-lg shadow-md mb-2">
                <p class="text-gray-600 dark:text-gray-400 text-sm italic">Scalable enterprise-grade blockchain.</p>
              </div>
              <div class="flex-1">
                <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Platform Gamma</h3>
                <img src="https://picsum.photos/300/200?random=3" alt="Platform Gamma Logo" class="w-full max-w-xs mx-auto rounded-lg shadow-md mb-2">
                <p class="text-gray-600 dark:text-gray-400 text-sm italic">NFTs and digital asset powerhouse.</p>
              </div>
            </td>
          </tr>

          <!-- Product Details Row (Desktop) -->
          <tr class="hidden lg:table-row">
            <td class="py-4 px-6 text-gray-600 dark:text-gray-300 font-medium align-top"></td>
            <td class="py-4 px-6 text-center align-top">
              <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Platform Alpha</h3>
              <img src="https://picsum.photos/300/200?random=1" alt="Platform Alpha Logo" class="w-48 h-32 object-cover mx-auto rounded-lg shadow-md mb-2">
              <p class="text-gray-600 dark:text-gray-400 text-sm italic">A leading-edge blockchain for DeFi.</p>
            </td>
            <td class="py-4 px-6 text-center align-top">
              <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Platform Beta</h3>
              <img src="https://picsum.photos/300/200?random=2" alt="Platform Beta Logo" class="w-48 h-32 object-cover mx-auto rounded-lg shadow-md mb-2">
              <p class="text-gray-600 dark:text-gray-400 text-sm italic">Scalable enterprise-grade blockchain.</p>
            </td>
            <td class="py-4 px-6 text-center align-top">
              <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Platform Gamma</h3>
              <img src="https://picsum.photos/300/200?random=3" alt="Platform Gamma Logo" class="w-48 h-32 object-cover mx-auto rounded-lg shadow-md mb-2">
              <p class="text-gray-600 dark:text-gray-400 text-sm italic">NFTs and digital asset powerhouse.</p>
            </td>
          </tr>

          <!-- Feature Row: Consensus Mechanism -->
          <tr class="bg-white dark:bg-gray-850 rounded-xl shadow-sm">
            <td class="py-4 px-4 sm:px-6 text-gray-600 dark:text-gray-300 font-medium border-l-4 border-pink-300 dark:border-pink-600 rounded-l-xl">Consensus Mechanism</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle font-semibold text-pink-500 dark:text-pink-400">PoS (Proof of Stake)</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle font-semibold text-purple-500 dark:text-purple-400">DPoS (Delegated PoS)</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle font-semibold text-green-500 dark:text-green-400">PoW (Proof of Work)</td>
          </tr>

          <!-- Feature Row: Transaction Speed -->
          <tr class="bg-white dark:bg-gray-850 rounded-xl shadow-sm">
            <td class="py-4 px-4 sm:px-6 text-gray-600 dark:text-gray-300 font-medium border-l-4 border-purple-300 dark:border-purple-600 rounded-l-xl">Tx Speed (TPS)</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200">5,000+</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200">100,000+</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200">7-10</td>
          </tr>

          <!-- Feature Row: Transaction Fees (Avg) -->
          <tr class="bg-white dark:bg-gray-850 rounded-xl shadow-sm">
            <td class="py-4 px-4 sm:px-6 text-gray-600 dark:text-gray-300 font-medium border-l-4 border-green-300 dark:border-green-600 rounded-l-xl">Avg. Tx Fee</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-green-600 dark:text-green-300 font-semibold">$0.01 - $0.10</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-green-600 dark:text-green-300 font-semibold">&lt; $0.01</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-orange-600 dark:text-orange-300 font-semibold">$1 - $50 (volatile)</td>
          </tr>

          <!-- Feature Row: Smart Contract Support -->
          <tr class="bg-white dark:bg-gray-850 rounded-xl shadow-sm">
            <td class="py-4 px-4 sm:px-6 text-gray-600 dark:text-gray-300 font-medium border-l-4 border-pink-300 dark:border-pink-600 rounded-l-xl">Smart Contracts</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
            </td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
            </td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle">
              <svg class="w-6 h-6 text-red-500 mx-auto" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path></svg>
            </td>
          </tr>

          <!-- Feature Row: Decentralization Level -->
          <tr class="bg-white dark:bg-gray-850 rounded-xl shadow-sm">
            <td class="py-4 px-4 sm:px-6 text-gray-600 dark:text-gray-300 font-medium border-l-4 border-purple-300 dark:border-purple-600 rounded-l-xl">Decentralization</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200">High</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200">Medium-High</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200">Very High</td>
          </tr>

          <!-- Feature Row: Typical Use Cases -->
          <tr class="bg-white dark:bg-gray-850 rounded-xl shadow-sm">
            <td class="py-4 px-4 sm:px-6 text-gray-600 dark:text-gray-300 font-medium border-l-4 border-green-300 dark:border-green-600 rounded-l-xl">Use Cases</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200 text-sm">DeFi, Dapps, GameFi</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200 text-sm">Enterprise, CBDC, Supply Chain</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200 text-sm">Store of Value, NFTs, Payments</td>
          </tr>

          <!-- Call to Action Row -->
          <tr class="bg-gradient-to-r from-pink-50 dark:from-gray-700 via-purple-50 dark:via-gray-800 to-green-50 dark:to-gray-900 rounded-xl">
            <td class="py-4 px-4 sm:px-6 text-gray-600 dark:text-gray-300 font-medium align-middle">Get Started</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle">
              <button class="w-full max-w-[150px] mx-auto bg-pink-500 hover:bg-pink-600 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105 shadow-md">
                Visit Alpha
              </button>
            </td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle">
              <button class="w-full max-w-[150px] mx-auto bg-purple-500 hover:bg-purple-600 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105 shadow-md">
                Visit Beta
              </button>
            </td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle">
              <button class="w-full max-w-[150px] mx-auto bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105 shadow-md">
                Visit Gamma
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <footer class="p-6 md:p-8 bg-gradient-to-l from-pink-400 to-purple-400 dark:from-gray-900 dark:to-gray-700 text-white dark:text-gray-100 text-center">
      <p class="text-sm opacity-80">&copy; 2023 Crypto Compare. All rights reserved.</p>
      <p class="text-xs mt-1 opacity-70">Data for illustrative purposes only. Consult official sources.</p>
    </footer>
  </div>
</div>

Error Messages Component - Dating/Social - Dark Sepia

A complex error message component designed for dating/social platforms, featuring a dark sepia color scheme, full responsiveness, and dark mode support to reduce eye strain.

Open Preview

                <div class="min-h-screen bg-stone-900 dark:bg-stone-950 flex items-center justify-center p-4 sm:p-6 lg:p-8 font-sans transition-colors duration-300">
  <div class="relative w-full max-w-2xl bg-stone-800 dark:bg-stone-900 rounded-3xl shadow-2xl p-6 sm:p-8 lg:p-10 border border-stone-700 dark:border-stone-800 transform transition-all duration-300 hover:shadow-stone-700/50 hover:-translate-y-1">
    <div class="absolute top-0 right-0 -mr-3 -mt-3 w-10 h-10 bg-red-800 rounded-full flex items-center justify-center text-white text-xl font-bold border-2 border-stone-700 dark:border-stone-800 shadow-lg">
      !
    </div>

    <div class="text-center mb-6 sm:mb-8 lg:mb-10">
      <svg class="mx-auto h-16 w-16 text-red-600 dark:text-red-700 mb-4 animate-bounce-slow" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
      </svg>
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-red-500 dark:text-red-600 mb-2 sm:mb-3 leading-tight tracking-tight drop-shadow-lg">
        Connection Lost!
      </h2>
      <p class="text-base sm:text-lg text-stone-300 dark:text-stone-400 leading-relaxed">
        It seems we've encountered an unexpected hiccup. Don't worry, even Cupid has bad days.
      </p>
    </div>

    <div class="space-y-4 sm:space-y-5 mb-6 sm:mb-8 lg:mb-10">
      <div class="bg-stone-700 dark:bg-stone-800 p-4 rounded-xl flex items-start space-x-3 anim-fade-in anim-delay-100">
        <svg class="h-6 w-6 text-yellow-400 dark:text-yellow-500 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <div>
          <h3 class="text-lg font-semibold text-stone-100 dark:text-stone-200">Account Synchronization Error</h3>
          <p class="text-sm text-stone-400 dark:text-stone-500">Your profile could not be fully loaded. Some features might be temporarily unavailable.</p>
        </div>
      </div>

      <div class="bg-stone-700 dark:bg-stone-800 p-4 rounded-xl flex items-start space-x-3 anim-fade-in anim-delay-200">
        <svg class="h-6 w-6 text-orange-400 dark:text-orange-500 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
        <div>
          <h3 class="text-lg font-semibold text-stone-100 dark:text-stone-200">Failed to Fetch Matches</h3>
          <p class="text-sm text-stone-400 dark:text-stone-500">We're having trouble fetching new matches right now. Please try again in a few moments.</p>
        </div>
      </div>

      <div class="bg-stone-700 dark:bg-stone-800 p-4 rounded-xl flex items-start space-x-3 anim-fade-in anim-delay-300">
        <svg class="h-6 w-6 text-rose-400 dark:text-rose-500 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
        </svg>
        <div>
          <h3 class="text-lg font-semibold text-stone-100 dark:text-stone-200">Messaging Service Offline</h3>
          <p class="text-sm text-stone-400 dark:text-stone-500">Messages may not be sent or received at this time. We're working to restore service.</p>
        </div>
      </div>
    </div>

    <div class="flex flex-col sm:flex-row gap-4 justify-center">
      <button class="w-full sm:w-auto px-6 py-3 bg-red-700 dark:bg-red-800 text-white rounded-full text-lg font-semibold shadow-lg hover:bg-red-600 dark:hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-stone-800 dark:focus:ring-offset-stone-900 transition-all duration-300 transform hover:scale-105 active:scale-95">
        <span class="flex items-center justify-center">
          <svg class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.582m-15.356-2A8.001 8.001 0 0119.418 15m0 0H15" />
          </svg>
          Try Again
        </span>
      </button>
      <button class="w-full sm:w-auto px-6 py-3 bg-stone-700 dark:bg-stone-800 text-stone-200 rounded-full text-lg font-semibold shadow-lg hover:bg-stone-600 dark:hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 focus:ring-offset-stone-800 dark:focus:ring-offset-stone-900 transition-all duration-300 transform hover:scale-105 active:scale-95">
        <span class="flex items-center justify-center">
          <svg class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8.228 9.247a4.75 4.75 0 014.75 4.75v1A.75.75 0 0014 15.75h1.75a.75.75 0 00.75-.75V11a4.75 4.75 0 00-4.75-4.75H9.25a.75.75 0 00-.75.75v1.75a.75.75 0 00.75.75h1A.75.75 0 0012 11h2c-.775 0-1.5-.027-2.25-.084v-.75A.75.75 0 009.75 9h-2c-.775 0-1.5-.027-2.25-.084v-.75A.75.75 0 004 7.75h-.75a.75.75 0 00-.75.75V11a4.75 4.75 0 004.75 4.75h1A.75.75 0 0012 15.75h2c-.775 0-1.5-.027-2.25-.084v-.75A.75.75 0 009.75 14h-2c-.775 0-1.5-.027-2.25-.084v-.75A.75.75 0 004 12.75h-.75a.75.75 0 00-.75.75V17a4.75 4.75 0 004.75 4.75h-1A.75.75 0 008.228 9.247z" />
          </svg>
          Support
        </span>
      </button>
    </div>

    <div class="mt-8 text-center text-sm text-stone-400 dark:text-stone-500">
      <p>Error Code: 500-SRV-2001-ALPHA. If the issue persists, our matchmakers are on it!</p>
    </div>
  </div>
</div>

<style>
  @keyframes bounce-slow {
    0%, 100% { transform: translateY(-5%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
    50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
  }
  .animate-bounce-slow {
    animation: bounce-slow 3s infinite;
  }

  @keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .anim-fade-in {
    animation: fade-in 0.5s ease-out forwards;
    opacity: 0; /* Ensures element is hidden before animation plays */
  }
  .anim-delay-100 { animation-delay: 0.1s; }
  .anim-delay-200 { animation-delay: 0.2s; }
  .anim-delay-300 { animation-delay: 0.3s; }
</style>

Glassmorphism_Music_Follow_Button_Component

A complex, monochromatic glassmorphism follow button component designed for music and audio platforms, featuring frosted glass-like translucent elements with blur effects, fully responsive and with dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
  <div class="relative w-full max-w-sm p-6 rounded-2xl shadow-xl overflow-hidden backdrop-blur-lg bg-white/30 dark:bg-gray-800/30 ring-1 ring-inset ring-white/50 dark:ring-gray-700/50 transform-gpu transition-all duration-500 hover:scale-105 hover:shadow-2xl">
    <!-- Background overlay for glass effect -->
    <div class="absolute inset-0 z-0 bg-gradient-to-br from-blue-300/40 dark:from-sky-700/40 to-indigo-500/40 dark:to-blue-900/40 blur-3xl opacity-60 dark:opacity-40 pointer-events-none"></div>

    <div class="relative z-10 flex flex-col items-center text-center space-y-4">

      <!-- Artist/Profile Image -->
      <div class="relative w-24 h-24 rounded-full overflow-hidden border-4 border-white/70 dark:border-gray-600/70 shadow-lg group-hover:scale-110 transition-transform duration-300">
        <img src="https://randomuser.me/api/portraits/women/5.jpg" alt="Artist Avatar" class="w-full h-full object-cover">
        <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
      </div>

      <!-- Artist Name and Details -->
      <div>
        <h3 class="text-2xl font-bold text-gray-800 dark:text-white mt-2 drop-shadow-sm">Aurora Rhapsody</h3>
        <p class="text-md text-gray-600 dark:text-gray-300">Electronic / Ambient Artist</p>
        <div class="flex justify-center items-center text-sm text-gray-700 dark:text-gray-400 space-x-2 mt-1">
          <span><strong class="font-semibold">1.2M</strong> Followers</span>
          <span class="h-1 w-1 bg-gray-500 rounded-full"></span>
          <span><strong class="font-semibold">30</strong> Tracks</span>
        </div>
      </div>

      <!-- Follow Button -->
      <button class="follow-button group relative px-6 py-3 rounded-full overflow-hidden shadow-lg bg-blue-500/60 dark:bg-sky-700/60 transition-all duration-300 ring-1 ring-inset ring-blue-400/80 dark:ring-sky-600/80 transform-gpu hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-sky-500">
        <!-- Glassmorphism background for button -->
        <span class="absolute inset-0 bg-blue-400/30 dark:bg-sky-600/30 backdrop-blur-sm group-hover:bg-blue-500/40 dark:group-hover:bg-sky-700/40 transition-colors duration-300"></span>
        <span class="relative z-10 flex items-center text-lg font-semibold text-white group-hover:text-white dark:text-white drop-shadow-md">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 transition-transform group-hover:rotate-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM12 14v4m-2 2h4m-2-6a4 4 0 100-8 4 4 0 000 8z" />
          </svg>
          Follow
        </span>
      </button>

      <!-- CTA / More Info -->
      <a href="#" class="text-sm text-gray-700 dark:text-gray-400 hover:underline mt-4">
        <span class="flex items-center space-x-1">
          <span>View Profile</span>
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
          </svg>
        </span>
      </a>

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

Back to Top Button Component

A responsive 'Back to Top' button component for documentation/wiki sites, inspired by Memphis Design with a purple/violet color scheme. Includes dark mode support and a complex, interactive appearance.

Open Preview

                <div class="fixed bottom-4 right-4 z-50">
  <!-- Outer rotating square container -->
  <div class="relative w-20 h-20 sm:w-24 sm:h-24 md:w-28 md:h-28 lg:w-32 lg:h-32 transform rotate-45 group hover:rotate-0 transition-transform duration-500 ease-in-out">
    <!-- Larger inner purple square -->
    <div class="absolute inset-0 bg-purple-600 dark:bg-purple-800 rounded-lg shadow-xl group-hover:scale-110 transition-transform duration-300 ease-out"></div>

    <!-- Smaller offset violet triangle overlay -->
    <div class="absolute -bottom-2 -left-2 sm:-bottom-3 sm:-left-3 md:-bottom-4 md:-left-4 w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 lg:w-20 lg:h-20 bg-violet-400 dark:bg-violet-600 rounded-md transform rotate-12 group-hover:rotate-0 group-hover:scale-125 transition-all duration-500 ease-in-out"></div>

    <!-- Smaller offset lavendar circle overlay -->
    <div class="absolute -top-2 -right-2 sm:-top-3 sm:-right-3 md:-top-4 md:-right-4 w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 lg:w-20 lg:h-20 bg-indigo-300 dark:bg-indigo-500 rounded-full transform -rotate-12 group-hover:rotate-0 group-hover:scale-125 transition-all duration-500 ease-in-out"></div>

    <!-- The actual button element (positioned to appear central in the rotated context) -->
    <button
      aria-label="Back to top"
      onclick="window.scrollTo({ top: 0, behavior: 'smooth' });"
      class="absolute inset-0 flex items-center justify-center p-4 transform -rotate-45 group-hover:rotate-0 transition-transform duration-500 ease-in-out
             rounded-xl focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700
             active:scale-95 transition-transform duration-150"
    >
      <!-- Inner button styling for Memphis flair -->
      <div class="relative w-full h-full bg-purple-400 dark:bg-purple-700 rounded-lg border-4 border-dashed border-white border-opacity-70 dark:border-opacity-30 flex items-center justify-center
                  group-hover:bg-purple-500 dark:group-hover:bg-purple-900 transition-colors duration-300 ease-out">
        <!-- Arrow Icon -->
        <svg
          class="w-10 h-10 sm:w-12 sm:h-12 md:w-14 md:h-14 lg:w-16 lg:h-16 text-white dark:text-gray-200 transition-transform duration-300 ease-out
                 group-hover:-translate-y-1 group-hover:scale-110"
          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>

        <!-- Small decorative dot overlay (Memphis style) -->
        <div class="absolute -top-1 -right-1 w-3 h-3 sm:w-4 sm:h-4 md:w-5 md:h-5 bg-pink-400 dark:bg-pink-600 rounded-full shadow-lg group-hover:scale-150 transition-transform duration-300"></div>
        <div class="absolute -bottom-1 -left-1 w-3 h-3 sm:w-4 sm:h-4 md:w-5 md:h-5 bg-teal-400 dark:bg-teal-600 rounded-full shadow-lg group-hover:scale-150 transition-transform duration-300"></div>
      </div>
    </button>
  </div>
</div>

Password Reset Component

Minimalist/Flat design password reset component with earth tones, suitable for real estate platforms. It features a responsive layout, dark mode support, and multiple input fields for a complex interface.

Open Preview

                <div class="min-h-screen bg-stone-100 flex items-center justify-center p-4 dark:bg-stone-900">
  <div class="max-w-md w-full bg-white p-8 rounded-lg shadow-xl dark:bg-stone-800 dark:text-stone-200 border border-stone-200 dark:border-stone-700">
    <div class="text-center mb-8">
      <h2 class="text-3xl font-bold text-stone-800 dark:text-stone-100 mb-2">Reset Your Password</h2>
      <p class="text-stone-600 dark:text-stone-400">Enter your new password below. It should be strong and unique.</p>
    </div>

    <form class="space-y-6">
      <div>
        <label for="new-password" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1">New Password</label>
        <input type="password" id="new-password" name="new-password" required class="mt-1 block w-full px-4 py-2 bg-stone-50 border border-stone-300 rounded-md shadow-sm focus:outline-none focus:ring-amber-500 focus:border-amber-500 sm:text-sm dark:bg-stone-700 dark:border-stone-600 dark:text-stone-100 dark:placeholder-stone-400">
        <p class="mt-2 text-sm text-stone-500 dark:text-stone-400">Must be at least 8 characters, with letters, numbers, and symbols.</p>
      </div>

      <div>
        <label for="confirm-password" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1">Confirm New Password</label>
        <input type="password" id="confirm-password" name="confirm-password" required class="mt-1 block w-full px-4 py-2 bg-stone-50 border border-stone-300 rounded-md shadow-sm focus:outline-none focus:ring-amber-500 focus:border-amber-500 sm:text-sm dark:bg-stone-700 dark:border-stone-600 dark:text-stone-100 dark:placeholder-stone-400">
      </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-amber-600 focus:ring-amber-500 border-stone-300 rounded dark:bg-stone-700 dark:border-stone-600 dark:checked:bg-amber-700">
          <label for="remember-me" class="ml-2 block text-sm text-stone-900 dark:text-stone-300">Remember me on this device</label>
        </div>
      </div>

      <div>
        <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-amber-600 hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:bg-amber-700 dark:hover:bg-amber-800 dark:focus:ring-offset-stone-800">
          Reset Password
        </button>
      </div>
    </form>

    <div class="mt-6 text-center text-sm">
      <a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-500 dark:hover:text-amber-400">Back to login</a>
    </div>
  </div>
</div>

1 ... 102 103 104 105 106 ... 335

Search Components

Categories

All Components