Search Components

All Components

Browse all available Tailwind CSS components

User Profiles Component

A responsive and minimalist user profiles component for social media, featuring multiple profiles with user information, follow buttons, and dark mode support. Uses an analogous color scheme.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-slate-900 dark:to-gray-900 min-h-screen font-sans">
  <div class="max-w-6xl mx-auto">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-8 text-center">
      Featured Profiles
    </h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">

      <!-- Profile Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6 flex flex-col items-center text-center border border-gray-100 dark:border-gray-700">
        <img class="w-24 h-24 rounded-full object-cover mb-4 ring-2 ring-indigo-300 dark:ring-purple-500" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Profile picture of Jane Doe">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Jane Doe</h3>
        <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">@janedo_e</p>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">Passionate photographer exploring the world's hidden beauty through my lens. Sharing moments, one click at a time.</p>
        <div class="flex justify-center gap-4 mb-4">
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">1.2K</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Followers</p>
          </div>
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">350</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Following</p>
          </div>
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">98</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Posts</p>
          </div>
        </div>
        <button class="w-full py-2 px-4 rounded-lg bg-indigo-500 text-white font-medium hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-300 dark:bg-purple-600 dark:hover:bg-purple-700">
          Follow
        </button>
      </div>

      <!-- Profile Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6 flex flex-col items-center text-center border border-gray-100 dark:border-gray-700">
        <img class="w-24 h-24 rounded-full object-cover mb-4 ring-2 ring-purple-300 dark:ring-indigo-500" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Profile picture of John Smith">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">John Smith</h3>
        <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">@johns_dev</p>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">Frontend developer building engaging user experiences. Passionate about clean code and modern web technologies.</p>
        <div class="flex justify-center gap-4 mb-4">
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">870</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Followers</p>
          </div>
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">210</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Following</p>
          </div>
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">65</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Posts</p>
          </div>
        </div>
        <button class="w-full py-2 px-4 rounded-lg bg-indigo-500 text-white font-medium hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-300 dark:bg-purple-600 dark:hover:bg-purple-700">
          Follow
        </button>
      </div>

      <!-- Profile Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6 flex flex-col items-center text-center border border-gray-100 dark:border-gray-700">
        <img class="w-24 h-24 rounded-full object-cover mb-4 ring-2 ring-indigo-300 dark:ring-purple-500" src="https://randomuser.me/api/portraits/women/3.jpg" alt="Profile picture of Sarah Lee">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Sarah Lee</h3>
        <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">@sarah_art</p>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">Digital artist and illustrator. Turning imagination into vivid colors and captivating visuals. Always learning, always creating.</p>
        <div class="flex justify-center gap-4 mb-4">
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">1.5K</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Followers</p>
          </div>
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">400</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Following</p>
          </div>
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">120</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Posts</p>
          </div>
        </div>
        <button class="w-full py-2 px-4 rounded-lg bg-indigo-500 text-white font-medium hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-300 dark:bg-purple-600 dark:hover:bg-purple-700">
          Follow
        </button>
      </div>

      <!-- Profile Card 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6 flex flex-col items-center text-center border border-gray-100 dark:border-gray-700">
        <img class="w-24 h-24 rounded-full object-cover mb-4 ring-2 ring-purple-300 dark:ring-indigo-500" src="https://randomuser.me/api/portraits/men/4.jpg" alt="Profile picture of Mike Ross">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Mike Ross</h3>
        <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">@mikero_ss</p>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">Travel enthusiast documenting journeys across continents. Seeking adventure and sharing the beauty of different cultures.</p>
        <div class="flex justify-center gap-4 mb-4">
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">950</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Followers</p>
          </div>
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">280</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Following</p>
          </div>
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">80</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Posts</p>
          </div>
        </div>
        <button class="w-full py-2 px-4 rounded-lg bg-indigo-500 text-white font-medium hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-300 dark:bg-purple-600 dark:hover:bg-purple-700">
          Follow
        </button>
      </div>

      <!-- Profile Card 5 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6 flex flex-col items-center text-center border border-gray-100 dark:border-gray-700">
        <img class="w-24 h-24 rounded-full object-cover mb-4 ring-2 ring-indigo-300 dark:ring-purple-500" src="https://randomuser.me/api/portraits/women/5.jpg" alt="Profile picture of Emily White">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Emily White</h3>
        <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">@emily_reads</p>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">Book lover and aspiring writer. Diving into new worlds, one page at a time. Sharing reviews and literary thoughts.</p>
        <div class="flex justify-center gap-4 mb-4">
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">720</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Followers</p>
          </div>
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">190</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Following</p>
          </div>
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">55</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Posts</p>
          </div>
        </div>
        <button class="w-full py-2 px-4 rounded-lg bg-indigo-500 text-white font-medium hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-300 dark:bg-purple-600 dark:hover:bg-purple-700">
          Follow
        </button>
      </div>

      <!-- Profile Card 6 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6 flex flex-col items-center text-center border border-gray-100 dark:border-gray-700">
        <img class="w-24 h-24 rounded-full object-cover mb-4 ring-2 ring-purple-300 dark:ring-indigo-500" src="https://randomuser.me/api/portraits/men/6.jpg" alt="Profile picture of David Green">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">David Green</h3>
        <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">@david_music</p>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">Musician and composer. Creating melodies that tell stories. Exploring sounds from classical to electronic.</p>
        <div class="flex justify-center gap-4 mb-4">
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">1.1K</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Followers</p>
          </div>
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">300</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Following</p>
          </div>
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">110</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Posts</p>
          </div>
        </div>
        <button class="w-full py-2 px-4 rounded-lg bg-indigo-500 text-white font-medium hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-300 dark:bg-purple-600 dark:hover:bg-purple-700">
          Follow
        </button>
      </div>

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

Playful Grayscale Crypto Navigation Component

A playful and friendly grayscale navigation component for cryptocurrency and blockchain applications, featuring rounded elements, interactive states, full responsiveness, and dark mode support.

Open Preview

                <nav class="bg-gray-100 dark:bg-gray-900 shadow-md rounded-b-3xl p-4 md:p-6 lg:p-8 font-sans transition-colors duration-300">
  <div class="container mx-auto flex flex-col md:flex-row items-center justify-between">
    <div class="flex items-center justify-between w-full md:w-auto mb-4 md:mb-0">
      <a href="#" class="text-gray-800 dark:text-gray-200 text-3xl font-extrabold flex items-center group">
        <svg class="w-9 h-9 mr-2 text-gray-600 dark:text-gray-400 group-hover:text-gray-800 dark:group-hover:text-gray-200 transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 8h6m-5 0v3m-2.83 5.46a3 3 0 01-4 0c-1.5-1.5-1-4.75-.8-6.68A7.832 7.832 0 0113 4a7.832 7.832 0 015.63 2.78c.2.93.43 2.15.8 3.82.26 1.15.53 2.3.84 3.42.3.93.67 1.8.96 2.58A5.733 5.733 0 0122 17.5c0 2.22-1.78 4-4 4h-2m-7 0H6a4 4 0 01-4-4v-4l-.52-1.04a1 1 0 01-.13-.46c0-.25.1-.48.27-.66.17-.18.4-.28.65-.28.25 0 .48.1.65.28l.27.27m7.53 1.05a3 3 0 01-4 0c-1.5-1.5-1-4.75-.8-6.68A7.832 7.832 0 0113 4a7.832 7.832 0 015.63 2.78c.2.93.43 2.15.8 3.82.26 1.15.53 2.3.84 3.42.3.93.67 1.8.96 2.58A5.733 5.733 0 0122 17.5c0 2.22-1.78 4-4 4h-2m-7 0H6a4 4 0 01-4-4v-4l-.52-1.04a1 1 0 01-.13-.46c0-.25.1-.48.27-.66.17-.18.4-.28.65-.28.25 0 .48.1.65.28l.27.27"></path>
        </svg>
        CoinWave
      </a>
      <button id="navbar-toggle" class="md:hidden focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 rounded-full p-2 ml-4">
        <svg class="w-8 h-8 text-gray-600 dark:text-gray-400 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
        </svg>
      </button>
    </div>

    <div id="navbar-menu" class="hidden md:flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-8 lg:space-x-12 w-full md:w-auto transition-all duration-300 ease-in-out">
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium text-lg px-4 py-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200">Dashboard</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium text-lg px-4 py-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200">Markets</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium text-lg px-4 py-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200">Wallet</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium text-lg px-4 py-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200">Trade</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium text-lg px-4 py-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200">Academy</a>

      <div class="flex items-center space-x-4 mt-4 md:mt-0">
        <button class="p-2 rounded-full bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 transition-colors duration-200">
          <svg class="w-7 h-7" 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 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
          </svg>
        </button>
        <img src="https://randomuser.me/api/portraits/men/7.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-400 dark:border-gray-600 object-cover hover:scale-105 transition-transform duration-200 cursor-pointer">
        <button id="theme-toggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 transition-colors duration-200">
          <svg class="w-7 h-7 hidden dark:block" 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 3v1m0 16v1m9-9h1M3 12H2m8.006-8.226l-.707-.707m-4.004 4.004l-.707-.707m11.313 11.313l-.707-.707m-4.004-4.004l-.707-.707M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <svg class="w-7 h-7 dark:hidden" 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>
    </div>
  </div>
