Search Components

All Components

Browse all available Tailwind CSS components

Memphis_Muted_Consulting_Content_Display

A content display component for consulting/services, inspired by Memphis design with muted colors and geometric patterns. Responsive with dark mode support.

Open Preview

                <div class="font-sans antialiased bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-4 sm:p-8 md:p-12 lg:p-16 relative overflow-hidden">

  <!-- Memphis-inspired background shapes -->
  <div class="absolute inset-0 overflow-hidden pointer-events-none opacity-20 dark:opacity-10">
    <div class="absolute top-1/4 left-1/4 w-48 h-48 sm:w-64 sm:h-64 bg-fuchsia-300 dark:bg-fuchsia-700 transform rotate-45 rounded-xl"></div>
    <div class="absolute bottom-1/3 right-1/4 w-32 h-32 sm:w-48 sm:h-48 bg-teal-300 dark:bg-teal-700 transform -rotate-12 rounded-full"></div>
    <div class="absolute top-1/2 left-0 w-24 h-24 sm:w-32 sm:h-32 bg-yellow-300 dark:bg-yellow-700 transform rotate-70 rounded-lg"></div>
    <div class="absolute bottom-0 right-0 w-56 h-56 sm:w-72 sm:h-72 bg-purple-300 dark:bg-purple-700 transform -skew-x-12 rounded-2xl"></div>
  </div>

  <div class="max-w-7xl mx-auto relative z-10">
    <header class="text-center mb-12 lg:mb-16">
      <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold leading-tight tracking-tight mb-4 text-gray-900 dark:text-gray-50">
        <span class="block">Strategic Consulting</span>
        <span class="block text-teal-600 dark:text-teal-400">for Growth</span>
      </h1>
      <p class="text-lg sm:text-xl md:text-2xl font-medium text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
        Empowering businesses with tailored insights and actionable strategies to navigate complex challenges and achieve sustainable success.
      </p>
    </header>

    <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12 lg:mb-16">

      <!-- Service Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out border-4 border-fuchsia-300 dark:border-fuchsia-700 overflow-hidden">
        <img src="https://picsum.photos/id/157/600/400" alt="Strategy Development" class="w-full h-48 object-cover rounded-t-2xl">
        <div class="p-6">
          <h3 class="text-2xl font-bold mb-3 text-teal-700 dark:text-teal-300">Strategy Development</h3>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Crafting robust strategic roadmaps for market leadership and competitive advantage.</p>
          <ul class="list-none space-y-2 text-gray-600 dark:text-gray-400 mb-6">
            <li class="flex items-center"><svg class="w-5 h-5 text-fuchsia-500 dark:text-fuchsia-400 mr-2" 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>Market Entry Analysis</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-fuchsia-500 dark:text-fuchsia-400 mr-2" 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>Growth Planning</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-fuchsia-500 dark:text-fuchsia-400 mr-2" 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>Competitive Analysis</li>
          </ul>
          <a href="#" class="inline-block px-6 py-3 bg-fuchsia-400 dark:bg-fuchsia-600 text-white font-semibold rounded-full shadow-md hover:bg-fuchsia-500 dark:hover:bg-fuchsia-700 transition-colors duration-300 animate-pulse-md">Learn More</a>
        </div>
      </div>

      <!-- Service Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out border-4 border-teal-300 dark:border-teal-700 overflow-hidden">
        <img src="https://picsum.photos/id/160/600/400" alt="Operational Efficiency" class="w-full h-48 object-cover rounded-t-2xl">
        <div class="p-6">
          <h3 class="text-2xl font-bold mb-3 text-purple-700 dark:text-purple-300">Operational Efficiency</h3>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Optimizing internal processes for enhanced productivity and cost reduction.</p>
          <ul class="list-none space-y-2 text-gray-600 dark:text-gray-400 mb-6">
            <li class="flex items-center"><svg class="w-5 h-5 text-teal-500 dark:text-teal-400 mr-2" 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>Process Re-engineering</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-teal-500 dark:text-teal-400 mr-2" 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>Supply Chain Optimization</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-teal-500 dark:text-teal-400 mr-2" 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>Tech Integration</li>
          </ul>
          <a href="#" class="inline-block px-6 py-3 bg-teal-400 dark:bg-teal-600 text-white font-semibold rounded-full shadow-md hover:bg-teal-500 dark:hover:bg-teal-700 transition-colors duration-300">Explore Solutions</a>
        </div>
      </div>

      <!-- Service Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out border-4 border-yellow-300 dark:border-yellow-700 overflow-hidden">
        <img src="https://picsum.photos/id/156/600/400" alt="Digital Transformation" class="w-full h-48 object-cover rounded-t-2xl">
        <div class="p-6">
          <h3 class="text-2xl font-bold mb-3 text-fuchsia-700 dark:text-fuchsia-300">Digital Transformation</h3>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Guiding businesses through successful digital adoption and innovation.</p>
          <ul class="list-none space-y-2 text-gray-600 dark:text-gray-400 mb-6">
            <li class="flex items-center"><svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-2" 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>Cloud Adoption</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-2" 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>AI & Automation</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-2" 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>Data Analytics</li>
          </ul>
          <a href="#" class="inline-block px-6 py-3 bg-yellow-400 dark:bg-yellow-600 text-white font-semibold rounded-full shadow-md hover:bg-yellow-500 dark:hover:bg-yellow-700 transition-colors duration-300 animate-pulse-md">Discover More</a>
        </div>
      </div>

    </section>

    <section class="bg-gray-100 dark:bg-gray-800 rounded-3xl p-8 sm:p-10 lg:p-12 mb-12 lg:mb-16 border-4 border-purple-300 dark:border-purple-700 relative overflow-hidden">
      <!-- Abstract Shape for Memphis feel -->
      <div class="absolute top-0 -left-8 w-32 h-32 bg-teal-200 dark:bg-teal-800 rounded-full opacity-40 mix-blend-multiply dark:mix-blend-screen transform -rotate-12"></div>
      <div class="absolute bottom-0 -right-8 w-48 h-48 bg-fuchsia-200 dark:bg-fuchsia-800 rounded-tl-full rounded-br-full opacity-40 mix-blend-multiply dark:mix-blend-screen transform rotate-34"></div>

      <h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-8 text-gray-900 dark:text-gray-50">
        Why Partner With Us?
      </h2>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-center">
        <div class="p-4">
          <div class="text-5xl mb-4 text-fuchsia-600 dark:text-fuchsia-400 drop-shadow-lg">✨</div>
          <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-100">Tailored Solutions</h3>
          <p class="text-gray-600 dark:text-gray-300">Custom strategies designed to fit your unique business needs.</p>
        </div>
        <div class="p-4">
          <div class="text-5xl mb-4 text-teal-600 dark:text-teal-400 drop-shadow-lg">📈</div>
          <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-100">Proven Results</h3>
          <p class="text-gray-600 dark:text-gray-300">A track record of driving significant and measurable growth for our clients.</p>
        </div>
        <div class="p-4">
          <div class="text-5xl mb-4 text-yellow-600 dark:text-yellow-400 drop-shadow-lg">🤝</div>
          <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-100">Expert Team</h3>
          <p class="text-gray-600 dark:text-gray-300">Access to seasoned consultants with diverse industry expertise.</p>
        </div>
      </div>
    </section>

    <section class="text-center bg-purple-100 dark:bg-purple-900 rounded-3xl p-8 sm:p-10 lg:p-12 border-4 border-fuchsia-300 dark:border-fuchsia-700 relative overflow-hidden">
      <!-- Abstract Shape for Memphis feel -->
      <div class="absolute top-1/2 left-0 w-24 h-24 bg-yellow-200 dark:bg-yellow-800 rounded-full opacity-40 mix-blend-multiply dark:mix-blend-screen transform translate-x-1/2 -translate-y-1/2"></div>
      <div class="absolute bottom-0 right-1/4 w-32 h-32 bg-teal-200 dark:bg-teal-800 transform skew-y-12 opacity-40 mix-blend-multiply dark:mix-blend-screen"></div>

      <h2 class="text-3xl sm:text-4xl font-extrabold mb-6 text-gray-900 dark:text-gray-50">
        Ready to Transform Your Business?
      </h2>
      <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-8 max-w-2xl mx-auto">
        Let's discuss how our consulting services can propel your business forward.
      </p>
      <a href="#contact" class="inline-flex items-center px-8 py-4 bg-purple-500 dark:bg-purple-700 text-white text-xl font-bold rounded-full shadow-lg hover:bg-purple-600 dark:hover:bg-purple-800 transition-colors duration-300 transform hover:scale-105 active:scale-95 animate-jump-and-pulse shadow-purple-400/50 dark:shadow-purple-900/50">
        Get in Touch
        <svg class="ml-3 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>
      </a>
    </section>

  </div>