</nav>

<script>
  // Basic JavaScript for toggle functionality (not part of the HTML component, but for interactivity demonstration)
  const navbarToggle = document.getElementById('navbar-toggle');
  const navbarMenu = document.getElementById('navbar-menu');
  const themeToggle = document.getElementById('theme-toggle');

  navbarToggle.addEventListener('click', () => {
    navbarMenu.classList.toggle('hidden');
    navbarMenu.classList.toggle('flex');
    navbarMenu.classList.toggle('flex-col');
  });

  // Dark mode functionality
  function setTheme(theme) {
    localStorage.setItem('theme', theme);
    if (theme === 'dark') {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  }

  // On page load or when dark mode is changed
  const storedTheme = localStorage.getItem('theme');
  if (storedTheme) {
    setTheme(storedTheme);
  } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    setTheme('dark');
  } else {
    setTheme('light');
  }

  themeToggle.addEventListener('click', () => {
    const currentTheme = localStorage.getItem('theme');
    setTheme(currentTheme === 'dark' ? 'light' : 'dark');
  });
</script>

Session Timeout Alert Component - Watercolor/Artistic

A complex, responsive session timeout alert component for e-commerce, featuring a watercolor/artistic design with a gradient rainbow color scheme and dark mode support. Includes options to extend or log out.

Open Preview

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-75 dark:bg-black dark:bg-opacity-85 font-sans">
  <div class="relative w-full max-w-md p-6 overflow-hidden rounded-3xl shadow-2xl backdrop-blur-sm dark:shadow-purple-900/50 transform transition-all duration-300 ease-in-out scale-100 opacity-100
      bg-gradient-to-br from-purple-200 via-pink-100 to-yellow-100 dark:from-purple-900 dark:via-blue-800 dark:to-green-800
      border border-purple-300 dark:border-purple-700
      flex flex-col items-center text-center
      " style="background-image: url('https://picsum.photos/seed/watercolor_bg/800/600?blur=1'); background-size: cover; background-position: center; border-radius: 2rem;">

        <!-- Artistic Overlay / Texture -->
        <div class="absolute inset-0 bg-gradient-to-br from-red-500/20 via-yellow-500/20 to-blue-500/20 opacity-70 dark:opacity-50" style="mask-image: url('data:image/svg+xml;utf8,<svg viewBox=\'0 0 200 200\' xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'noiseFilter\'><feTurbulence type=\'fractalNoise\' baseFrequency=\'0.5\' numOctaves=\'3\' stitchTiles=\'stitch\'/><feComposite operator=\'in\' in2=\'SourceGraphic\' result=\'comp\'></feComposite></filter><rect width=\'100%\' height=\'100%\' filter=\'url(#noiseFilter)\'/></svg>'); mask-repeat: no-repeat; mask-size: cover; mask-position: center; z-index: 0; border-radius: 2rem;"></div>

        <!-- Content Wrapper with internal padding -->
        <div class="relative z-10 p-4 sm:p-6 lg:p-8 ">
            <div class="relative mb-6 w-24 h-24 sm:w-28 sm:h-28 mx-auto -mt-16 sm:-mt-20 lg:-mt-24 rounded-full p-2
                        bg-gradient-to-br from-red-400 via-orange-400 to-yellow-400 dark:from-red-600 dark:via-orange-600 dark:to-yellow-600
                        shadow-lg ring-4 ring-white dark:ring-gray-800 transform rotate-3 hover:rotate-0 transition-transform duration-300">
                <svg class="h-full w-full text-white dark:text-gray-200 p-2" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2Zm0 13a1 1 0 1 1 0 2a1 1 0 0 1 0-2Zm0-8a1 1 0 0 1 1 1v4a1 1 0 0 1-2 0V8a1 1 0 0 1 1-1Z"/>
                </svg>
            </div>

            <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-4
                       bg-clip-text text-transparent
                       bg-gradient-to-r from-purple-700 via-pink-500 to-red-500
                       dark:from-blue-400 dark:via-green-300 dark:to-yellow-200 line-clamp-2">
                Session Ending Soon!
            </h2>

            <p class="text-base sm:text-lg lg:text-xl text-gray-700 dark:text-gray-200 mb-6 font-medium leading-relaxed max-w-prose mx-auto">
                Your session is about to expire. Would you like to stay logged in or log out?
            </p>

            <div class="flex flex-col sm:flex-row justify-center gap-4 w-full">
                <button class="flex-1 py-3 px-6 sm:py-4 sm:px-8 rounded-full font-bold text-lg sm:text-xl transform hover:scale-105 transition-all duration-300 ease-in-out
                                bg-gradient-to-br from-blue-400 via-teal-400 to-green-400 text-white shadow-md
                                hover:from-blue-500 hover:via-teal-500 hover:to-green-500
                                focus:outline-none focus:ring-4 focus:ring-blue-300 focus:ring-opacity-75
                                dark:from-blue-600 dark:via-teal-600 dark:to-green-600 dark:hover:from-blue-700 dark:hover:via-teal-700 border border-blue-500 dark:border-blue-700">
                    Extend Session
                </button>
                <button class="flex-1 py-3 px-6 sm:py-4 sm:px-8 rounded-full font-bold text-lg sm:text-xl transform hover:scale-105 transition-all duration-300 ease-in-out
                                bg-white text-gray-800 shadow-md border border-gray-300
                                hover:bg-gray-100 hover:text-gray-900
                                focus:outline-none focus:ring-4 focus:ring-gray-300 focus:ring-opacity-75
                                dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white">
                    Log Out
                </button>
            </div>

            <div class="mt-8 text-sm sm:text-base text-gray-500 dark:text-gray-400">
                <p class="mb-2"><span class="font-semibold">Automatic logout in:</span> <span class="text-purple-600 dark:text-blue-400 font-bold text-lg">02:30</span></p>
                <p>Enjoy your shopping experience!</p>
            </div>

            <!-- Artistic Footer Element -->
            <div class="mt-8 h-2 w-3/4 mx-auto rounded-full
                        bg-gradient-to-r from-red-300 via-purple-300 to-blue-300
                        dark:from-red-600 dark:via-purple-600 dark:to-blue-600
                        shadow-inner opacity-80"></div>
        </div>
    </div>
</div>

Data Visualization Components Component

A simple, clean, code-inspired data visualization component for documentation/wiki sites, featuring monospace fonts, terminal aesthetics, and sepia/brown color tones, with full responsiveness and dark mode support.

Open Preview

                <div class="font-mono p-4 sm:p-6 md:p-8 bg-amber-50 text-amber-900 dark:bg-stone-900 dark:text-stone-100 min-h-screen">

  <div class="max-w-4xl mx-auto border border-amber-200 dark:border-stone-700 shadow-md transform hover:shadow-lg transition-all duration-300 ease-in-out">
    <!-- Header/Title Bar -->
    <div class="flex items-center justify-between px-4 py-2 bg-amber-100 dark:bg-stone-800 border-b border-amber-200 dark:border-stone-700">
      <div class="flex space-x-1.5">
        <span class="block w-3 h-3 rounded-full bg-red-400"></span>
        <span class="block w-3 h-3 rounded-full bg-yellow-400"></span>
        <span class="block w-3 h-3 rounded-full bg-green-400"></span>
      </div>
      <div class="text-xs text-amber-700 dark:text-stone-300">data_viz_component.sh</div>
      <div class="flex space-x-2 text-amber-700 dark:text-stone-300 text-sm">
        <span>_</span>
        <span>&#9633;</span>
        <span>X</span>
      </div>
    </div>

    <!-- Content Area -->
    <div class="p-4 sm:p-6 bg-amber-50 dark:bg-stone-900 overflow-x-auto">
      <pre class="text-sm whitespace-pre-wrap">
<span class="text-amber-600 dark:text-orange-400">$</span> <span class="text-orange-700 dark:text-amber-200">cat</span> data_summary.json
{
  <span class="text-orange-700 dark:text-amber-200">"project"</span>: <span class="text-orange-500 dark:text-orange-300">"Documentation Portal"</span>,
  <span class="text-orange-700 dark:text-amber-200">"version"</span>: <span class="text-orange-500 dark:text-orange-300">"1.0.0"</span>,
  <span class="text-orange-700 dark:text-amber-200">"last_updated"</span>: <span class="text-orange-500 dark:text-orange-300">"2023-10-27"</span>,
  <span class="text-orange-700 dark:text-amber-200">"data_points"</span>: <span class="text-orange-500 dark:text-orange-300">567</span>,
  <span class="text-orange-700 dark:text-amber-200">"avg_daily_views"</span>: <span class="text-orange-500 dark:text-orange-300">1234</span>,
  <span class="text-orange-700 dark:text-amber-200">"status"</span>: <span class="text-orange-500 dark:text-orange-300">"Operational"</span>,
  <span class="text-orange-700 dark:text-amber-200">"components"</span>: [
    <span class="text-orange-500 dark:text-orange-300">"Charts"</span>,
    <span class="text-orange-500 dark:text-orange-300">"Tables"</span>,
    <span class="text-orange-500 dark:text-orange-300">"Graphs"</span>
  ]
}
<span class="text-amber-600 dark:text-orange-400">$</span> <span class="text-orange-700 dark:text-amber-200">echo</span> "Generating simple data visualization..."
Generating simple data visualization...

<span class="text-amber-600 dark:text-orange-400">$</span> <span class="text-orange-700 dark:text-amber-200">./render_viz.sh</span>

<span class="block mt-4 w-full h-48 bg-amber-200 dark:bg-stone-700 relative overflow-hidden">
  <!-- Simple Bar Chart Placeholder -->
  <div class="absolute bottom-0 w-full flex items-end justify-around h-full p-2">
    <div class="flex flex-col items-center h-full justify-end">
      <div class="w-4 sm:w-6 h-1/4 bg-amber-400 dark:bg-amber-600 rounded-sm mb-1"></div>
      <span class="text-xs text-amber-700 dark:text-stone-300">C1</span>
    </div>
    <div class="flex flex-col items-center h-full justify-end">
      <div class="w-4 sm:w-6 h-2/3 bg-amber-500 dark:bg-amber-700 rounded-sm mb-1"></div>
      <span class="text-xs text-amber-700 dark:text-stone-300">C2</span>
    </div>
    <div class="flex flex-col items-center h-full justify-end">
      <div class="w-4 sm:w-6 h-1/2 bg-amber-400 dark:bg-amber-600 rounded-sm mb-1"></div>
      <span class="text-xs text-amber-700 dark:text-stone-300">C3</span>
    </div>
    <div class="flex flex-col items-center h-full justify-end">
      <div class="w-4 sm:w-6 h-3/4 bg-amber-500 dark:bg-amber-700 rounded-sm mb-1"></div>
      <span class="text-xs text-amber-700 dark:text-stone-300">C4</span>
    </div>
    <div class="flex flex-col items-center h-full justify-end">
      <div class="w-4 sm:w-6 h-1/3 bg-amber-400 dark:bg-amber-600 rounded-sm mb-1"></div>
      <span class="text-xs text-amber-700 dark:text-stone-300">C5</span>
    </div>
  </div>
</span>

<span class="text-amber-600 dark:text-orange-400">$</span> <span class="text-orange-700 dark:text-amber-200">echo</span> "Visualization complete."
Visualization complete.
      </pre>
    </div>

    <!-- Footer/Status Bar -->
    <div class="flex items-center justify-between px-4 py-2 bg-amber-100 dark:bg-stone-800 border-t border-amber-200 dark:border-stone-700 text-xs text-amber-700 dark:text-stone-300">
      <span>user@host:~/docs/viz</span>
      <span>[Status: OK]</span>
    </div>
  </div>

</div>

User Mentions Component

A simple, responsive User Mentions component with a glassmorphism design, corporate blue color scheme, and dark mode support, suitable for dashboard interfaces.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-blue-950 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-sm mx-auto p-6 rounded-xl shadow-2xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 border border-blue-200 dark:bg-gray-800 dark:bg-opacity-30 dark:border-blue-700 transform transition-all duration-300 hover:scale-105">
    <h3 class="text-xl font-semibold text-blue-800 dark:text-blue-200 mb-6 text-center tracking-wide">
      Recent Mentions
    </h3>
    <div class="space-y-4">
      <!-- Mention Item 1 -->
      <div class="flex items-center space-x-4 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-40 p-3 rounded-lg shadow-md transition-all duration-200 hover:bg-opacity-40 dark:hover:bg-opacity-50">
        <img class="w-10 h-10 rounded-full border-2 border-blue-400 dark:border-blue-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-blue-900 dark:text-blue-100 font-medium text-sm sm:text-base">@john_doe <span class="text-xs text-blue-700 dark:text-blue-300 ml-1">1h ago</span></p>
          <p class="text-blue-700 dark:text-blue-300 text-sm overflow-hidden text-ellipsis whitespace-nowrap">Mentioned you in a report update.</p>
        </div>
      </div>

      <!-- Mention Item 2 -->
      <div class="flex items-center space-x-4 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-40 p-3 rounded-lg shadow-md transition-all duration-200 hover:bg-opacity-40 dark:hover:bg-opacity-50">
        <img class="w-10 h-10 rounded-full border-2 border-blue-400 dark:border-blue-500" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-blue-900 dark:text-blue-100 font-medium text-sm sm:text-base">@jane_smith <span class="text-xs text-blue-700 dark:text-blue-300 ml-1">3h ago</span></p>
          <p class="text-blue-700 dark:text-blue-300 text-sm overflow-hidden text-ellipsis whitespace-nowrap">Asked for your feedback on the new design.</p>
        </div>
      </div>

      <!-- Mention Item 3 -->
      <div class="flex items-center space-x-4 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-40 p-3 rounded-lg shadow-md transition-all duration-200 hover:bg-opacity-40 dark:hover:bg-opacity-50">
        <img class="w-10 h-10 rounded-full border-2 border-blue-400 dark:border-blue-500" src="https://randomuser.me/api/portraits/men/8.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-blue-900 dark:text-blue-100 font-medium text-sm sm:text-base">@alex_williams <span class="text-xs text-blue-700 dark:text-blue-300 ml-1">Yesterday</span></p>
          <p class="text-blue-700 dark:text-blue-300 text-sm overflow-hidden text-ellipsis whitespace-nowrap">Shared a useful resource in the team chat.</p>
        </div>
      </div>
    </div>
    <button class="mt-8 w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow-lg transform transition-all duration-300 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
      View All Mentions
    </button>
  </div>
</div>

Interactive Components Component