</div>

<!-- Custom Keyframes (usually in CSS file but added here for isolated component) -->
<style>
  @keyframes pulse-md {
    0%, 100% { box-shadow: 0 0 0 0 rgba(192, 132, 252, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(192, 132, 252, 0); }
  }
  @keyframes jump-and-pulse {
    0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 4px 14px rgba(168, 85, 247, 0.3); }
    50% { transform: translateY(-5px) scale(1.02); box-shadow: 0 8px 20px rgba(168, 85, 247, 0.6); }
  }
  .animate-pulse-md {
    animation: pulse-md 2s infinite ease-in-out;
    animation-delay: 0.5s; /* Staggering the animation a bit */
  }
  .animate-jump-and-pulse {
    animation: jump-and-pulse 2s infinite ease-in-out;
    animation-delay: 0.8s; /* Staggering the animation a bit */
  }
</style>

Cryptocurrency Sidebar Component

A complex, responsive sidebar component designed for cryptocurrency and blockchain applications, featuring Material Design principles with a muted color scheme and full dark mode support.

Open Preview

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200">
  <!-- Sidebar -->
  <div class="w-64 flex-shrink-0 bg-white dark:bg-gray-800 shadow-lg md:relative absolute inset-y-0 left-0 transform -translate-x-full md:translate-x-0 transition duration-300 ease-in-out z-40" id="sidebar">
    <div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
      <div class="flex items-center">
        <svg class="w-8 h-8 text-indigo-600 dark:text-indigo-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-1.25-3M10.25 10h3.5m-3.5 3h3.5m-4.5 9V5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3-7 3z"></path>
        </svg>
        <span class="text-xl font-semibold text-gray-900 dark:text-gray-100">CryptoVault</span>
      </div>
      <button class="md:hidden text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none" onclick="document.getElementById('sidebar').classList.add('-translate-x-full'); document.getElementById('backdrop').classList.add('hidden');">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>
    <nav class="mt-4">
      <a href="#" class="flex items-center py-3 px-4 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md mx-2 transition duration-200 ease-in-out active:bg-gray-300 dark:active:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-500">
        <svg class="w-5 h-5 mr-3" 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 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-15 4v-2a3 3 0 013-3h2m0 0a3 3 0 013-3h2m-3 2v5h-5M3 12h18"></path>
        </svg>
        Dashboard
      </a>
      <a href="#" class="flex items-center py-3 px-4 text-indigo-600 dark:text-indigo-400 bg-gray-200 dark:bg-gray-700 rounded-md mx-2 transition duration-200 ease-in-out shadow-sm">
        <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4.636 17.364l-.707.707M3 12H2m1-.636L1.636 4.636l.707.707M12 22v-1m-4.636-.707l-.707-.707M3 12h-1M12 21v-1m-4.636-1.364l-.707-.707M2 12h-1M12 23v-1M12 15a3 3 0 110-6 3 3 0 010 6z"></path>
        </svg>
        Portfolio
      </a>
      <a href="#" class="flex items-center py-3 px-4 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md mx-2 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500">
        <svg class="w-5 h-5 mr-3" 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 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v2m0 0v6a2 2 0 002 2h2m2-4h1v4c0 .552.448 1 1 1h2a1 1 0 001-1v-4h1m-6 0h6m-9-6h9c1.657 0 3 1.343 3 3v3H3V6c0-1.657 1.343-3 3-3z"></path>
        </svg>
        Transactions
      </a>
      <a href="#" class="flex items-center py-3 px-4 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md mx-2 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500">
        <svg class="w-5 h-5 mr-3" 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="M7 12l3-3m0 0l3 3m-3-3v8m0-9a9 9 0 11-9 9m9-9A9 9 0 0121 12a9 9 0 01-9 9m-9-9a9 9 0 009 9m0-9V5"></path>
        </svg>
        Exchange
      </a>
      <a href="#" class="flex items-center py-3 px-4 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md mx-2 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500">
        <svg class="w-5 h-5 mr-3" 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 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
        </svg>
        Analytics
      </a>
    </nav>
    <div class="mt-auto p-4 border-t border-gray-200 dark:border-gray-700">
      <div class="flex items-center space-x-3 mb-4">
        <img class="h-10 w-10 rounded-full object-cover border-2 border-indigo-500" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
        <div>
          <p class="font-medium text-gray-900 dark:text-gray-100">Jane Doe</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">Premium User</p>
        </div>
      </div>
      <a href="#" class="w-full flex items-center justify-center py-2 px-4 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500">
        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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.37a1.724 1.724 0 002.572-1.065z"></path>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
        </svg>
        Settings
      </a>
    </div>
  </div>

  <!-- Main Content Area Placeholder -->
  <div class="flex-1 flex flex-col overflow-hidden">
    <!-- Top Bar (Minimal for this component) -->
    <header class="flex items-center justify-between p-4 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 shadow-md">
      <button class="md:hidden focus:outline-none text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300" onclick="document.getElementById('sidebar').classList.remove('-translate-x-full'); document.getElementById('backdrop').classList.remove('hidden');">
        <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>
      <h1 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Portfolio Overview</h1>
      <div class="flex items-center space-x-4">
        <!-- Dark mode toggle placeholder -->
        <button class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500" onclick="document.documentElement.classList.toggle('dark')">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>
        </button>
      </div>
    </header>
    <main class="flex-1 overflow-x-hidden overflow-y-auto p-6">
      <!-- Your main content goes here -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
          <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">Total Balance</h2>
          <p class="text-3xl font-bold text-indigo-600 dark:text-indigo-400">$23,456.78</p>
          <p class="text-sm text-green-500 mt-2">+3.4% today</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
          <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">Bitcoin Holding</h2>
          <p class="text-2xl font-bold text-gray-900 dark:text-gray-100">0.5 BTC</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">Value: $15,000</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
          <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">Recent Activity</h2>
          <ul class="space-y-3">
            <li class="flex justify-between items-center text-gray-700 dark:text-gray-300 text-sm">
              <span>Buy ETH</span>
              <span class="text-green-500">+$500</span>
            </li>
            <li class="flex justify-between items-center text-gray-700 dark:text-gray-300 text-sm">
              <span>Sell ADA</span>
              <span class="text-red-500">-$120</span>
            </li>
            <li class="flex justify-between items-center text-gray-700 dark:text-gray-300 text-sm">
              <span>Deposit USD</span>
              <span class="text-green-500">+$1000</span>
            </li>
          </ul>
        </div>
      </div>
    </main>
  </div>

  <!-- Overlay for mobile sidebar -->
  <div class="fixed inset-0 bg-black bg-opacity-50 z-30 hidden md:hidden" id="backdrop" onclick="document.getElementById('sidebar').classList.add('-translate-x-full'); this.classList.add('hidden');"></div>
</div>

File Viewer Component

A responsive file viewer component with a watercolor/artistic style and corporate blue color scheme, suitable for travel/tourism websites. Includes dark mode support.