A complex, interactive Neumorphism-style component with a vibrant color scheme, designed for food/restaurant websites. It includes interactive buttons, sliders, and selection elements, featuring dark mode support and full responsiveness.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-indigo-200 to-purple-300 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans antialiased text-gray-800 dark:text-gray-200">

  <!-- Component Wrapper -->
  <div class="max-w-4xl mx-auto p-6 lg:p-8 rounded-3xl shadow-xl border border-white dark:border-gray-700
              bg-gradient-to-br from-indigo-100 to-purple-200 dark:from-gray-850 dark:to-gray-950
              transform transition-all duration-300 hover:shadow-2xl hover:scale-100 dark:hover:shadow-lg">

    <h1 class="text-4xl lg:text-5xl font-extrabold mb-8 text-center
               text-indigo-700 dark:text-purple-400
               text-shadow-md drop-shadow-lg
               relative after:content-[''] after:absolute after:bottom-[-8px] after:left-1/2 after:-translate-x-1/2 
               after:w-16 after:h-1.5 after:rounded-full after:bg-purple-500 dark:after:bg-indigo-300">
      Order delicious food!</h1>

    <!-- Category Selection -->
    <div class="mb-10">
      <h2 class="text-2xl font-bold mb-4 text-purple-700 dark:text-indigo-400">Categories</h2>
      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">

        <!-- Category Card 1 -->
        <button class="category-button group">
          <img src="https://picsum.photos/id/1080/100/100" alt="Burger" class="w-16 h-16 rounded-full mx-auto mb-2 object-cover transition-transform duration-300 group-hover:scale-110">
          <span class="text-lg font-semibold text-purple-800 dark:text-indigo-200 group-hover:text-purple-900 group-hover:dark:text-indigo-100">Burgers</span>
        </button>

        <!-- Category Card 2 -->
        <button class="category-button group">
          <img src="https://picsum.photos/id/1040/100/100" alt="Pizza" class="w-16 h-16 rounded-full mx-auto mb-2 object-cover transition-transform duration-300 group-hover:scale-110">
          <span class="text-lg font-semibold text-purple-800 dark:text-indigo-200 group-hover:text-purple-900 group-hover:dark:text-indigo-100">Pizzas</span>
        </button>

        <!-- Category Card 3 -->
        <button class="category-button group">
          <img src="https://picsum.photos/id/1050/100/100" alt="Sushi" class="w-16 h-16 rounded-full mx-auto mb-2 object-cover transition-transform duration-300 group-hover:scale-110">
          <span class="text-lg font-semibold text-purple-800 dark:text-indigo-200 group-hover:text-purple-900 group-hover:dark:text-indigo-100">Sushi</span>
        </button>

        <!-- Category Card 4 -->
        <button class="category-button group">
          <img src="https://picsum.photos/id/1049/100/100" alt="Desserts" class="w-16 h-16 rounded-full mx-auto mb-2 object-cover transition-transform duration-300 group-hover:scale-110">
          <span class="text-lg font-semibold text-purple-800 dark:text-indigo-200 group-hover:text-purple-900 group-hover:dark:text-indigo-100">Desserts</span>
        </button>
      </div>
    </div>

    <!-- Price Range Slider (Conceptual) -->
    <div class="mb-10">
      <h2 class="text-2xl font-bold mb-4 text-purple-700 dark:text-indigo-400">Price Range</h2>
      <div class="p-4 rounded-xl shadow-inner-neumorphism dark:shadow-inner-neumorphism-dark flex items-center justify-center">
        <label for="price-range" class="sr-only">Price Range</label>
        <input type="range" id="price-range" min="5" max="50" value="25" class="w-full h-3 rounded-full cursor-pointer
              bg-purple-300 dark:bg-gray-700
              accent-purple-600 dark:accent-indigo-400
              shadow-neumorphism-sm dark:shadow-neumorphism-sm-dark
              focus:outline-none focus:ring-2 focus:ring-purple-400 dark:focus:ring-indigo-300
              transition duration-200 ease-in-out
              [&::-webkit-slider-thumb]:w-6 [&::-webkit-slider-thumb]:h-6 [&::-webkit-slider-thumb]:-mt-1.5 
              [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-purple-600 dark:[&::-webkit-slider-thumb]:bg-indigo-400
              [&::-webkit-slider-thumb]:shadow-neumorphism dark:[&::-webkit-slider-thumb]:shadow-neumorphism-dark
              [&::-webkit-slider-thumb]:appearance-none
              [&::-moz-range-thumb]:w-6 [&::-moz-range-thumb]:h-6 [&::-moz-range-thumb]:-mt-1.5 
              [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-purple-600 dark:[&::-moz-range-thumb]:bg-indigo-400
              [&::-moz-range-thumb]:shadow-neumorphism dark:[&::-moz-range-thumb]:shadow-neumorphism-dark
              [&::-moz-range-thumb]:appearance-none
              ">
      </div>
      <div class="mt-2 flex justify-between text-sm text-gray-600 dark:text-gray-400">
        <span>$5</span>
        <span>$50</span>
      </div>
    </div>

    <!-- Dietary Preferences / Multiple Choice -->
    <div class="mb-10">
      <h2 class="text-2xl font-bold mb-4 text-purple-700 dark:text-indigo-400">Dietary Preferences</h2>
      <div class="flex flex-wrap gap-4">

        <!-- Checkbox 1 -->
        <div class="neumorphism-checkbox">
          <input type="checkbox" id="vegan" class="sr-only">
          <label for="vegan" class="neumorphism-checkbox-label group">
            <div class="w-6 h-6 rounded-full border border-purple-300 dark:border-gray-600 transition-all duration-200 group-hover:scale-105 group-active:scale-95
                        shadow-neumorphism-sm dark:shadow-neumorphism-sm-dark
                        peer-checked:bg-purple-500 peer-checked:border-purple-600 dark:peer-checked:bg-indigo-500 dark:peer-checked:border-indigo-600
                        peer-checked:shadow-inner-neumorphism-sm dark:peer-checked:shadow-inner-neumorphism-sm-dark
                        flex items-center justify-center
                        group-[.neumorphism-checkbox:has(input:checked)]:-translate-y-0.5
                        relative
                        ">
              <svg class="w-4 h-4 text-white opacity-0 transform scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <span class="ml-2 text-lg font-medium text-gray-700 dark:text-gray-300">Vegan</span>
          </label>
        </div>

        <!-- Checkbox 2 -->
        <div class="neumorphism-checkbox">
          <input type="checkbox" id="gluten-free" class="sr-only">
          <label for="gluten-free" class="neumorphism-checkbox-label group">
            <div class="w-6 h-6 rounded-full border border-purple-300 dark:border-gray-600 transition-all duration-200 group-hover:scale-105 group-active:scale-95
                        shadow-neumorphism-sm dark:shadow-neumorphism-sm-dark
                        peer-checked:bg-purple-500 peer-checked:border-purple-600 dark:peer-checked:bg-indigo-500 dark:peer-checked:border-indigo-600
                        peer-checked:shadow-inner-neumorphism-sm dark:peer-checked:shadow-inner-neumorphism-sm-dark
                        flex items-center justify-center
                        group-[.neumorphism-checkbox:has(input:checked)]:-translate-y-0.5
                        relative
                        ">
              <svg class="w-4 h-4 text-white opacity-0 transform scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <span class="ml-2 text-lg font-medium text-gray-700 dark:text-gray-300">Gluten-Free</span>
          </label>
        </div>

        <!-- Checkbox 3 -->
        <div class="neumorphism-checkbox">
          <input type="checkbox" id="vegetarian" class="sr-only">
          <label for="vegetarian" class="neumorphism-checkbox-label group">
            <div class="w-6 h-6 rounded-full border border-purple-300 dark:border-gray-600 transition-all duration-200 group-hover:scale-105 group-active:scale-95
                        shadow-neumorphism-sm dark:shadow-neumorphism-sm-dark
                        peer-checked:bg-purple-500 peer-checked:border-purple-600 dark:peer-checked:bg-indigo-500 dark:peer-checked:border-indigo-600
                        peer-checked:shadow-inner-neumorphism-sm dark:peer-checked:shadow-inner-neumorphism-sm-dark
                        flex items-center justify-center
                        group-[.neumorphism-checkbox:has(input:checked)]:-translate-y-0.5
                        relative
                        ">
              <svg class="w-4 h-4 text-white opacity-0 transform scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <span class="ml-2 text-lg font-medium text-gray-700 dark:text-gray-300">Vegetarian</span>
          </label>
        </div>

      </div>
    </div>

    <!-- Quantity Selector / Spinner (Conceptual) -->
    <div class="mb-10 flex items-center justify-between">
      <h2 class="text-2xl font-bold text-purple-700 dark:text-indigo-400">Quantity:</h2>
      <div class="flex items-center space-x-4 p-2 rounded-full
                  shadow-neumorphism-sm dark:shadow-neumorphism-sm-dark
                  bg-purple-100 dark:bg-gray-800">
        <button aria-label="Decrease quantity" class="neumorphism-button-icon-round">
          <svg class="w-6 h-6 text-purple-600 dark:text-indigo-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6"></path>
          </svg>
        </button>
        <span class="text-2xl font-bold text-indigo-700 dark:text-purple-400">1</span> <!-- This would be dynamic -->
        <button aria-label="Increase quantity" class="neumorphism-button-icon-round">
          <svg class="w-6 h-6 text-purple-600 dark:text-indigo-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
          </svg>
        </button>
      </div>
    </div>

    <!-- Call to Action Buttons -->
    <div class="flex flex-col sm:flex-row gap-6 mt-12 justify-center">
      <button class="neumorphism-button-lg bg-pink-500 hover:bg-pink-600 dark:bg-pink-600 dark:hover:bg-pink-700
                     active:bg-pink-700 dark:active:bg-pink-800
                     text-white">
        <svg class="w-6 h-6 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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
        </svg>
        Add to Cart
      </button>
      <button class="neumorphism-button-lg bg-yellow-400 hover:bg-yellow-500 dark:bg-yellow-500 dark:hover:bg-yellow-600
                     active:bg-yellow-600 dark:active:bg-yellow-700
                     text-gray-900">
        <svg class="w-6 h-6 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="M13 7l5 5m0 0l-5 5m5-5H6"></path>
        </svg>
        Checkout Now
      </button>
    </div>

    <p class="text-center text-sm text-gray-500 dark:text-gray-400 mt-12">
      Experience the soft magic of Neumorphism with vibrant flavors!
    </p>

  </div>

  <!-- Tailwind JIT custom classes for Neumorphism -->
  <style>
    /* Base Neumorphism Shadows */
    .shadow-neumorphism {
      box-shadow: 6px 6px 12px #b0c4e7, -6px -6px 12px #e0f0ff;
    }
    .dark .shadow-neumorphism {
      box-shadow: 6px 6px 12px #22222b, -6px -6px 12px #3a3a48;
    }

    .shadow-neumorphism-sm {
      box-shadow: 3px 3px 6px #b0c4e7, -3px -3px 6px #e0f0ff;
    }
    .dark .shadow-neumorphism-sm {
      box-shadow: 3px 3px 6px #22222b, -3px -3px 6px #3a3a48;
    }

    /* Inner Neumorphism Shadows (for pressed/active states) */
    .shadow-inner-neumorphism {
      box-shadow: inset 3px 3px 6px #9aaed1, inset -3px -3px 6px #f6ffff;
    }
    .dark .shadow-inner-neumorphism {
      box-shadow: inset 3px 3px 6px #1a1a22, inset -3px -3px 6px #414151;
    }

    .shadow-inner-neumorphism-sm {
      box-shadow: inset 2px 2px 4px #9aaed1, inset -2px -2px 4px #f6ffff;
    }
    .dark .shadow-inner-neumorphism-sm {
      box-shadow: inset 2px 2px 4px #1a1a22, inset -2px -2px 4px #414151;
    }

    /* Specific Component Styles */
    .category-button {
      @apply flex flex-col items-center p-4 rounded-2xl cursor-pointer select-none
             bg-purple-100 dark:bg-gray-800
             shadow-neumorphism dark:shadow-neumorphism-dark
             transform transition-all duration-200
             hover:-translate-y-1 hover:shadow-lg dark:hover:shadow-lg-dark
             active:shadow-inner-neumorphism dark:active:shadow-inner-neumorphism-dark
             active:translate-y-0.5;
    }
    .dark .category-button {
        box-shadow: 6px 6px 12px #22222b, -6px -6px 12px #3a3a48;
    }
    .dark .category-button:hover {
        box-shadow: 8px 8px 16px #1a1a22, -8px -8px 16px #414151;
    }
    .dark .category-button:active {
      box-shadow: inset 3px 3px 6px #1a1a22, inset -3px -3px 6px #414151;
    }

    /* General Button Style */
    .neumorphism-button-lg {
      @apply flex items-center justify-center px-8 py-4 rounded-full font-bold text-xl
             shadow-neumorphism dark:shadow-neumorphism-dark
             transform transition-all duration-200
             hover:-translate-y-1 hover:scale-105 hover:shadow-lg dark:hover:shadow-lg-dark
             active:shadow-inner-neumorphism dark:active:shadow-inner-neumorphism-dark
             active:translate-y-0.5 active:scale-98;
             white-space: nowrap; /* Prevent text wrapping */
    }
    .dark .neumorphism-button-lg {
        box-shadow: 6px 6px 12px #22222b, -6px -6px 12px #3a3a48;
    }
    .dark .neumorphism-button-lg:hover {
        box-shadow: 8px 8px 16px #1a1a22, -8px -8px 16px #414151;
    }
    .dark .neumorphism-button-lg:active {
      box-shadow: inset 3px 3px 6px #1a1a22, inset -3px -3px 6px #414151;
    }

    /* Round Icon Button */
    .neumorphism-button-icon-round {
      @apply p-3 rounded-full
             shadow-neumorphism-sm dark:shadow-neumorphism-sm-dark
             bg-purple-200 dark:bg-gray-700
             transform transition-all duration-200
             hover:scale-110 hover:-translate-y-0.5
             active:shadow-inner-neumorphism-sm dark:active:shadow-inner-neumorphism-sm-dark
             active:translate-y-0.5 active:scale-95;
    }
    .dark .neumorphism-button-icon-round {
        box-shadow: 3px 3px 6px #22222b, -3px -3px 6px #3a3a48;
    }
    .dark .neumorphism-button-icon-round:hover {
        box-shadow: 4px 4px 8px #1a1a22, -4px -4px 8px #414151;
    }
    .dark .neumorphism-button-icon-round:active {
      box-shadow: inset 2px 2px 4px #1a1a22, inset -2px -2px 4px #414151;
    }

    /* Checkbox Styles */
    .neumorphism-checkbox-label {
      @apply flex items-center cursor-pointer select-none;
    }
    .neumorphism-checkbox input[type="checkbox"]:focus + .neumorphism-checkbox-label div {
      @apply ring-2 ring-purple-400 dark:ring-indigo-300 ring-offset-2 ring-offset-purple-50 dark:ring-offset-gray-900;
    }

    /* Dark Mode specific shadows that Tailwind doesn't allow for custom properties within theme easily */
    .dark\:shadow-neumorphism-dark {
        box-shadow: 6px 6px 12px #22222b, -6px -6px 12px #3a3a48;
    }
    .dark\:shadow-neumorphism-sm-dark {
        box-shadow: 3px 3px 6px #22222b, -3px -3px 6px #3a3a48;
    }
    .dark\:shadow-inner-neumorphism-dark {
        box-shadow: inset 3px 3px 6px #1a1a22, inset -3px -3px 6px #414151;
    }
    .dark\:shadow-inner-neumorphism-sm-dark {
        box-shadow: inset 2px 2px 4px #1a1a22, inset -2px -2px 4px #414151;
    }
    .dark\:hover\:shadow-lg-dark {
      box-shadow: 8px 8px 16px #1a1a22, -8px -8px 16px #414151;
    }

    /* Custom text shadow */
    .text-shadow-md {
      text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    }

    .dark .text-shadow-md {
      text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    }
  </style>
</div>

Glassmorphism Grayscale Healthcare Footer

A responsive, glassmorphism-styled footer navigation component for healthcare/medical applications, using a grayscale color scheme with dark mode support. It features frosted glass-like translucent elements and interactive links.

Open Preview

                <footer class="relative overflow-hidden bg-white/50 backdrop-blur-md dark:bg-gray-900/50 dark:backdrop-blur-md py-12 md:py-16 border-t-2 border-gray-200 dark:border-gray-800">
  <div class="absolute inset-0 z-0 opacity-20 dark:opacity-10">
    <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
      <defs>
        <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
          <stop offset="0%" stop-color="#e0e0e0"></stop>
          <stop offset="100%" stop-color="#f0f0f0"></stop>
        </radialGradient>
        <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
          <stop offset="0%" stop-color="#a0a0a0"></stop>
          <stop offset="100%" stop-color="#c0c0c0"></stop>
        </radialGradient>
      </defs>
      <circle cx="20" cy="30" r="30" fill="url(#grad1)" opacity="0.7" />
      <circle cx="80" cy="70" r="40" fill="url(#grad2)" opacity="0.7" />
    </svg>
  </div>

  <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-12">
      <!-- Company Info -->
      <div class="space-y-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">MedCare Health</h3>
        <p class="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
          Providing compassionate and advanced healthcare solutions for a healthier tomorrow.
        </p>
        <ul class="flex space-x-4">
          <li><a href="#" class="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 transition-colors"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22h7.42c5.523 0 10-4.477 10-10Z" clip-rule="evenodd" /></svg></a></li>
          <li><a href="#" class="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 transition-colors"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.251c1.24 1.332 2.71 2.029 4.15 2.029 3.325 0 5.981-2.656 5.981-5.981 0-0.342-.033-0.678-.088-1.006 1.258-0.871 2.259-1.991 3.015-3.269-0.038 0.051-0.071 0.101-0.109 0.151-1.282 1.484-3.056 2.378-5.74 2.875 1.442-0.867 2.478-2.364 2.986-4.085-1.353 0.803-2.859 1.385-4.472 1.63-1.277-1.36-3.045-2.212-5.04-2.212-3.844 0-6.958 3.114-6.958 6.958 0 0.546 0.063 1.077 0.17 1.597-5.798-0.292-10.9-3.054-14.331-7.243-0.592 1.01-0.929 2.193-0.929 3.468 0 2.41 1.229 4.545 3.094 5.795-1.144-0.032-2.222-0.345-3.155-0.862v0.086c0 3.383 2.404 6.136 5.583 6.791-0.589 0.16-1.213 0.245-1.854 0.245-0.455 0-0.899-0.043-1.331-0.127 0.873 2.766 3.424 4.779 6.442 4.838-2.673 2.093-6.027 3.344-9.688 3.344-0.627 0-1.242-0.038-1.847-0.108 3.473 2.248 7.593 3.563 11.996 3.563Z" /></svg></a></li>
          <li><a href="#" class="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 transition-colors"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.418 2.865 8.163 6.838 9.504.5.092.682-.217.682-.483 0-.237-.007-.866-.012-1.7-2.782.604-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.62.068-.607.068-.607 1.002.07 1.536 1.03 1.536 1.03.892 1.527 2.342 1.085 2.91.829.091-.643.349-1.085.635-1.334-2.22-.25-4.555-1.11-4.555-4.943 0-1.09.39-1.978 1.029-2.674-.103-.251-.446-1.264.098-2.632 0 0 .84-.268 2.75 1.025A9.303 9.303 0 0 1 12 6.687c.85.006 1.7.117 2.502.324 1.908-1.293 2.747-1.025 2.747-1.025.544 1.368.201 2.381.098 2.632.64.696 1.029 1.584 1.029 2.674 0 3.842-2.339 4.689-4.566 4.935.359.307.678.915.678 1.846 0 1.334-.012 2.413-.012 2.74 0 .267.18.579.688.482C21.137 20.163 24 16.418 24 12c0-5.523-4.477-10-10-10Z" clip-rule="evenodd" /></svg></a></li>
        </ul>
      </div>

      <!-- Quick Links -->
      <div>
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Quick Links</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 transition-colors text-sm">Our Services</a></li>
          <li><a href="#" class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 transition-colors text-sm">Departments</a></li>
          <li><a href="#" class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 transition-colors text-sm">Find a Doctor</a></li>
          <li><a href="#" class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 transition-colors text-sm">Patient Resources</a></li>
          <li><a href="#" class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 transition-colors text-sm">Careers</a></li>
        </ul>
      </div>

      <!-- Contact Info -->
      <div>
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Contact Us</h3>
        <ul class="space-y-3">
          <li class="flex items-start text-gray-600 dark:text-gray-300 text-sm">
            <svg class="w-5 h-5 mr-2 text-gray-500 dark:text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
            123 Health Ave, Suite 400, Medical City, MC 10001
          </li>
          <li class="flex items-center text-gray-600 dark:text-gray-300 text-sm">
            <svg class="w-5 h-5 mr-2 text-gray-500 dark:text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684L10.95 4.81A3 3 0 0012.72 6h4.04a2 2 0 012 2.02v2.83a1 1 0 00.512.854l2.57 1.144a4 4 0 010 7.21l-2.57 1.144a1 1 0 00-.512.854v2.83a2 2 0 01-2 2.02h-4.04a3 3 0 00-1.77 0l-2.75 1.137a1 1 0 01-.948.684H5a2 2 0 01-2-2V5z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.875 17.5l-2.617-2.617a1 1 0 010-1.414l2.617-2.617a1 1 0 011.414 0l2.617 2.617a1 1 0 010 1.414l-2.617 2.617a1 1 0 01-1.414 0z"></path></svg>
            (555) 123-4567
          </li>
          <li class="flex items-center text-gray-600 dark:text-gray-300 text-sm">
            <svg class="w-5 h-5 mr-2 text-gray-500 dark:text-gray-400 flex-shrink-0" 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 8l7.893 5.262a2 2 0 002.214 0L21 8m-1 10a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h12a2 2 0 012 2v12z"></path></svg>
            [email protected]
          </li>
        </ul>
      </div>

      <!-- Newsletter/Appointment -->
      <div>
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Stay Connected</h3>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Subscribe to our newsletter for health tips and updates.</p>
        <form class="flex flex-col sm:flex-row gap-2">
          <input type="email" placeholder="Your email" class="flex-grow px-4 py-2 rounded-lg bg-gray-100/70 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:bg-gray-800/70 dark:border-gray-700 dark:text-gray-100 dark:focus:ring-gray-600 text-sm placeholder-gray-500 dark:placeholder-gray-400" aria-label="Email for newsletter">
          <button type="submit" class="px-5 py-2 rounded-lg bg-gray-800 text-white font-medium hover:bg-gray-700 dark:bg-gray-200 dark:text-gray-900 dark:hover:bg-gray-300 transition-colors text-sm">Subscribe</button>
        </form>
        <p class="text-gray-600 dark:text-gray-300 text-sm mt-4">Need an appointment? <a href="#" class="font-medium text-gray-800 hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-100 transition-colors">Book Now</a></p>
      </div>
    </div>

    <div class="mt-12 md:mt-16 pt-8 border-t border-gray-300 dark:border-gray-700 text-center">
      <p class="text-gray-600 dark:text-gray-400 text-sm">&copy; 2023 MedCare Health. All rights reserved.</p>
    </div>
  </div>
</footer>

Community Forum Component

A responsive community forum component for finance/banking with a Material Design style and candy/sweet color scheme, featuring bright colors like bubblegum pink and mint green, dark mode support, and semantic HTML.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-pink-100 via-purple-100 to-green-100 dark:from-gray-900 dark:via-purple-950 dark:to-teal-950 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden">
    <header class="p-4 sm:p-6 bg-gradient-to-r from-pink-400 to-purple-500 dark:from-gray-900 dark:to-purple-900 text-white rounded-t-xl shadow-md">
      <h1 class="text-2xl sm:text-3xl font-extrabold tracking-tight mb-1">Finance Community Forum</h1>
      <p class="text-sm opacity-90">Connect, share, and learn about financial insights.</p>
    </header>

    <div class="flex flex-col md:flex-row gap-4 p-4 sm:p-6">
      <!-- Left Sidebar: Categories/Navigation -->
      <aside class="w-full md:w-1/4 bg-purple-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
        <h2 class="text-lg sm:text-xl font-semibold text-purple-700 dark:text-purple-300 mb-4">Categories</h2>
        <nav>
          <ul class="space-y-3">
            <li>
              <a href="#" class="flex items-center gap-2 p-2 rounded-md hover:bg-purple-200 dark:hover:bg-gray-600 text-purple-800 dark:text-purple-200 font-medium transition-colors">
                <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.75 17L9 20l-1 1h8l-1-1-1.25-3M15.75 17H18a2 2 0 002-2V7a2 2 0 00-2-2H6a2 2 0 00-2 2v8a2 2 0 002 2h2.25"/></svg>
                Investing Strategies
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center gap-2 p-2 rounded-md bg-purple-200 dark:bg-purple-800 text-purple-900 dark:text-white font-semibold transition-colors">
                <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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.592 1L21 9m-4.475-1.256l-6.223 3.597m-4.047 5.086c.863-.092 1.63-.33 2.274-.692m0 0a2.003 2.003 0 01-1.422-4.242M10.88 16c-.021-.051 0-.107.017-.16A5.5 5.5 0 0012 5.5a5.5 5.5 0 00-5.5 5.5c0 1.01 0 2.02-.017 3.03M12 21.01c-.021-.051 0-.107.017-.16A5.5 5.5 0 0012 12.5a5.5 5.5 0 00-5.5 5.5c0 1.01 0 2.02-.017 3.03M12 21c-.021-.051 0-.107.017-.16A5.5 5.5 0 0012 12.5a5.5 5.5 0 00-5.5 5.5c0 1.01 0 2.02-.017 3.03"/></svg>
                Personal Finance
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center gap-2 p-2 rounded-md hover:bg-purple-200 dark:hover:bg-gray-600 text-purple-800 dark:text-purple-200 font-medium transition-colors">
                <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="M10 20l4-16m4 4l4 4-4 4M6 4l-4 4 4 4"/></svg>
                Market Analysis
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center gap-2 p-2 rounded-md hover:bg-purple-200 dark:hover:bg-gray-600 text-purple-800 dark:text-purple-200 font-medium transition-colors">
                <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="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                Banking & Loans
              </a>
            </li>
          </ul>
        </nav>
        <button class="mt-6 w-full py-2 px-4 bg-purple-500 hover:bg-purple-600 dark:bg-purple-700 dark:hover:bg-purple-600 text-white font-semibold rounded-lg shadow-md transition-colors">
          <svg class="w-4 h-4 inline-block mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
          New Thread
        </button>
      </aside>

      <!-- Main Content: Threads List -->
      <main class="w-full md:w-3/4">
        <section class="bg-green-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm mb-4">
          <h2 class="text-lg sm:text-xl font-semibold text-green-700 dark:text-green-300 mb-4">Latest Threads</h2>
          <div class="space-y-4">
            <!-- Thread Item 1 -->
            <article class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
              <div class="flex items-start justify-between">
                <div>
                  <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-1">Understanding the Latest Fed Rate Hike</h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Discussing the implications for mortgages and savings accounts.</p>
                </div>
                <div class="flex items-center space-x-2 text-gray-500 dark:text-gray-400">
                  <span class="text-sm">15 replies</span>
                  <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="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path></svg>
                </div>
              </div>
              <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mt-3">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="w-6 h-6 rounded-full mr-2 border border-pink-400 dark:border-purple-600">
                <span class="font-medium text-gray-700 dark:text-gray-300">John Doe</span>
                <span class="mx-2">•</span>
                <span>2 hours ago</span>
                <span class="ml-auto text-pink-600 dark:text-teal-400 font-semibold">Personal Finance</span>
              </div>
            </article>

            <!-- Thread Item 2 -->
            <article class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
              <div class="flex items-start justify-between">
                <div>
                  <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-1">Beginner's Guide to Stock Market Investing</h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Tips and resources for new investors.</p>
                </div>
                <div class="flex items-center space-x-2 text-gray-500 dark:text-gray-400">
                  <span class="text-sm">32 replies</span>
                  <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="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path></svg>
                </div>
              </div>
              <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mt-3">
                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar" class="w-6 h-6 rounded-full mr-2 border border-pink-400 dark:border-purple-600">
                <span class="font-medium text-gray-700 dark:text-gray-300">Jane Smith</span>
                <span class="mx-2">•</span>
                <span>5 hours ago</span>
                <span class="ml-auto text-pink-600 dark:text-teal-400 font-semibold">Investing Strategies</span>
              </div>
            </article>

            <!-- Thread Item 3 -->
            <article class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
              <div class="flex items-start justify-between">
                <div>
                  <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-1">Future of Digital Currencies in Banking</h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Exploring CBDCs and their impact on traditional banking.</p>
                </div>
                <div class="flex items-center space-x-2 text-gray-500 dark:text-gray-400">
                  <span class="text-sm">8 replies</span>
                  <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="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path></svg>
                </div>
              </div>
              <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mt-3">
                <img src="https://randomuser.me/api/portraits/men/19.jpg" alt="Author Avatar" class="w-6 h-6 rounded-full mr-2 border border-pink-400 dark:border-purple-600">
                <span class="font-medium text-gray-700 dark:text-gray-300">David Lee</span>
                <span class="mx-2">•</span>
                <span>1 day ago</span>
                <span class="ml-auto text-pink-600 dark:text-teal-400 font-semibold">Banking & Loans</span>
              </div>
            </article>

            <!-- Thread Item 4 -->
            <article class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
              <div class="flex items-start justify-between">
                <div>
                  <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-1">Q3 Earnings Report Analysis: Tech Sector</h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Deep dive into recent tech company performance.</p>
                </div>
                <div class="flex items-center space-x-2 text-gray-500 dark:text-gray-400">
                  <span class="text-sm">20 replies</span>
                  <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="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path></svg>
                </div>
              </div>
              <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mt-3">
                <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Author Avatar" class="w-6 h-6 rounded-full mr-2 border border-pink-400 dark:border-purple-600">
                <span class="font-medium text-gray-700 dark:text-gray-300">Emily White</span>
                <span class="mx-2">•</span>
                <span>2 days ago</span>
                <span class="ml-auto text-pink-600 dark:text-teal-400 font-semibold">Market Analysis</span>
              </div>
            </article>

          </div>
          <div class="mt-6 flex justify-center">
            <button class="py-2 px-6 bg-pink-500 hover:bg-pink-600 dark:bg-teal-600 dark:hover:bg-teal-500 text-white font-semibold rounded-full shadow-lg transition-colors">
              Load More
            </button>
          </div>
        </section>
      </main>
    </div>

    <footer class="p-4 sm:p-6 bg-purple-500 dark:bg-gray-900 text-white text-center text-sm rounded-b-xl shadow-inner">
      &copy; 2023 Finance Community. All rights reserved.
    </footer>
  </div>
</div>

Video Player Component - Watercolor/Artistic, Ocean/Blue, Healthcare

A simple, responsive video player component with a watercolor/artistic design style and ocean/blue color scheme, suitable for healthcare and medical applications. Includes dark mode support.

Open Preview

                <div class="relative bg-gradient-to-br from-blue-50 to-blue-200 dark:from-blue-950 dark:to-blue-800 p-4 sm:p-6 md:p-8 rounded-xl shadow-xl overflow-hidden group">
  <!-- Watercolor overlay effect -->
  <div class="absolute inset-0 z-0 opacity-40 mix-blend-multiply dark:mix-blend-screen" style="background-image: url('data:image/svg+xml;utf8,<svg width=\'100%\' height=\'100%\' viewBox=\'0 0 100 100\' xmlns=\'http://www.w3.org/2000/svg\'><defs><filter id=\'watercolorEffect\'><feTurbulence type=\'fractalNoise\' baseFrequency=\'0.02 0.05\' numOctaves=\'2\' result=\'noise\'/><feDiffuseLighting in=\'noise\' lightingColor=\'#ADD8E6\' surfaceScale=\'3\' result=\'light\'/><feBlend in=\'SourceGraphic\' in2=\'light\' mode=\'multiply\'/></filter></defs><rect x=\'0\' y=\'0\' width=\'100\' height=\'100\' fill=\'url(%23gradient)\'/><radialGradient id=\'gradient\' cx=\'50%\' cy=\'50%\' r=\'50%\' fx=\'50%\' fy=\'50%\'><stop offset=\'0%\' stop-color=\'rgb(173,216,230)\'/><stop offset=\'100%\' stop-color=\'rgb(135,206,235)\'/></radialGradient><rect x=\'0\' y=\'0\' width=\'100\' height=\'100\' filter=\'url(%23watercolorEffect)\' opacity=\'0.5\'/></svg>'); background-size: cover;"></div>

  <div class="relative z-10 flex flex-col lg:flex-row items-center lg:items-start space-y-6 lg:space-y-0 lg:space-x-8">

    <!-- Video Player Area -->
    <div class="w-full lg:w-2/3 aspect-video bg-blue-300 dark:bg-blue-900 rounded-lg shadow-inner-lg overflow-hidden border border-blue-400 dark:border-blue-700 group-hover:scale-[1.01] transition-transform duration-300 ease-out">
      <iframe
        class="w-full h-full"
        src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=0&controls=1&showinfo=0&rel=0&modestbranding=1"
        title="Medical Procedure Video"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowfullscreen
      ></iframe>
    </div>

    <!-- Video Info / Description -->
    <div class="w-full lg:w-1/3 flex flex-col space-y-4 text-center lg:text-left">
      <h3 class="text-2xl sm:text-3xl font-extrabold text-blue-800 dark:text-blue-100 leading-tight tracking-tight drop-shadow-sm font-serif">
        <span class="block">Understanding</span>
        <span class="block">Respiratory Health</span>
      </h3>
      <p class="text-blue-700 dark:text-blue-200 text-base sm:text-lg leading-relaxed font-light">
        This insightful video provides a comprehensive overview of common respiratory conditions and preventative measures. Essential viewing for patients and caregivers.
      </p>
      <div class="flex justify-center lg:justify-start items-center space-x-3 pt-2">
        <img src="https://randomuser.me/api/portraits/men/44.jpg" alt="Dr. Alex Chen" class="w-10 h-10 rounded-full border-2 border-blue-500 dark:border-blue-400 shadow-md">
        <span class="text-blue-600 dark:text-blue-300 text-sm font-medium">Dr. Alex Chen, MD</span>
      </div>
      <div class="flex justify-center lg:justify-start pt-4">
        <button class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-lg text-white 
              bg-gradient-to-r from-sky-500 to-blue-600 hover:from-sky-600 hover:to-blue-700 
              dark:from-sky-700 dark:to-blue-800 dark:hover:from-sky-800 dark:hover:to-blue-900
              focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-blue-950 transform hover:scale-105 transition-all duration-200 ease-in-out group">
          <svg class="-ml-1 mr-3 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M2 10a8 8 0 1116 0 8 8 0 01-16 0zm8-7a1 1 0 00-.707-.293L4.293 8.293a1 1 0 000 1.414l5 5a1 1 0 001.414 0l5-5a1 1 0 000-1.414L10.707 2.707A1 1 0 0010 3z" clip-rule="evenodd" />
            <path fill-rule="evenodd" d="M10 8V5a1 1 0 00-1-1H7a1 1 0 000 2h1v3a1 1 0 00-1 1H7a1 1 0 000 2h1v3a1 1 0 001 1h2a1 1 0 001-1v-3h1a1 1 0 000-2h-1V9h1a1 1 0 000-2h-1V5h1a1 1 0 000-2h-1z" clip-rule="evenodd" />
            <path d="M8.707 13.293a1 1 0 00-1.414 0L4.293 15.586a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L6.414 16H13a1 1 0 000-2H6.414l2.293-2.293a1 1 0 000-1.414z" />
          </svg>
          Watch Now
        </button>
      </div>
    </div>
  </div>

  <!-- Subtle brush stroke footer -->
  <div class="absolute bottom-0 left-0 right-0 h-6 bg-blue-300 dark:bg-blue-800 opacity-60 rounded-b-xl" style="mask-image: url('data:image/svg;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjUwIiB2aWV3Qm94PSIwIDAgMjAwIDUwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3My5vcmcvMjAwMC9zdmciPjxlbGxpcHNlIGN4PSIxMDQuNzcxIiBjeT0iMS41MDc2MSIgcnk9IjQ5LjUwNzYxIiByeD0iMTU5Ljc3MSIgc2tldyYobGRxdW87eClyZWNlbnQ9IjAuNjY5MTgzIiByb3RhdGU9Ii02LjM1MjY1IiBmaWxsPSIjRjk2RkYwIi8+PC9zdmc+'); mask-size: cover; mask-repeat: no-repeat; mask-position: bottom;"></div>
</div>

Video Player Component

A responsive video player component designed with a paper/print-inspired aesthetic and a complementary color scheme, suitable for forum or community platforms. Includes dark mode support and semantic HTML.

Open Preview

                <div class="font-sans antialiased bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200 p-4 sm:p-6 lg:p-8 flex items-center justify-center min-h-screen">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-850 shadow-lg rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 relative">
    <!-- Faux paper texture / watermark -->
    <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/notebook-dark.png')] opacity-10 dark:opacity-5 pointer-events-none z-0"></div>

    <div class="relative z-10 p-4 sm:p-6 lg:p-8">
      <!-- Header -->
      <div class="flex justify-between items-start mb-6 border-b pb-4 border-amber-200 dark:border-violet-600">
        <div>
          <h2 class="text-2xl sm:text-3xl font-bold text-amber-700 dark:text-amber-300 leading-tight">Community Highlight: 'The Future of AI'</h2>
          <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400 mt-1">Dive into cutting-edge discussions.</p>
        </div>
        <div class="flex-shrink-0">
          <a href="#" class="text-violet-600 dark:text-violet-400 hover:underline text-sm sm:text-base">View Thread</a>
        </div>
      </div>

      <!-- Video Player Area -->
      <div class="relative w-full aspect-video bg-black rounded-lg overflow-hidden shadow-md mb-6 border border-gray-300 dark:border-gray-700">
        <img src="https://picsum.photos/800/450?random=1" alt="Video Thumbnail" class="w-full h-full object-cover" />
        <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-40">
          <button class="p-4 sm:p-5 rounded-full bg-amber-500 text-white shadow-xl hover:bg-amber-600 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:bg-violet-700 dark:hover:bg-violet-800 dark:focus:ring-violet-500 transition-all duration-300 ease-in-out transform hover:scale-105">
            <svg class="w-8 h-8 sm:w-10 sm:h-10" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path d="M8 5v14l11-7z"></path>
            </svg>
            <span class="sr-only">Play Video</span>
          </button>
        </div>
      </div>

      <!-- Video Details and Actions -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
        <div class="md:col-span-2">
          <h3 class="text-xl sm:text-2xl font-semibold text-amber-700 dark:text-amber-300 leading-snug mb-2">Unlocking the Potential of Generative AI</h3>
          <p class="text-sm text-gray-700 dark:text-gray-300 leading-relaxed">
            Join leading experts as they explore the groundbreaking advancements and ethical considerations of generative artificial intelligence.
            This session delves into practical applications and future implications.
          </p>
        </div>
        <div class="md:col-span-1 flex flex-col items-start md:items-end">
          <div class="flex items-center text-sm mb-2 text-gray-600 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-amber-600 dark:text-amber-400" 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 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
            <span>Posted: <time datetime="2023-10-26">Oct 26, 2023</time></span>
          </div>
          <div class="flex items-center text-sm mb-4 text-gray-600 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-violet-600 dark:text-violet-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 4v-4H4a2 2 0 01-2-2V5zm10 4a1 1 0 100-2 1 1 0 000 2zm-1-4a1 1 0 100-2 1 1 0 000 2zm-5 0a1 1 0 100-2 1 1 0 000 2z"></path></svg>
            <span>Views: 1.2K</span>
          </div>
          <div class="flex space-x-2">
            <button class="flex items-center px-3 py-2 rounded-full text-white bg-violet-600 hover:bg-violet-700 dark:bg-violet-700 dark:hover:bg-violet-800 text-sm transition-colors duration-200">
              <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 01-2 2H4a2 2 0 01-2-2V8c0-1.1.9-2 2-2h4l2-2h6a2 2 0 012 2v3zM7 6a1 1 0 01-2 0V4a1 1 0 012 0h2a1 1 0 010 2H7z"></path></svg>
              Share
            </button>
            <button class="flex items-center px-3 py-2 rounded-full text-violet-700 bg-violet-100 hover:bg-violet-200 dark:bg-violet-900 dark:text-violet-300 dark:hover:bg-violet-800 text-sm transition-colors duration-200">
              <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 11-3 0v-6zM6 10.333v5.5H18V4.467a2 2 0 00-2-2H8a2 2 0 00-2 2v5.866zM10 6a1 1 0 011-1h2a1 1 0 110 2h-2a1 1 0 01-1-1zm0 4a1 1 0 011-1h2a1 1 0 110 2h-2a1 1 0 01-1-1zm-4 4a1 1 0 011-1h2a1 1 0 110 2H7a1 1 0 01-1-1z"></path></svg>
              Add to Watchlist
            </button>
          </div>
        </div>
      </div>

      <!-- Uploader Info -->
      <div class="flex items-center p-4 bg-amber-50 dark:bg-amber-900/20 rounded-lg border border-amber-200 dark:border-amber-700">
        <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full mr-4 object-cover border-2 border-amber-400 dark:border-violet-500" src="https://randomuser.me/api/portraits/men/7.jpg" alt="Uploader Avatar">
        <div>
          <p class="font-medium text-amber-800 dark:text-amber-200">Uploaded by: <a href="#" class="hover:underline text-amber-700 dark:text-amber-300">TechExplorer</a></p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Senior Member, AI Innovations Forum</p>
        </div>
      </div>
    </div>
  </div>
</div>

1 ... 93 94 95 96 97 ... 335