Open Preview

                <div class="font-sans antialiased text-gray-800 dark:text-gray-200 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 p-4 sm:p-6 md:p-8 rounded-lg shadow-xl overflow-hidden relative">

  <!-- Background texture / Artistic elements -->
  <div class="absolute inset-0 bg-cover bg-center opacity-30 dark:opacity-10" style="background-image: url('https://www.transparenttextures.com/patterns/water-color.png');"></div>

  <div class="relative z-10 max-w-6xl mx-auto">
    <div class="mb-6 text-center">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-900 dark:text-blue-200 mb-2 drop-shadow-md">Your Travel Documents</h2>
      <p class="text-blue-700 dark:text-blue-300 text-lg sm:text-xl font-medium">Explore your flight details, bookings, and itinerary.</p>
    </div>

    <!-- File Viewer Layout -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">

      <!-- Left Panel: File List/Navigation -->
      <div class="md:col-span-1 bg-white dark:bg-gray-850 bg-opacity-80 dark:bg-opacity-80 rounded-lg shadow-lg backdrop-blur-sm p-4 border border-blue-200 dark:border-blue-900">
        <h3 class="text-xl font-bold text-blue-800 dark:text-blue-300 mb-4 pb-2 border-b border-blue-300 dark:border-blue-700">My Documents</h3>
        <ul class="space-y-3">
          <li class="flex items-center p-3 rounded-lg cursor-pointer transition duration-300 ease-in-out bg-blue-100 dark:bg-blue-900 border border-blue-200 dark:border-blue-800 text-blue-800 dark:text-blue-100 shadow-md transform hover:scale-[1.02] hover:shadow-xl">
            <svg class="w-6 h-6 mr-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L14.414 5A2 2 0 0115 6.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg>
            <span class="font-semibold">Flight Booking Confirmation.pdf</span>
          </li>
          <li class="flex items-center p-3 rounded-lg cursor-pointer transition duration-300 ease-in-out hover:bg-blue-50 dark:hover:bg-gray-700 border border-blue-100 dark:border-gray-700 text-gray-700 dark:text-gray-300">
            <svg class="w-6 h-6 mr-3 text-blue-500 dark:text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 2a2 2 0 00-2 2v8a2 2 0 002 2h6a2 2 0 002-2V6.414A2 2 0 0016.414 5L14 2.586A2 2 0 0012.586 2H9zM13 10V7h-2v3h2z"/></svg>
            <span>Hotel Reservation.pdf</span>
          </li>
          <li class="flex items-center p-3 rounded-lg cursor-pointer transition duration-300 ease-in-out hover:bg-blue-50 dark:hover:bg-gray-700 border border-blue-100 dark:border-gray-700 text-gray-700 dark:text-gray-300">
            <svg class="w-6 h-6 mr-3 text-blue-500 dark:text-blue-500" 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 6L12 2.586A2 2 0 0010.586 2H6zm5 6a1 1 0 10-2 0v5a1 1 0 102 0V8z" clip-rule="evenodd"></path></svg>
            <span>Travel Itinerary.docx</span>
          </li>
          <li class="flex items-center p-3 rounded-lg cursor-pointer transition duration-300 ease-in-out hover:bg-blue-50 dark:hover:bg-gray-700 border border-blue-100 dark:border-gray-700 text-gray-700 dark:text-gray-300">
            <svg class="w-6 h-6 mr-3 text-blue-500 dark:text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 6h4a1 1 0 011 1v5a1 1 0 01-1 1H2a1 1 0 01-1-1V7a1 1 0 011-1zM14 6h4a1 1 0 011 1v5a1 1 0 01-1 1h-4a1 1 0 01-1-1V7a1 1 0 011-1zM6 16v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H7a1 1 0 01-1-1zm8 0v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1h-2a1 1 0 01-1-1z"/></svg>
            <span>Boarding Pass.pdf</span>
          </li>
        </ul>

        <div class="mt-6 pt-4 border-t border-blue-300 dark:border-blue-700 flex justify-center">
          <button class="px-5 py-2 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-semibold rounded-full shadow-lg hover:from-blue-700 hover:to-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 transition duration-300 transform hover:-translate-y-0.5">
            <svg class="w-5 h-5 inline-block mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
            Download All
          </button>
        </div>
      </div>

      <!-- Right Panel: File Preview -->
      <div class="md:col-span-2 bg-white dark:bg-gray-850 rounded-lg shadow-lg backdrop-blur-sm p-4 border border-blue-200 dark:border-blue-900 flex flex-col">
        <div class="flex justify-between items-center mb-4 pb-3 border-b border-blue-300 dark:border-blue-700">
          <h3 class="text-xl font-bold text-blue-800 dark:text-blue-300">Preview: Flight Booking Confirmation.pdf</h3>
          <div class="flex space-x-3">
            <button class="p-2 rounded-full bg-blue-100 dark:bg-blue-900 border border-blue-200 dark:border-blue-800 text-blue-700 dark:text-blue-300 hover:bg-blue-200 dark:hover:bg-blue-800 transition transform hover:scale-105" title="Previous Page">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
            </button>
            <button class="p-2 rounded-full bg-blue-100 dark:bg-blue-900 border border-blue-200 dark:border-blue-800 text-blue-700 dark:text-blue-300 hover:bg-blue-200 dark:hover:bg-blue-800 transition transform hover:scale-105" title="Next Page">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
            </button>
            <button class="p-2 rounded-full bg-blue-600 text-white shadow-md hover:bg-blue-700 transition transform hover:scale-105" title="Download File">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
            </button>
          </div>
        </div>
        <div class="flex-grow overflow-hidden rounded-lg border border-blue-300 dark:border-blue-700 bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
          <!-- Placeholder for PDF/Document Viewer -->
          <img src="https://picsum.photos/seed/traveldoc/900/600" alt="Document Preview" class="w-full h-full object-contain rounded-md shadow-inner">
        </div>
        <div class="mt-4 flex justify-between items-center text-sm text-gray-500 dark:text-gray-400">
          <span>Page 1 of 3</span>
          <span>Last modified: 2023-10-26</span>
        </div>
      </div>
    </div>

    <!-- Recent Activity / Shared Files (Optional Add-on) -->
    <div class="mt-8 pt-6 border-t border-blue-200 dark:border-blue-800">
      <h3 class="text-xl font-bold text-blue-800 dark:text-blue-300 mb-4">Recent Activity</h3>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-850 rounded-lg shadow-md p-4 flex items-center space-x-4 border border-blue-100 dark:border-gray-700">
          <img class="w-12 h-12 rounded-full object-cover border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div>
            <p class="font-medium text-gray-800 dark:text-gray-200">John Doe viewed "Flight Booking"</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">5 minutes ago</p>
          </div>
        </div>
        <div class="bg-white dark:bg-gray-850 rounded-lg shadow-md p-4 flex items-center space-x-4 border border-blue-100 dark:border-gray-700">
          <img class="w-12 h-12 rounded-full object-cover border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div>
            <p class="font-medium text-gray-800 dark:text-gray-200">Jane Smith shared "Itinerary"</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">1 hour ago</p>
          </div>
        </div>
        <div class="bg-white dark:bg-gray-850 rounded-lg shadow-md p-4 flex items-center space-x-4 border border-blue-100 dark:border-gray-700">
          <img class="w-12 h-12 rounded-full object-cover border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/88.jpg" alt="User Avatar">
          <div>
            <p class="font-medium text-gray-800 dark:text-gray-200">Admin updated "Boarding Pass"</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Yesterday</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

Retro_Healthcare_Auth_Component

A responsive authentication component with a retro/vintage design, muted color scheme, tailored for healthcare/medical applications, including dark mode support.

Open Preview

                <div class="min-h-screen bg-gray-200 dark:bg-gray-900 flex items-center justify-center p-4 sm:p-6 lg:p-8 font-mono">
  <div class="max-w-md w-full bg-slate-100 dark:bg-slate-800 shadow-lg rounded-lg border border-slate-300 dark:border-slate-700 overflow-hidden transform transition-all duration-300 hover:scale-[1.01]">
    <div class="relative bg-gradient-to-tr from-rose-400 to-indigo-500 p-8 text-center text-white dark:from-rose-600 dark:to-indigo-800">
      <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/clean-textile.png')] opacity-20"></div>
      <h2 class="relative text-3xl sm:text-4xl font-bold mb-2 tracking-wide uppercase retro-shadow text-pink-100">MediNet</h2>
      <p class="relative text-sm sm:text-base text-gray-100">Secure Healthcare Portal</p>
    </div>
    <div class="p-6 sm:p-8">
      <h3 class="text-xl sm:text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-6 text-center">Provider Login</h3>
      <form>
        <div class="mb-4">
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
          <input type="email" id="email" name="email" placeholder="[email protected]" class="w-full px-4 py-2 border border-slate-400 dark:border-slate-600 rounded-md bg-white dark:bg-slate-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 transition duration-200 appearance-none placeholder-gray-400 dark:placeholder-gray-500">
        </div>
        <div class="mb-6">
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Password</label>
          <input type="password" id="password" name="password" placeholder="• • • • • • • •" class="w-full px-4 py-2 border border-slate-400 dark:border-slate-600 rounded-md bg-white dark:bg-slate-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 transition duration-200 appearance-none placeholder-gray-400 dark:placeholder-gray-500">
        </div>
        <div class="flex items-center justify-between mb-6">
          <div class="flex items-center">
            <input id="remember_me" name="remember_me" type="checkbox" class="h-4 w-4 text-indigo-600 dark:text-indigo-400 border-gray-300 dark:border-gray-600 rounded focus:ring-indigo-500 dark:focus:ring-indigo-400 transition duration-200">
            <label for="remember_me" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">Remember me</label>
          </div>
          <a href="#" class="text-sm text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 font-medium transition duration-200">Forgot Password?</a>
        </div>
        <div>
          <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-700 dark:hover:bg-indigo-800 text-white font-bold py-3 px-4 rounded-md focus:outline-none focus:shadow-outline transition duration-300 ease-in-out transform hover:-translate-y-0.5 shadow-md retro-button-shadow">
            <span class="tracking-wider">SIGN IN</span>
          </button>
        </div>
      </form>
      <div class="mt-8 text-center">
        <p class="text-sm text-gray-600 dark:text-gray-400">
          Need an account? 
          <a href="#" class="text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 font-medium transition duration-200">Register Now</a>
        </p>
      </div>
    </div>
  </div>

  <style>
    .retro-shadow {
      text-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1), 8px 8px 0px rgba(0, 0, 0, 0.05);
    }
    .dark .retro-shadow {
      text-shadow: 4px 4px 0px rgba(255, 255, 255, 0.05), 8px 8px 0px rgba(255, 255, 255, 0.02);
    }
    .retro-button-shadow {
      box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.15);
    }
    .dark .retro-button-shadow {
      box-shadow: 5px 5px 0px 0px rgba(255, 255, 255, 0.1);
    }
  </style>
</div>

Sticky Navigation Component

A simple, clean, and high-contrast sticky navigation bar with a monospace/developer aesthetic, suitable for entertainment or media platforms.

Open Preview

                <nav class="bg-gray-900 dark:bg-black text-lime-400 font-mono fixed w-full top-0 z-50 shadow-lg">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between">
    <!-- Logo/Brand Section -->
    <div class="flex items-center space-x-2">
      <svg class="h-6 w-6 text-lime-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M4 8h16M4 16h16" />
      </svg>
      <span class="text-xl font-bold uppercase tracking-wider">CodeStream</span>
    </div>

    <!-- Desktop Navigation Links -->
    <div class="hidden md:flex space-x-8">
      <a href="#" class="hover:text-white transition duration-300">Discover</a>
      <a href="#" class="hover:text-white transition duration-300">Browse</a>
      <a href="#" class="hover:text-white transition duration-300">Live</a>
      <a href="#" class="hover:text-white transition duration-300">Community</a>
    </div>

    <!-- Mobile Menu Button (Hamburger Icon) -->
    <div class="md:hidden">
      <button class="text-lime-400 focus:outline-none focus:text-white">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Navigation (hidden by default, would be toggled by JS) -->
  <div class="hidden md:hidden bg-gray-800 dark:bg-gray-950 pb-2">
    <div class="flex flex-col items-center space-y-2 py-2">
      <a href="#" class="block w-full text-center py-2 hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300">Discover</a>
      <a href="#" class="block w-full text-center py-2 hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300">Browse</a>
      <a href="#" class="block w-full text-center py-2 hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300">Live</a>
      <a href="#" class="block w-full text-center py-2 hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300">Community</a>
    </div>
  </div>
</nav>

ArtDecoECommerceButtons

A complex set of Art Deco inspired e-commerce buttons with geometric patterns and luxurious Ocean/Blue tones, optimized for responsiveness and dark mode.

Open Preview

                <div class="p-4 sm:p-8 md:p-12 bg-gradient-to-br from-blue-50 to-blue-200 dark:from-gray-900 dark:to-blue-950 min-h-screen flex items-center justify-center font-serif">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-2xl rounded-lg overflow-hidden border-4 border-blue-400 dark:border-blue-700 transform transition-all duration-500 hover:scale-[1.01]">
    <div class="p-6 sm:p-8 lg:p-12 bg-blue-600 dark:bg-blue-900 text-white flex justify-between items-center relative overflow-hidden">
      <div class="absolute inset-0 pattern-geometric opacity-20 dark:opacity-10 pointer-events-none"></div>
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-wide drop-shadow-lg z-10">Oceanic Selections</h2>
      <div class="flex items-center space-x-3 z-10">
        <span class="text-lg font-semibold">Your Cart</span>
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.182 1.705.42 2.302l.644.644m-.644-.644L11.75 21M7 13H5.4M11.75 21h3.5M11.75 21L9.25 10.25l-2.293 2.293c-.63-.63-.182 1.705.42 2.302l.644.644" />
        </svg>
      </div>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6 sm:p-8 md:p-10">
      <!-- Primary Button -->
      <button class="w-full py-4 px-6 bg-gradient-to-br from-blue-500 to-blue-700 dark:from-blue-700 dark:to-blue-900 text-white text-lg font-bold uppercase rounded-lg shadow-xl tracking-wider 
                     transform transition-all duration-300 ease-in-out 
                     hover:scale-105 hover:shadow-2xl hover:brightness-110 
                     focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600 
                     flex items-center justify-center space-x-2 relative overflow-hidden 
                     border-b-4 border-blue-800 dark:border-blue-950 button-animation">
        <span class="z-10">Add to Cart</span>
        <svg class="w-6 h-6 z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </button>

      <!-- Secondary Button -->
      <button class="w-full py-4 px-6 bg-gradient-to-br from-blue-300 to-blue-500 dark:from-blue-500 dark:to-blue-700 text-white text-lg font-semibold uppercase rounded-lg shadow-md tracking-wide 
                     transform transition-all duration-300 ease-in-out 
                     hover:scale-105 hover:shadow-lg hover:brightness-110 
                     focus:outline-none focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-500 
                     flex items-center justify-center space-x-2 relative overflow-hidden 
                     border-b-4 border-blue-600 dark:border-blue-800 button-animation">
        <span class="z-10">View Details</span>
        <svg class="w-6 h-6 z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
        </svg>
      </button>

      <!-- Ghost Button -->
      <button class="w-full py-4 px-6 bg-white dark:bg-gray-800 text-blue-600 dark:text-blue-400 text-lg font-semibold uppercase rounded-lg shadow-lg tracking-wide 
                     border-2 border-blue-600 dark:border-blue-700 
                     transform transition-all duration-300 ease-in-out 
                     hover:scale-105 hover:shadow-xl hover:bg-blue-50 dark:hover:bg-blue-900 
                     focus:outline-none focus:ring-4 focus:ring-blue-100 dark:focus:ring-blue-800 
                     flex items-center justify-center space-x-2 relative overflow-hidden 
                     border-b-4 border-blue-700 dark:border-blue-800 button-animation">
        <span class="z-10">Wishlist</span>
        <svg class="w-6 h-6 z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.73l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.07l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
        </svg>
      </button>

      <!-- Icon Button with text -->
      <button class="w-full py-4 px-6 bg-gradient-to-br from-blue-400 to-blue-600 dark:from-blue-600 dark:to-blue-800 text-white text-lg font-medium rounded-lg shadow-md tracking-wide 
                     transform transition-all duration-300 ease-in-out 
                     hover:scale-105 hover:shadow-xl hover:brightness-110 
                     focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-700 
                     flex items-center justify-center space-x-2 relative overflow-hidden 
                     border-b-4 border-blue-700 dark:border-blue-900 button-animation">
        <svg class="w-6 h-6 z-10" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H3a2 2 0 00-2 2v6a2 2 0 002 2h14a2 2 0 002-2v-6a2 2 0 00-2-2h-3V6a4 4 0 00-4-4zm2 6V6a2 2 0 10-4 0v2h4zm-4 4a1 1 0 100 2h4a1 1 0 100-2H8z" clip-rule="evenodd" />
        </svg>
        <span class="z-10">Buy Now</span>
      </button>

      <!-- Outline Button -->
      <button class="w-full py-4 px-6 bg-transparent text-blue-600 dark:text-blue-300 text-lg font-semibold uppercase rounded-lg shadow-inner 
                     border-2 border-blue-600 dark:border-blue-500 
                     transform transition-all duration-300 ease-in-out 
                     hover:bg-blue-100 dark:hover:bg-blue-900 hover:text-blue-800 dark:hover:text-blue-100 hover:shadow-md 
                     focus:outline-none focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-700 
                     flex items-center justify-center space-x-2 relative overflow-hidden 
                     border-b-4 border-blue-700 dark:border-blue-600 button-animation">
        <span class="z-10">Compare Items</span>
        <svg class="w-6 h-6 z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
        </svg>
      </button>

      <!-- Disabled Button -->
      <button class="w-full py-4 px-6 bg-gray-300 dark:bg-gray-700 text-gray-500 dark:text-gray-400 text-lg font-medium uppercase rounded-lg shadow-inner cursor-not-allowed 
                     relative overflow-hidden 
                     border-b-4 border-gray-400 dark:border-gray-800 button-animation opacity-70">
        <span class="z-10">Out of Stock</span>
        <svg class="w-6 h-6 z-10" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm-8-8a8 8 0 0115.347-3.929L3.929 15.347A8 8 0 012 10z" clip-rule="evenodd" />
        </svg>
      </button>

      <!-- Small Button -->
      <button class="w-full py-3 px-5 bg-gradient-to-br from-sky-400 to-sky-600 dark:from-sky-600 dark:to-sky-800 text-white text-base font-semibold rounded-md shadow-md 
                     transform transition-all duration-300 ease-in-out 
                     hover:scale-105 hover:shadow-lg hover:brightness-110 
                     focus:outline-none focus:ring-4 focus:ring-sky-200 dark:focus:ring-sky-700 
                     flex items-center justify-center space-x-2 relative overflow-hidden 
                     border-b-4 border-sky-700 dark:border-sky-900 button-animation">
        <svg class="w-5 h-5 z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <span class="z-10">Quick View</span>
      </button>

      <!-- Large Button -->
      <button class="w-full py-5 px-8 bg-gradient-to-br from-teal-500 to-cyan-700 dark:from-teal-700 dark:to-cyan-900 text-white text-xl font-bold uppercase rounded-lg shadow-2xl tracking-wider 
                     transform transition-all duration-300 ease-in-out 
                     hover:scale-105 hover:shadow-3xl hover:brightness-110 
                     focus:outline-none focus:ring-4 focus:ring-teal-300 dark:focus:ring-teal-600 
                     flex items-center justify-center space-x-3 relative overflow-hidden 
                     border-b-4 border-teal-800 dark:border-teal-950 button-animation">
        <span class="z-10">Proceed to Checkout</span>
        <svg class="w-7 h-7 z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
        </svg>
      </button>

    </div>
    
    <div class="p-6 sm:p-8 md:p-10 bg-blue-700 dark:bg-blue-950 text-white flex flex-col sm:flex-row justify-between items-center relative overflow-hidden">
      <div class="absolute inset-0 pattern-geometric-reverse opacity-20 dark:opacity-10 pointer-events-none"></div>
      <p class="text-center sm:text-left mb-4 sm:mb-0 text-sm sm:text-base z-10">&copy; 2023 Oceanic Arts. All rights reserved.</p>
      <div class="flex space-x-4 z-10">
        <a href="#" class="text-white hover:text-blue-200 dark:hover:text-blue-400 transition duration-300">Privacy Policy</a>
        <a href="#" class="text-white hover:text-blue-200 dark:hover:text-blue-400 transition duration-300">Terms of Service</a>
      </div>
    </div>
  </div>
</div>

<style>
  /* Art Deco Geometric Pattern */
  .pattern-geometric {
    background-image: radial-gradient(circle at 100% 150%, #4a90e2, #4a90e2 28%, transparent 28%, transparent 31%, #3467b7 31%, #3467b7 34%, transparent 34%, transparent 37%, #2a5298 37%, #2a5298 40%, transparent 40%, transparent), radial-gradient(circle at 0 150%, #4a90e2, #4a90e2 28%, transparent 28%, transparent 31%, #3467b7 31%, #3467b7 34%, transparent 34%, transparent 37%, #2a5298 37%, #2a5298 40%, transparent 40%, transparent), radial-gradient(circle at 100% 50%, #4a90e2, #4a90e2 14%, transparent 14%, transparent 17%, #3467b7 17%, #3467b7 20%, transparent 20%, transparent 23%, #2a5298 23%, #2a5298 26%, transparent 26%, transparent), radial-gradient(circle at 0 50%, #4a90e2, #4a90e2 14%, transparent 14%, transparent 17%, #3467b7 17%, #3467b7 20%, transparent 20%, transparent 23%, #2a5298 23%, #2a5298 26%, transparent 26%, transparent), radial-gradient(circle at 100% 0, #4a90e2, #4a90e2 28%, transparent 28%, transparent 31%, #3467b7 31%, #3467b7 34%, transparent 34%, transparent 37%, #2a5298 37%, #2a5298 40%, transparent 40%, transparent), radial-gradient(circle at 0 0, #4a90e2, #4a90e2 28%, transparent 28%, transparent 31%, #3467b7 31%, #3467b7 34%, transparent 34%, transparent 37%, #2a5298 37%, #2a5298 40%, transparent 40%, transparent);
    background-size: 80px 80px;
    background-position: 0 0, 80px 0, 40px 40px, 120px 40px, 40px 0, 120px 0;
  }

  .pattern-geometric-reverse {
    background-image: radial-gradient(circle at 100% 150%, #2a5298, #2a5298 28%, transparent 28%, transparent 31%, #3467b7 31%, #3467b7 34%, transparent 34%, transparent 37%, #4a90e2 37%, #4a90e2 40%, transparent 40%, transparent), radial-gradient(circle at 0 150%, #2a5298, #2a5298 28%, transparent 28%, transparent 31%, #3467b7 31%, #3467b7 34%, transparent 34%, transparent 37%, #4a90e2 37%, #4a90e2 40%, transparent 40%, transparent), radial-gradient(circle at 100% 50%, #2a5298, #2a5298 14%, transparent 14%, transparent 17%, #3467b7 17%, #3467b7 20%, transparent 20%, transparent 23%, #4a90e2 23%, #4a90e2 26%, transparent 26%, transparent), radial-gradient(circle at 0 50%, #2a5298, #2a5298 14%, transparent 14%, transparent 17%, #3467b7 17%, #3467b7 20%, transparent 20%, transparent 23%, #4a90e2 23%, #4a90e2 26%, transparent 26%, transparent), radial-gradient(circle at 100% 0, #2a5298, #2a5298 28%, transparent 28%, transparent 31%, #3467b7 31%, #3467b7 34%, transparent 34%, transparent 37%, #4a90e2 37%, #4a90e2 40%, transparent 40%, transparent), radial-gradient(circle at 0 0, #2a5298, #2a5298 28%, transparent 28%, transparent 31%, #3467b7 31%, #3467b7 34%, transparent 34%, transparent 37%, #4a90e2 37%, #4a90e2 40%, transparent 40%, transparent);
    background-size: 80px 80px;
    background-position: 0 0, 80px 0, 40px 40px, 120px 40px, 40px 0, 120px 0;
  }
  
  /* Button Hover/Click Animation - Subtle Art Deco Shine */
  .button-animation::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
    transform: rotate(45deg);
    opacity: 0;
    transition: all 0.5s ease-out;
    z-index: 0;
  }

  .button-animation:hover::before {
    opacity: 1;
    top: -20%;
    left: -20%;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
  }
</style>

A complex, responsive carousel slider component for news/journalism websites, featuring a dark mode UI with a grayscale color scheme. It displays news articles with images, titles, descriptions, and categories, and is designed to reduce eye strain.

Open Preview

                <div class="relative w-full max-w-7xl mx-auto py-8 px-4 dark:bg-gray-900 bg-white sm:px-6 lg:px-8">
  <!-- Carousel Header -->
  <div class="flex items-center justify-between mb-8">
    <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
      Latest Headlines
    </h2>
    <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-gray-800 hover:bg-gray-700 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
      View All
      <svg class="ml-2 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
      </svg>
    </a>
  </div>

  <!-- Carousel Container (Simplified for static HTML, requires JS for actual carousel functionality) -->
  <!-- In a real scenario, this would be a JS-controlled carousel. For this HTML-only component, we'll show a responsive grid layout that implies a carousel structure. -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

    <!-- Carousel Item 1 -->
    <div class="group relative rounded-lg shadow-lg dark:shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 dark:bg-gray-800 bg-white border border-gray-200 dark:border-gray-700">
      <div class="aspect-w-16 aspect-h-9 w-full overflow-hidden">
        <img src="https://picsum.photos/600/400?random=1" alt="News Article 1" class="w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-300">
      </div>
      <div class="p-6">
        <div class="flex items-center mb-2">
          <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
            Technology
          </span>
          <span class="ml-auto text-sm text-gray-500 dark:text-gray-400">2 hours ago</span>
        </div>
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mt-1 mb-2 leading-tight">
          <a href="#" class="hover:text-gray-700 dark:hover:text-gray-300">
            <span class="absolute inset-0"></span>
            Breakthrough in AI Research Announced
          </a>
        </h3>
        <p class="mt-3 text-base text-gray-600 dark:text-gray-300 line-clamp-3">
          Researchers at the leading global institute have unveiled a groundbreaking development in artificial intelligence, promising to revolutionize several industries.
        </p>
        <div class="mt-6 flex items-center justify-between">
          <div class="flex items-center font-medium text-gray-900 dark:text-white">
            <img class="h-8 w-8 rounded-full bg-gray-50 dark:bg-gray-600 mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Author Avatar">
            Jane Doe
            <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">Editor</span>
          </div>
          <a href="#" class="text-sm font-medium text-gray-800 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300">
            Read More
          </a>
        </div>
      </div>
    </div>

    <!-- Carousel Item 2 -->
    <div class="group relative rounded-lg shadow-lg dark:shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 dark:bg-gray-800 bg-white border border-gray-200 dark:border-gray-700">
      <div class="aspect-w-16 aspect-h-9 w-full overflow-hidden">
        <img src="https://picsum.photos/600/400?random=2" alt="News Article 2" class="w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-300">
      </div>
      <div class="p-6">
        <div class="flex items-center mb-2">
          <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
            Politics
          </span>
          <span class="ml-auto text-sm text-gray-500 dark:text-gray-400">5 hours ago</span>
        </div>
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mt-1 mb-2 leading-tight">
          <a href="#" class="hover:text-gray-700 dark:hover:text-gray-300">
            <span class="absolute inset-0"></span>
            Global Leaders Discuss Climate Change at Summit
          </a>
        </h3>
        <p class="mt-3 text-base text-gray-600 dark:text-gray-300 line-clamp-3">
          Heads of state convened today for a critical summit to address the escalating climate crisis and pledge new initiatives.
        </p>
        <div class="mt-6 flex items-center justify-between">
          <div class="flex items-center font-medium text-gray-900 dark:text-white">
            <img class="h-8 w-8 rounded-full bg-gray-50 dark:bg-gray-600 mr-2" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Author Avatar">
            John Smith
            <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">Reporter</span>
          </div>
          <a href="#" class="text-sm font-medium text-gray-800 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300">
            Read More
          </a>
        </div>
      </div>
    </div>

    <!-- Carousel Item 3 -->
    <div class="group relative rounded-lg shadow-lg dark:shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 dark:bg-gray-800 bg-white border border-gray-200 dark:border-gray-700">
      <div class="aspect-w-16 aspect-h-9 w-full overflow-hidden">
        <img src="https://picsum.photos/600/400?random=3" alt="News Article 3" class="w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-300">
      </div>
      <div class="p-6">
        <div class="flex items-center mb-2">
          <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
            Health
          </span>
          <span class="ml-auto text-sm text-gray-500 dark:text-gray-400">1 day ago</span>
        </div>
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mt-1 mb-2 leading-tight">
          <a href="#" class="hover:text-gray-700 dark:hover:text-gray-300">
            <span class="absolute inset-0"></span>
            New Study Reveals Benefits of Mediterranean Diet
          </a>
        </h3>
        <p class="mt-3 text-base text-gray-600 dark:text-gray-300 line-clamp-3">
          A comprehensive new study has provided compelling evidence regarding the significant health benefits associated with adhering to a Mediterranean diet.
        </p>
        <div class="mt-6 flex items-center justify-between">
          <div class="flex items-center font-medium text-gray-900 dark:text-white">
            <img class="h-8 w-8 rounded-full bg-gray-50 dark:bg-gray-600 mr-2" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Author Avatar">
            David Lee
            <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">Correspondent</span>
          </div>
          <a href="#" class="text-sm font-medium text-gray-800 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300">
            Read More
          </a>
        </div>
      </div>
    </div>

  </div>

  <!-- Pagination/Navigation (Placeholder for a real carousel) -->
  <div class="mt-12 flex justify-center space-x-2">
    <button aria-label="Previous slide" class="p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
      </svg>
    </button>
    <span class="sr-only">Current slide: 1</span>
    <button aria-label="Slide 1" class="w-3 h-3 rounded-full bg-gray-800 dark:bg-gray-100 ring-2 ring-transparent ring-offset-2 ring-offset-gray-900 focus:outline-none focus:ring-gray-500"></button>
    <button aria-label="Slide 2" class="w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-500 hover:bg-gray-500 dark:hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"></button>
    <button aria-label="Slide 3" class="w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-500 hover:bg-gray-500 dark:hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"></button>
    <button aria-label="Next slide" class="p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
      </svg>
    </button>
  </div>
</div>

Feedback Components Component

A complex Material Design-inspired feedback component for forum/community platforms, featuring multiple interactive elements, complementary color scheme, and full responsiveness with dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans antialiased">

  <!-- Feedback Card Container -->
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden mb-8">

    <!-- Header Section -->
    <div class="bg-indigo-600 dark:bg-indigo-900 p-4 sm:p-6 text-white flex items-center justify-between">
      <div>
        <h2 class="text-2xl sm:text-3xl font-bold mb-1">Community Feedback</h2>
        <p class="text-indigo-100 text-sm sm:text-base">Help us improve by sharing your thoughts.</p>
      </div>
      <span class="material-icons-outlined text-white text-3xl sm:text-4xl">feedback</span>
    </div>

    <!-- Feedback Type/Category Selection -->
    <div class="border-b border-gray-200 dark:border-gray-700 px-4 sm:px-6 py-4">
      <div class="flex flex-wrap gap-2 text-sm sm:text-base">
        <button class="px-4 py-2 rounded-full font-medium text-indigo-700 bg-indigo-100 dark:bg-indigo-700 dark:text-indigo-100 shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75">
          Suggestion
        </button>
        <button class="px-4 py-2 rounded-full font-medium text-gray-700 bg-gray-200 dark:bg-gray-600 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75">
          Bug Report
        </button>
        <button class="px-4 py-2 rounded-full font-medium text-gray-700 bg-gray-200 dark:bg-gray-600 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75">
          Question
        </button>
        <button class="px-4 py-2 rounded-full font-medium text-gray-700 bg-gray-200 dark:bg-gray-600 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75">
          Other
        </button>
      </div>
    </div>

    <!-- Main Feedback Form -->
    <div class="p-4 sm:p-6">
      <form>
        <div class="mb-4">
          <label for="feedback-title" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Title <span class="text-red-500">*</span></label>
          <input type="text" id="feedback-title" placeholder="e.g., Improve search functionality" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-gray-50 transition duration-300 ease-in-out placeholder-gray-400 dark:placeholder-gray-500" required>
        </div>

        <div class="mb-4">
          <label for="feedback-description" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Description <span class="text-red-500">*</span></label>
          <textarea id="feedback-description" rows="6" placeholder="Provide a detailed description of your feedback, including steps to reproduce bugs if applicable." class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-gray-50 resize-y transition duration-300 ease-in-out placeholder-gray-400 dark:placeholder-gray-500" required></textarea>
        </div>

        <div class="mb-4">
          <label for="attachment" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Attachments (Optional)</label>
          <div class="flex items-center space-x-4">
            <label class="cursor-pointer bg-indigo-500 hover:bg-indigo-600 text-white font-semibold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75">
              Upload File
              <input type="file" id="attachment" class="hidden">
            </label>
            <span class="text-sm text-gray-500 dark:text-gray-400" id="file-name">No file chosen</span>
          </div>
        </div>

        <div class="mb-6 flex items-center justify-between">
          <label for="email-notification" class="inline-flex items-center cursor-pointer">
            <input type="checkbox" id="email-notification" class="form-checkbox h-5 w-5 text-indigo-600 rounded focus:ring-indigo-500 transition duration-150 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:checked:bg-indigo-600">
            <span class="ml-2 text-sm text-gray-900 dark:text-gray-300">Notify me of updates</span>
          </label>
          <div class="group relative inline-block">
            <spa class="material-icons-outlined text-gray-400 dark:text-gray-500 text-lg sm:text-xl cursor-help">info</span>
            <div class="absolute hidden group-hover:block bg-gray-700 dark:bg-gray-600 text-white text-xs rounded py-1 px-2 right-0 bottom-full mb-2 w-48 shadow-lg z-10 transition duration-300 ease-in-out opacity-0 group-hover:opacity-100 pointer-events-none">
              We'll send you email updates on the status of your feedback.
              <div class="absolute left-1/2 -ml-1 bottom-0 transform translate-y-full border-solid border-8 border-transparent border-t-gray-700 dark:border-t-gray-600"></div>
            </div>
          </div>
        </div>

        <div class="flex justify-end space-x-3">
          <button type="button" class="px-6 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg">
            Cancel
          </button>
          <button type="submit" class="px-6 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg">
            Submit Feedback
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- Recently Submitted Feedback Section (Example) -->
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <div class="bg-emerald-600 dark:bg-emerald-900 p-4 sm:p-6 text-white flex items-center justify-between">
      <div>
        <h3 class="text-xl sm:text-2xl font-bold mb-1">Recent Submissions</h3>
        <p class="text-emerald-100 text-sm sm:text-base">See what others are suggesting.</p>
      </div>
      <span class="material-icons-outlined text-white text-3xl sm:text-4xl">forum</span>
    </div>
    <div class="p-4 sm:p-6 space-y-4">

      <!-- Feedback Item 1 -->
      <div class="flex items-start space-x-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-sm border border-gray-200 dark:border-gray-600">
        <img class="w-10 h-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">John Doe <span class="text-indigo-600 dark:text-indigo-400 ml-2">• Suggestion</span></p>
          <p class="text-base font-medium text-gray-900 dark:text-gray-100">Add dark mode to the forum</p>
          <p class="text-sm text-gray-600 dark:text-gray-300 mt-1 line-clamp-2">It would be great to have a dark mode option to reduce eye strain, especially during late-night browsing. The current light theme is a bit too bright.</p>
          <div class="mt-2 flex items-center text-sm text-gray-500 dark:text-gray-400 space-x-4">
            <span>2 days ago</span>
            <div class="flex items-center space-x-1">
              <span class="material-icons-outlined text-base">thumb_up</span>
              <span>15</span>
            </div>
            <div class="flex items-center space-x-1">
              <span class="material-icons-outlined text-base">comment</span>
              <span>3</span>
            </div>
          </div>
          <div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-600">
            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Status: <span class="font-semibold text-green-600 dark:text-green-400">In Progress</span></p>
          </div>
        </div>
      </div>

      <!-- Feedback Item 2 -->
      <div class="flex items-start space-x-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-sm border border-gray-200 dark:border-gray-600">
        <img class="w-10 h-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Jane Smith <span class="text-emerald-600 dark:text-emerald-400 ml-2">• Bug Report</span></p>
          <p class="text-base font-medium text-gray-900 dark:text-gray-100">Profile picture not updating</p>
          <p class="text-sm text-gray-600 dark:text-gray-300 mt-1 line-clamp-2">When I try to upload a new profile picture, it appears to upload successfully but the old picture remains visible after refreshing the page. Tried multiple browsers.</p>
          <div class="mt-2 flex items-center text-sm text-gray-500 dark:text-gray-400 space-x-4">
            <span>5 hours ago</span>
            <div class="flex items-center space-x-1">
              <span class="material-icons-outlined text-base">thumb_up</span>
              <span>7</span>
            </div>
            <div class="flex items-center space-x-1">
              <span class="material-icons-outlined text-base">comment</span>
              <span>1</span>
            </div>
          </div>
          <div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-600">
            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Status: <span class="font-semibold text-orange-600 dark:text-orange-400">Investigating</span></p>
          </div>
        </div>
      </div>

      <!-- Feedback Item 3 -->
      <div class="flex items-start space-x-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-sm border border-gray-200 dark:border-gray-600">
        <img class="w-10 h-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/21.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Peter Jones <span class="text-purple-600 dark:text-purple-400 ml-2">• Question</span></p>
          <p class="text-base font-medium text-gray-900 dark:text-gray-100">How to embed videos in posts?</p>
          <p class="text-sm text-gray-600 dark:text-gray-300 mt-1 line-clamp-2">I'm trying to share a YouTube video in my post but the embed code doesn't seem to work. Is there a specific way to do this or is it not supported?</p>
          <div class="mt-2 flex items-center text-sm text-gray-500 dark:text-gray-400 space-x-4">
            <span>1 day ago</span>
            <div class="flex items-center space-x-1">
              <span class="material-icons-outlined text-base">thumb_up</span>
              <span>8</span>
            </div>
            <div class="flex items-center space-x-1">
              <span class="material-icons-outlined text-base">comment</span>
              <span>5</span>
            </div>
          </div>
          <div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-600">
            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Status: <span class="font-semibold text-blue-600 dark:text-blue-400">Answered</span></p>
          </div>
        </div>
      </div>

    </div>
    <div class="p-4 sm:p-6 text-center border-t border-gray-200 dark:border-gray-700">
      <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline text-sm font-medium">View All Feedback</a>
    </div>
  </div>

  <!-- Required for Material Icons -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">

  <!-- Dummy JS for file input label and tooltip (not part of the JSON output requirements, but for live demo functionality) -->
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const fileInput = document.getElementById('attachment');
      const fileNameSpan = document.getElementById('file-name');
      if (fileInput) {
        fileInput.addEventListener('change', (event) => {
          const fileName = event.target.files[0] ? event.target.files[0].name : 'No file chosen';
          fileNameSpan.textContent = fileName;
        });
      }
    });
  </script>

</div>

Glassmorphism Lightbox with Sepia Tones for Real Estate

A responsive image lightbox component with a glassmorphism design, featuring frosted glass-like translucent elements and sepia/brown color tones, suitable for real estate property image galleries. Includes dark mode support.

Open Preview

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

  <!-- Sample Component Trigger (Optional, for demonstration) -->
  <!-- In a real application, you'd likely trigger this with JS by adding/removing 'hidden' class -->
  <!-- For this pure HTML/CSS example, the lightbox is always visible but centered -->

  <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
    <!-- Overlay -->
    <div class="absolute inset-0 bg-stone-950/40 dark:bg-black/60 backdrop-blur-sm"></div>

    <!-- Lightbox Container -->
    <div class="relative w-full max-w-4xl max-h-[90vh] rounded-xl overflow-hidden shadow-2xl
                bg-stone-100/30 dark:bg-stone-800/20
                backdrop-filter backdrop-blur-lg backdrop-saturate-150
                border border-stone-200/50 dark:border-stone-700/50
                flex flex-col md:flex-row">

      <!-- Left: Image Display Area -->
      <div class="relative flex-shrink-0 w-full md:w-3/5 overflow-hidden group">
        <img src="https://picsum.photos/id/1018/800/600" alt="Property Main Image" class="w-full h-full object-cover object-center transition-transform duration-300 group-hover:scale-105">
        <!-- Navigation Arrows (can be implemented with JS for full functionality) -->
        <button aria-label="Previous image" class="absolute top-1/2 left-4 -translate-y-1/2 p-2 bg-white/20 dark:bg-black/20 rounded-full text-white hover:bg-white/40 dark:hover:bg-black/40 transition-colors focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-75">
          <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>
        <button aria-label="Next image" class="absolute top-1/2 right-4 -translate-y-1/2 p-2 bg-white/20 dark:bg-black/20 rounded-full text-white hover:bg-white/40 dark:hover:bg-black/40 transition-colors focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-75">
          <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="M9 5l7 7-7 7"></path></svg>
        </button>
      </div>

      <!-- Right: Details and Thumbnails -->
      <div class="flex-1 p-6 flex flex-col justify-between text-stone-800 dark:text-stone-200 overflow-y-auto custom-scrollbar">
        <!-- Close Button -->
        <button aria-label="Close Lightbox" class="absolute top-3 right-3 p-1 rounded-full text-stone-600 dark:text-stone-300 bg-white/40 dark:bg-black/40 hover:bg-white/60 dark:hover:bg-black/60 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-75">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
        </button>

        <div class="flex-grow">
          <h3 class="text-2xl md:text-3xl font-semibold mb-2 text-stone-900 dark:text-stone-100">Luxury Villa with Ocean View</h3>
          <p class="text-sm md:text-base text-stone-700 dark:text-stone-300 mb-4">123 Oceanfront Drive, Malibu, CA</p>

          <div class="grid grid-cols-2 gap-x-4 gap-y-2 text-sm text-stone-700 dark:text-stone-300 mb-4">
            <div>
              <p><strong class="text-stone-900 dark:text-stone-100">Price:</strong> $5,200,000</p>
              <p><strong class="text-stone-900 dark:text-stone-100">Beds:</strong> 4</p>
            </div>
            <div>
              <p><strong class="text-stone-900 dark:text-stone-100">Baths:</strong> 4.5</p>
              <p><strong class="text-stone-900 dark:text-stone-100">Area:</strong> 4,500 sq ft</p>
            </div>
          </div>

          <p class="text-stone-700 dark:text-stone-300 text-sm md:text-base leading-relaxed mb-6">
            Exquisite modern villa located in a prime Malibu location, boasting panoramic ocean views and unparalleled luxury. Features an open-concept design, gourmet kitchen, and expansive outdoor living spaces.
          </p>

          <!-- Thumbnails -->
          <div class="grid grid-cols-3 md:grid-cols-4 gap-3 mb-6">
            <img src="https://picsum.photos/id/1018/150/100" alt="Thumbnail 1" class="w-full h-16 md:h-20 object-cover rounded-md cursor-pointer border-2 border-stone-600 dark:border-stone-400 opacity-80 hover:opacity-100 transition-opacity duration-200">
            <img src="https://picsum.photos/id/292/150/100" alt="Thumbnail 2" class="w-full h-16 md:h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-stone-600 dark:hover:border-stone-400 opacity-80 hover:opacity-100 transition-all duration-200">
            <img src="https://picsum.photos/id/433/150/100" alt="Thumbnail 3" class="w-full h-16 md:h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-stone-600 dark:hover:border-stone-400 opacity-80 hover:opacity-100 transition-all duration-200">
            <img src="https://picsum.photos/id/1025/150/100" alt="Thumbnail 4" class="hidden md:block w-full h-16 md:h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-stone-600 dark:hover:border-stone-400 opacity-80 hover:opacity-100 transition-all duration-200">
            <img src="https://picsum.photos/id/95/150/100" alt="Thumbnail 5" class="hidden md:block w-full h-16 md:h-20 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-stone-600 dark:hover:border-stone-400 opacity-80 hover:opacity-100 transition-all duration-200">
          </div>
        </div>

        <!-- Agent Contact Info -->
        <div class="flex items-center pt-4 border-t border-stone-200 dark:border-stone-700 mt-auto">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Agent Emily Johnson" class="w-12 h-12 rounded-full mr-4 border-2 border-stone-400 dark:border-stone-600">
          <div>
            <p class="font-semibold text-stone-900 dark:text-stone-100">Emily Johnson</p>
            <p class="text-sm text-stone-700 dark:text-stone-400">Senior Real Estate Agent</p>
          </div>
          <a href="#" class="ml-auto bg-stone-700 hover:bg-stone-800 text-stone-50 py-2 px-4 rounded-full text-sm transition-colors duration-200 dark:bg-stone-500 dark:hover:bg-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-75">
            Contact Agent
          </a>
        </div>

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

  <!-- Custom Scrollbar Styles for glass effect where content overflows -->
  <style>
    .custom-scrollbar::-webkit-scrollbar {
      width: 8px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.1); /* Light, transparent track */
      border-radius: 10px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
      background-color: rgba(120, 100, 80, 0.5); /* Sepia-toned, semi-transparent thumb */
      border-radius: 10px;
      border: 2px solid rgba(255, 255, 255, 0.1);
    }
    .dark .custom-scrollbar::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.1); /* Dark, transparent track */
    }
    .dark .custom-scrollbar::-webkit-scrollbar-thumb {
      background-color: rgba(150, 130, 110, 0.5); /* Dark sepia-toned, semi-transparent thumb */
      border: 2px solid rgba(0, 0, 0, 0.1);
    }
  </style>

</div>

User Mentions Component

A responsive user mentions component designed for dark mode e-commerce interfaces, featuring earth tones and placeholder user avatars and product images. Provides a list of suggested mentions with user details and an associated product, suitable for tagging or collaborative features.

Open Preview

                <div class="font-sans antialiased bg-gray-100 dark:bg-gray-900 min-h-screen p-4 sm:p-6 md:p-8 flex items-center justify-center">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <div class="px-5 py-4 border-b border-gray-200 dark:border-gray-700">
      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Mention Users and Products</h3>
      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Tag someone or an item in your comment or review.</p>
    </div>
    <div class="p-5">
      <div class="relative mb-4">
        <input type="text" placeholder="Search for users or products..." class="w-full pl-10 pr-4 py-2 rounded-lg bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent transition-colors duration-200">
        <svg class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400 dark:text-gray-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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>
      <ul class="space-y-4 max-h-96 overflow-y-auto custom-scrollbar">
        <!-- Mention Item 1 -->
        <li class="flex items-start p-3 bg-gray-50 dark:bg-gray-900 rounded-lg shadow-sm hover:bg-amber-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
          <img class="h-12 w-12 rounded-full object-cover ring-2 ring-amber-400 dark:ring-amber-600 mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div class="flex-1 min-w-0">
            <p class="text-gray-900 dark:text-gray-100 font-semibold truncate">@sarah.johansson</p>
            <p class="text-sm text-gray-600 dark:text-gray-400 truncate">Active Buyer, 12 Orders</p>
            <div class="mt-2 flex items-center bg-gray-100 dark:bg-gray-800 rounded-md p-2">
              <img class="h-10 w-10 object-cover rounded mr-3" src="https://picsum.photos/id/1025/60/60" alt="Product Image">
              <div class="flex-1 min-w-0">
                <p class="text-sm text-gray-800 dark:text-gray-200 font-medium truncate">Organic Cotton Tee</p>
                <p class="text-xs text-gray-500 dark:text-gray-400 truncate">$29.99</p>
              </div>
            </div>
          </div>
        </li>
        <!-- Mention Item 2 -->
        <li class="flex items-start p-3 bg-gray-50 dark:bg-gray-900 rounded-lg shadow-sm hover:bg-amber-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
          <img class="h-12 w-12 rounded-full object-cover ring-2 ring-amber-400 dark:ring-amber-600 mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div class="flex-1 min-w-0">
            <p class="text-gray-900 dark:text-gray-100 font-semibold truncate">@mark_anderson</p>
            <p class="text-sm text-gray-600 dark:text-gray-400 truncate">Community Expert, 5 Reviews</p>
            <div class="mt-2 flex items-center bg-gray-100 dark:bg-gray-800 rounded-md p-2">
              <img class="h-10 w-10 object-cover rounded mr-3" src="https://picsum.photos/id/1040/60/60" alt="Product Image">
              <div class="flex-1 min-w-0">
                <p class="text-sm text-gray-800 dark:text-gray-200 font-medium truncate">Handcrafted Leather Wallet</p>
                <p class="text-xs text-gray-500 dark:text-gray-400 truncate">$59.00</p>
              </div>
            </div>
          </div>
        </li>
        <!-- Mention Item 3 (Product Only Example) -->
        <li class="flex items-start p-3 bg-gray-50 dark:bg-gray-900 rounded-lg shadow-sm hover:bg-amber-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
          <img class="h-12 w-12 rounded-full object-cover ring-2 ring-amber-400 dark:ring-amber-600 flex-shrink-0 mr-4" src="https://picsum.photos/id/1018/60/60" alt="Placeholder Product Image">
          <div class="flex-1 min-w-0">
            <p class="text-gray-900 dark:text-gray-100 font-semibold truncate">"The Adventurer" Backpack</p>
            <p class="text-sm text-gray-600 dark:text-gray-400 truncate">Outdoor Gear</p>
            <div class="mt-2 flex items-center bg-gray-100 dark:bg-gray-800 rounded-md p-2">
              <img class="h-10 w-10 object-cover rounded mr-3" src="https://picsum.photos/id/1015/60/60" alt="Related Product Image">
              <div class="flex-1 min-w-0">
                <p class="text-sm text-gray-800 dark:text-gray-200 font-medium truncate">Compact Foldable Chair</p>
                <p class="text-xs text-gray-500 dark:text-gray-400 truncate">$35.50</p>
              </div>
            </div>
          </div>
        </li>
         <!-- Mention Item 4 -->
        <li class="flex items-start p-3 bg-gray-50 dark:bg-gray-900 rounded-lg shadow-sm hover:bg-amber-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
          <img class="h-12 w-12 rounded-full object-cover ring-2 ring-amber-400 dark:ring-amber-600 mr-4" src="https://randomuser.me/api/portraits/women/5.jpg" alt="User Avatar">
          <div class="flex-1 min-w-0">
            <p class="text-gray-900 dark:text-gray-100 font-semibold truncate">@eco_living</p>
            <p class="text-sm text-gray-600 dark:text-gray-400 truncate">Sustainability Advocate</p>
            <div class="mt-2 flex items-center bg-gray-100 dark:bg-gray-800 rounded-md p-2">
              <img class="h-10 w-10 object-cover rounded mr-3" src="https://picsum.photos/id/237/60/60" alt="Product Image">
              <div class="flex-1 min-w-0">
                <p class="text-sm text-gray-800 dark:text-gray-200 font-medium truncate">Recycled Glass Bottle</p>
                <p class="text-xs text-gray-500 dark:text-gray-400 truncate">$18.50</p>
              </div>
            </div>
          </div>
        </li>
        <!-- Mention Item 5 -->
        <li class="flex items-start p-3 bg-gray-50 dark:bg-gray-900 rounded-lg shadow-sm hover:bg-amber-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
          <img class="h-12 w-12 rounded-full object-cover ring-2 ring-amber-400 dark:ring-amber-600 mr-4" src="https://randomuser.me/api/portraits/men/21.jpg" alt="User Avatar">
          <div class="flex-1 min-w-0">
            <p class="text-gray-900 dark:text-gray-100 font-semibold truncate">@tech_gurus</p>
            <p class="text-sm text-gray-600 dark:text-gray-400 truncate">Gadget Reviewer</p>
            <div class="mt-2 flex items-center bg-gray-100 dark:bg-gray-800 rounded-md p-2">
              <img class="h-10 w-10 object-cover rounded mr-3" src="https://picsum.photos/id/97/60/60" alt="Product Image">
              <div class="flex-1 min-w-0">
                <p class="text-sm text-gray-800 dark:text-gray-200 font-medium truncate">Wireless Noise-Cancelling Headphones</p>
                <p class="text-xs text-gray-500 dark:text-gray-400 truncate">$199.99</p>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="px-5 py-4 bg-gray-100 dark:bg-gray-800 flex justify-end">
      <button class="px-5 py-2 rounded-lg bg-transparent border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
        Dismiss
      </button>
    </div>
  </div>
</div>

<style>
/* Custom Scrollbar for better aesthetics and cross-browser consistency */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.dark .custom-scrollbar::-webkit-scrollbar-track {
  background: #374151; /* gray-700 */
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #d4d4d4;
  border-radius: 10px;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
  background: #4b5563; /* gray-600 */
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #adadad;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #6b7280; /* gray-500 */
}
</style>

1 ... 46 47 48 49 50 ... 335

Search Components

Categories

All Components

Memphis_Muted_Consulting_Content_Display

Cryptocurrency Sidebar Component

File Viewer Component

Retro_Healthcare_Auth_Component

Sticky Navigation Component

ArtDecoECommerceButtons

Carousel Slider Component

Feedback Components Component

Glassmorphism Lightbox with Sepia Tones for Real Estate

User Mentions Component