Search Components

All Components

Browse all available Tailwind CSS components

Retro_Healthcare_Activity_Feed

A retro/vintage vibrant activity feed component for healthcare applications, designed with an 80s/90s aesthetic, featuring notifications and updates with responsive and dark mode support.

Open Preview

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

  <!-- Header with Retro Vibe -->
  <div class="mb-8 text-center">
    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-white dark:text-pink-400 drop-shadow-lg leading-tight">
      <span class="bg-gradient-to-r from-red-500 to-yellow-400 px-3 py-1 rounded-lg shadow-lg inline-block transform -rotate-2 animate-pulse-slow">RETRO</span> HEALTH ACTIVITY
    </h1>
    <p class="mt-2 text-xl sm:text-2xl font-semibold text-purple-700 dark:text-purple-300 antialiased">Your Healthcare Pulse</p>
  </div>

  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-2xl p-6 sm:p-8 border-4 border-yellow-400 dark:border-pink-500 transform skew-y-1 rotate-1 scale-95 transition-all duration-300 hover:skew-y-0 hover:rotate-0 hover:scale-100 ease-in-out">
    <div class="flex items-center justify-between mb-6 border-b-2 border-dashed border-purple-400 dark:border-pink-600 pb-4">
      <h2 class="text-3xl font-bold uppercase text-blue-600 dark:text-blue-400 tracking-wide">
        Activity Log <span class="text-yellow-500 dark:text-yellow-300 animate-bounce ml-2 text-4xl">★</span>
      </h2>
      <button class="bg-yellow-500 hover:bg-yellow-600 dark:bg-pink-600 dark:hover:bg-pink-700 text-white dark:text-gray-100 font-bold py-2 px-4 rounded-full shadow-lg transform -skew-x-6 hover:skew-x-0 transition-transform duration-200">
        View All
      </button>
    </div>

    <ul class="space-y-6">

      <!-- Activity Item 1 -->
      <li class="flex items-start bg-blue-100 dark:bg-gray-700 p-4 rounded-lg shadow-inner border-2 border-blue-300 dark:border-gray-600 transform hover:scale-[1.01] transition-transform duration-150 relative">
        <div class="absolute -left-2 -top-2 w-4 h-4 bg-yellow-400 dark:bg-pink-500 border-2 border-white dark:border-gray-800 rounded-full animate-ping-slow"></div>
        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4 border-4 border-blue-400 dark:border-cyan-400 shadow-md">
        <div class="flex-1">
          <p class="text-sm text-gray-500 dark:text-gray-400 mb-1"><time datetime="2023-10-26T14:30">Oct 26, 2023, 2:30 PM</time></p>
          <p class="text-lg font-bold text-blue-700 dark:text-blue-300 mb-1">Dr. Anya Sharma</p>
          <p class="text-purple-800 dark:text-purple-200"><span class="font-semibold">New Prescription Added:</span> <span class="font-mono bg-blue-200 dark:bg-gray-600 text-blue-800 dark:text-white px-2 py-1 rounded-md text-sm">Insulin - 10 units daily</span> for diabetes management.</p>
        </div>
        <div class="flex-none text-2xl text-yellow-600 dark:text-yellow-400 ml-4 hidden sm:block">💊</div>
      </li>

      <!-- Activity Item 2 -->
      <li class="flex items-start bg-green-100 dark:bg-gray-700 p-4 rounded-lg shadow-inner border-2 border-green-300 dark:border-gray-600 transform hover:scale-[1.01] transition-transform duration-150 relative">
        <div class="absolute -left-2 -top-2 w-4 h-4 bg-yellow-400 dark:bg-pink-500 border-2 border-white dark:border-gray-800 rounded-full animate-ping-slow"></div>
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4 border-4 border-green-400 dark:border-emerald-400 shadow-md">
        <div class="flex-1">
          <p class="text-sm text-gray-500 dark:text-gray-400 mb-1"><time datetime="2023-10-26T10:15">Oct 26, 2023, 10:15 AM</time></p>
          <p class="text-lg font-bold text-green-700 dark:text-green-300 mb-1">System Update</p>
          <p class="text-purple-800 dark:text-purple-200"><span class="font-semibold">New Feature:</span> Your latest blood pressure readings have been successfully synchronized from your smart device. <span class="text-green-600 dark:text-green-400 blinking-text">LIVE!</span></p>
        </div>
        <div class="flex-none text-2xl text-lime-600 dark:text-lime-400 ml-4 hidden sm:block">📈</div>
      </li>

      <!-- Activity Item 3 -->
      <li class="flex items-start bg-yellow-100 dark:bg-gray-700 p-4 rounded-lg shadow-inner border-2 border-yellow-300 dark:border-gray-600 transform hover:scale-[1.01] transition-transform duration-150 relative">
        <div class="absolute -left-2 -top-2 w-4 h-4 bg-purple-400 dark:bg-pink-500 border-2 border-white dark:border-gray-800 rounded-full animate-ping-slow"></div>
        <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4 border-4 border-yellow-400 dark:border-amber-400 shadow-md">
        <div class="flex-1">
          <p class="text-sm text-gray-500 dark:text-gray-400 mb-1"><time datetime="2023-10-25T16:00">Oct 25, 2023, 4:00 PM</time></p>
          <p class="text-lg font-bold text-yellow-700 dark:text-yellow-300 mb-1">Clinic Notification</p>
          <p class="text-purple-800 dark:text-purple-200"><span class="font-semibold">Appointment Reminder:</span> Your upcoming physiotherapy session is scheduled for <span class="font-mono bg-yellow-200 dark:bg-gray-600 text-yellow-800 dark:text-white px-2 py-1 rounded-md text-sm">tomorrow, Oct 27, 9:00 AM</span>.</p>
        </div>
        <div class="flex-none text-2xl text-orange-600 dark:text-orange-400 ml-4 hidden sm:block">📅</div>
      </li>

      <!-- Activity Item 4 -->
      <li class="flex items-start bg-red-100 dark:bg-gray-700 p-4 rounded-lg shadow-inner border-2 border-red-300 dark:border-gray-600 transform hover:scale-[1.01] transition-transform duration-150 relative">
        <div class="absolute -left-2 -top-2 w-4 h-4 bg-purple-400 dark:bg-pink-500 border-2 border-white dark:border-gray-800 rounded-full animate-ping-slow"></div>
        <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="System Bot" class="w-12 h-12 rounded-full mr-4 border-4 border-red-400 dark:border-rose-400 shadow-md">
        <div class="flex-1">
          <p class="text-sm text-gray-500 dark:text-gray-400 mb-1"><time datetime="2023-10-25T09:00">Oct 25, 2023, 9:00 AM</time></p>
          <p class="text-lg font-bold text-red-700 dark:text-red-300 mb-1">Emergency Contact Alert</p>
          <p class="text-purple-800 dark:text-purple-200"><span class="font-semibold">Emergency Alert Test:</span> Your emergency contacts have been notified of a system test. No action required. <span class="text-red-600 dark:text-red-400 flashing-text">TEST!</span></p>
        </div>
        <div class="flex-none text-2xl text-red-600 dark:text-red-400 ml-4 hidden sm:block">🚨</div>
      </li>

    </ul>

    <div class="mt-8 text-center">
      <button class="bg-purple-600 hover:bg-purple-700 dark:bg-indigo-600 dark:hover:bg-indigo-700 text-white dark:text-gray-100 font-extrabold py-3 px-8 rounded-lg shadow-lg text-lg transform hover:scale-105 transition-transform duration-200 border-4 border-pink-400 dark:border-yellow-400 animate-pulse">
        LOAD MORE DATA
      </button>
    </div>
  </div>

  <!-- Tailwind JIT custom animations (typically in tailwind.config.js - but included here for single file component) -->
  <style>
    @keyframes pulse-slow {
      0%, 100% { opacity: 1; transform: scale(1) rotate(-2deg); }
      50% { opacity: 0.8; transform: scale(1.02) rotate(-2deg); }
    }
    .animate-pulse-slow {
      animation: pulse-slow 4s infinite ease-in-out;
    }

    @keyframes blinking-text {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }
    .blinking-text {
      animation: blinking-text 1.5s infinite step-end;
    }

    @keyframes flashing-text {
      0%, 100% { color: #dc2626; /* red-600 */ }
      50% { color: #facc15; /* yellow-400 */ }
    }
    .flashing-text {
      animation: flashing-text 0.8s infinite step-end;
    }

    @keyframes ping-slow {
      0% { transform: scale(0.8); opacity: 0.5; }
      100% { transform: scale(1.5); opacity: 0; }
    }
    .animate-ping-slow {
      animation: ping-slow 2s cubic-bezier(0, 0, 0.2, 1) infinite;
    }

    /* Basic dark mode toggle for demonstration, not part of the component itself but useful for testing */
    .dark-mode-toggle {
        position: fixed;
        bottom: 1rem;
        right: 1rem;
        background-color: #6d28d9; /* Deep Purple */
        color: white;
        padding: 0.75rem 1.25rem;
        border-radius: 9999px;
        cursor: pointer;
        font-family: sans-serif;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        z-index: 1000;
    }
    .dark .dark-mode-toggle {
        background-color: #db2777; /* Deep Pink */
    }
  </style>

  <!-- Simple Dark Mode Toggle (for demonstration) -->
  <button class="dark-mode-toggle" onclick="document.documentElement.classList.toggle('dark')">
    Toggle Dark Mode
  </button>

</div>

3D_Earth_Tone_Dating_Social_Navigation

A responsive navigation component for dating/social platforms, featuring a 3D-inspired design with earth tones and dark mode support. Includes interactive elements like a profile avatar, search, and core navigation links.

Open Preview

                <nav class="bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-900 dark:to-stone-800 shadow-xl relative z-40 rounded-b-xl overflow-hidden">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-20 items-center">
      <div class="flex-shrink-0 flex items-center">
        <a href="#" class="text-stone-700 dark:text-stone-300 font-bold text-2xl lg:text-3xl tracking-tight relative">
          <span class="block transform -translate-y-1 -translate-x-1 font-extrabold text-stone-500 opacity-20 dark:text-stone-400">LOV3D</span>
          <span class="absolute top-0 left-0 text-amber-700 dark:text-amber-500">LOV3D</span>
        </a>
      </div>

      <div class="hidden md:flex flex-grow justify-center space-x-8 lg:space-x-12">
        <a href="#" class="text-stone-700 hover:text-amber-700 dark:text-stone-300 dark:hover:text-amber-500 font-medium relative py-2 transition duration-300 ease-in-out group">
          Home
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-amber-500 dark:bg-amber-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
        </a>
        <a href="#" class="text-stone-700 hover:text-amber-700 dark:text-stone-300 dark:hover:text-amber-500 font-medium relative py-2 transition duration-300 ease-in-out group">
          Matches
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-amber-500 dark:bg-amber-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
        </a>
        <a href="#" class="text-stone-700 hover:text-amber-700 dark:text-stone-300 dark:hover:text-amber-500 font-medium relative py-2 transition duration-300 ease-in-out group">
          Messages
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-amber-500 dark:bg-amber-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
        </a>
        <a href="#" class="text-stone-700 hover:text-amber-700 dark:text-stone-300 dark:hover:text-amber-500 font-medium relative py-2 transition duration-300 ease-in-out group">
          Discover
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-amber-500 dark:bg-amber-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
        </a>
      </div>

      <div class="flex items-center space-x-4">
        <div class="relative hidden sm:block">
          <label for="search-input" class="sr-only">Search</label>
          <input
            type="text"
            id="search-input"
            placeholder="Search..."
            class="pl-10 pr-4 py-2 rounded-full border border-stone-300 dark:border-stone-700 bg-stone-50 dark:bg-stone-700 text-stone-800 dark:text-stone-200 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-400 w-36 lg:w-48 transition-all duration-300 ease-in-out shadow-inner dark:shadow-none"
          />
          <svg class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-stone-500 dark:text-stone-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
          </svg>
        </div>

        <div class="relative group">
          <button type="button" class="flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-amber-400 dark:focus:ring-offset-stone-800">
            <span class="sr-only">Open user menu</span>
            <img class="h-10 w-10 rounded-full object-cover border-2 border-amber-500 dark:border-amber-400 shadow-md transform transition-transform duration-300 group-hover:scale-105" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User avatar">
            <span class="absolute -bottom-1 -right-1 block h-3 w-3 rounded-full bg-green-500 border-2 border-stone-100 dark:border-stone-900"></span>
          </button>
          <!-- Dropdown for profile, settings (hidden by default, can be toggled with JS) -->
          <!-- <div class="origin-top-right absolute right-0 mt-2 w-48 rounded-lg shadow-lg py-1 bg-white dark:bg-stone-700 ring-1 ring-black ring-opacity-5 focus:outline-none"></div> -->
        </div>

        <!-- Mobile menu button -->
        <div class="-mr-2 flex md:hidden">
          <button type="button" class="bg-amber-600 dark:bg-amber-700 inline-flex items-center justify-center p-2 rounded-md text-stone-100 dark:text-stone-300 transition duration-150 ease-in-out hover:bg-amber-700 dark:hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-amber-500 dark:focus:ring-amber-400" aria-controls="mobile-menu" aria-expanded="false">
            <span class="sr-only">Open main menu</span>
            <!-- Icon when menu is closed. -->
            <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
            </svg>
            <!-- Icon when menu is open. -->
            <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="md:hidden absolute w-full bg-gradient-to-b from-stone-100 to-stone-200 dark:from-stone-900 dark:to-stone-800 shadow-lg pb-4 pt-2 -mt-1 transform transition-transform duration-300 ease-out scale-y-0 origin-top" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="text-stone-700 hover:bg-stone-300 dark:text-stone-300 dark:hover:bg-stone-700 block px-3 py-2 rounded-md text-base font-medium transition duration-150 ease-in-out">Home</a>
      <a href="#" class="text-stone-700 hover:bg-stone-300 dark:text-stone-300 dark:hover:bg-stone-700 block px-3 py-2 rounded-md text-base font-medium transition duration-150 ease-in-out">Matches</a>
      <a href="#" class="text-stone-700 hover:bg-stone-300 dark:text-stone-300 dark:hover:bg-stone-700 block px-3 py-2 rounded-md text-base font-medium transition duration-150 ease-in-out">Messages</a>
      <a href="#" class="text-stone-700 hover:bg-stone-300 dark:text-stone-300 dark:hover:bg-stone-700 block px-3 py-2 rounded-md text-base font-medium transition duration-150 ease-in-out">Discover</a>
    </div>
    <div class="border-t border-stone-300 dark:border-stone-700 pt-4 pb-3">
      <div class="flex items-center px-5">
        <div class="flex-shrink-0">
          <img class="h-10 w-10 rounded-full object-cover border-2 border-amber-500 dark:border-amber-400" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User avatar">
        </div>
        <div class="ml-3">
          <div class="text-base font-medium text-stone-800 dark:text-stone-200">John Doe</div>
          <div class="text-sm font-medium text-stone-500 dark:text-stone-400">[email protected]</div>
        </div>
      </div>
      <div class="mt-3 px-2 space-y-1">
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-stone-700 hover:bg-stone-300 dark:text-stone-300 dark:hover:bg-stone-700 transition duration-150 ease-in-out">Your Profile</a>
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-stone-700 hover:bg-stone-300 dark:text-stone-300 dark:hover:bg-stone-700 transition duration-150 ease-in-out">Settings</a>
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-stone-700 hover:bg-stone-300 dark:text-stone-300 dark:hover:bg-stone-700 transition duration-150 ease-in-out">Sign out</a>
      </div>
    </div>
  </div>
</nav>

<style>
  /* This is a placeholder for JS-driven interactivity to toggle the mobile menu. */
  /* For dynamic demo, you might add a class like 'mobile-menu-open' to 'nav' and manage its visibility. */
  #mobile-menu {
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0;
    pointer-events: none;
  }

  /* Example of how it would look when open with JS */
  /* nav.mobile-menu-open #mobile-menu {
    transform: scaleY(1);
    opacity: 1;
    pointer-events: auto;
  } */
</style>

Hamburger Menu Component for Food/Restaurant (Memphis Pastel)

A simple, responsive hamburger menu component for food/restaurant websites, featuring a Memphis Design aesthetic with pastel colors. Includes dark mode support.

Open Preview

                <nav class="bg-pink-100 dark:bg-sky-950 p-4 shadow-md font-sans">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-orange-500 dark:text-orange-300 text-3xl font-bold tracking-tight transform -rotate-3 hover:scale-105 transition-transform duration-300 ease-in-out">
      <span class="block">YUM!</span>
      <span class="text-blue-400 dark:text-blue-200 text-sm block font-normal mt-0.5">Menu</span>
    </a>

    <!-- Desktop Menu -->
    <div class="hidden md:flex space-x-6 lg:space-x-8 items-center">
      <a href="#home" class="text-purple-600 dark:text-purple-200 text-lg font-semibold hover:text-orange-500 dark:hover:text-orange-300 transition duration-200 ease-in-out relative group">
        Home
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-orange-500 dark:bg-orange-300 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </a>
      <a href="#menu" class="text-purple-600 dark:text-purple-200 text-lg font-semibold hover:text-orange-500 dark:hover:text-orange-300 transition duration-200 ease-in-out relative group">
        Our Menu
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-orange-500 dark:bg-orange-300 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </a>
      <a href="#offers" class="text-purple-600 dark:text-purple-200 text-lg font-semibold hover:text-orange-500 dark:hover:text-orange-300 transition duration-200 ease-in-out relative group">
        Special Offers
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-orange-500 dark:bg-orange-300 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </a>
      <a href="#contact" class="text-purple-600 dark:text-purple-200 text-lg font-semibold hover:text-orange-500 dark:hover:text-orange-300 transition duration-200 ease-in-out relative group">
        Contact
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-orange-500 dark:bg-orange-300 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </a>
      <button class="px-6 py-2 rounded-full bg-orange-400 dark:bg-orange-600 text-white dark:text-gray-100 text-lg font-bold shadow-lg transform -skew-x-6 hover:skew-x-0 hover:scale-105 transition-all duration-300 ease-in-out">
        Order Now!
      </button>
    </div>

    <!-- Mobile Hamburger Button (visible on small screens) -->
    <div class="md:hidden">
      <button id="mobile-menu-button" class="text-purple-600 dark:text-purple-200 focus:outline-none">
        <svg class="w-8 h-8 transform rotate-6 hover:rotate-0 transition-transform duration-300 ease-in-out" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu (hidden by default, shown with JS) -->
  <div id="mobile-menu" class="md:hidden hidden bg-pink-50 dark:bg-sky-900 border-t border-purple-200 dark:border-sky-800 mt-4 py-4 rounded-b-lg shadow-inner">
    <div class="flex flex-col items-center space-y-4">
      <a href="#home" class="block text-purple-600 dark:text-purple-200 text-lg font-semibold hover:text-orange-500 dark:hover:text-orange-300 transition duration-200 ease-in-out py-2 px-4 rounded-md w-full text-center hover:bg-purple-100 dark:hover:bg-sky-800">
        Home
      </a>
      <a href="#menu" class="block text-purple-600 dark:text-purple-200 text-lg font-semibold hover:text-orange-500 dark:hover:text-orange-300 transition duration-200 ease-in-out py-2 px-4 rounded-md w-full text-center hover:bg-purple-100 dark:hover:bg-sky-800">
        Our Menu
      </a>
      <a href="#offers" class="block text-purple-600 dark:text-purple-200 text-lg font-semibold hover:text-orange-500 dark:hover:text-orange-300 transition duration-200 ease-in-out py-2 px-4 rounded-md w-full text-center hover:bg-purple-100 dark:hover:bg-sky-800">
        Special Offers
      </a>
      <a href="#contact" class="block text-purple-600 dark:text-purple-200 text-lg font-semibold hover:text-orange-500 dark:hover:text-orange-300 transition duration-200 ease-in-out py-2 px-4 rounded-md w-full text-center hover:bg-purple-100 dark:hover:bg-sky-800">
        Contact
      </a>
      <button class="mt-4 px-8 py-3 rounded-full bg-orange-400 dark:bg-orange-600 text-white dark:text-gray-100 text-xl font-bold shadow-lg transform -skew-x-6 hover:skew-x-0 hover:scale-105 transition-all duration-300 ease-in-out w-4/5">
        Order Now!
      </button>
    </div>
  </div>
</nav>

<!-- JavaScript to toggle the mobile menu -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const button = document.getElementById('mobile-menu-button');
    const menu = document.getElementById('mobile-menu');

    button.addEventListener('click', function() {
      menu.classList.toggle('hidden');
    });
  });
<\/script>

Skip to Content Link Component

A simple, responsive 'Skip to Content' link component with a watercolor/artistic style, a triadic color scheme, and agriculture/farming thematic elements, supporting dark mode.

Open Preview

                <div class="bg-green-50 dark:bg-gray-900 min-h-screen p-4 sm:p-6 md:p-8 flex items-center justify-center font-sans relative">
  <!-- Skip to Content Link -->
  <a href="#main-content" class="
      absolute top-0 left-1/2 -translate-x-1/2 -translate-y-full px-4 py-2 mt-2
      bg-yellow-600 text-white rounded-md shadow-lg
      focus:translate-y-0 focus:z-50
      transition-transform duration-300 ease-out
      text-sm sm:text-base
      dark:bg-yellow-700 dark:text-gray-100
      border-2 border-transparent focus:border-green-800 dark:focus:border-green-300
      font-bold tracking-wide
    ">Skip to Main Content</a>

  <!-- Main content area (example) -->
  <main id="main-content" class="
      bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 sm:p-8 md:p-10
      max-w-4xl w-full text-center
      border-t-8 border-yellow-500 dark:border-yellow-600
      relative overflow-hidden
    ">
    <!-- Artistic element: Subtle green watercolor splash -->
    <div class="
        absolute top-0 left-0 w-full h-full
        bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-green-100/50 to-transparent
        dark:from-green-900/30 dark:to-transparent
        pointer-events-none
        opacity-70 dark:opacity-50
      "></div>
    <h1 class="text-2xl sm:text-3xl md:text-4xl font-extrabold text-green-800 dark:text-green-300 mb-4 sm:mb-6 leading-tight">
      Harvesting Growth, Nurturing Nature
    </h1>
    <p class="text-gray-700 dark:text-gray-300 text-base sm:text-lg mb-6 sm:mb-8 max-w-2xl mx-auto leading-relaxed">
      Welcome to our agricultural hub. We cultivate innovation and sustainable practices,
      bringing forth the bounty of the earth.
    </p>
    <img src="https://picsum.photos/seed/agriculture/800/450" alt="Agricultural field at sunset" class="rounded-lg shadow-md mb-6 sm:mb-8 w-full h-auto object-cover">
    <p class="text-gray-600 dark:text-gray-400 text-sm sm:text-base leading-relaxed">
      Our commitment extends from seed to harvest, ensuring quality and fostering a thriving ecosystem.
      Explore our offerings below.
    </p>
    <div class="mt-8 flex flex-col sm:flex-row justify-center gap-4">
      <button class="
        bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-lg
        shadow-md transition duration-300 ease-in-out
        dark:bg-blue-700 dark:hover:bg-blue-800
        border-2 border-transparent hover:border-blue-800 dark:hover:border-blue-300
        relative overflow-hidden
      ">
        <span class="relative z-10">Learn More</span>
        <span class="
          absolute inset-0 bg-white/10 dark:bg-white/20 opacity-0
          hover:opacity-100 transition-opacity duration-300 ease-in-out
        "></span>
      </button>
      <button class="
        bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-6 rounded-lg
        shadow-md transition duration-300 ease-in-out
        dark:bg-green-800 dark:hover:bg-green-900
        border-2 border-transparent hover:border-green-900 dark:hover:border-green-400
        relative overflow-hidden
      ">
        <span class="relative z-10">Our Products</span>
        <span class="
          absolute inset-0 bg-white/10 dark:bg-white/20 opacity-0
          hover:opacity-100 transition-opacity duration-300 ease-in-out
        "></span>
      </button>
    </div>
  </main>
</div>

Back to Top Button Component

A responsive 'Back to Top' button component designed for e-commerce, featuring a vibrant color scheme on a dark background. It includes a subtle hover effect and ensures visibility across all screen sizes with dark mode support.

Open Preview

                <div class="fixed bottom-4 right-4 z-50">
  <a href="#top" class="group block p-3 rounded-full bg-gradient-to-br from-purple-600 to-indigo-500 shadow-lg transition-all duration-300 ease-in-out hover:from-purple-700 hover:to-indigo-600 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-800">
    <svg class="w-6 h-6 text-white transform transition-transform duration-300 ease-in-out group-hover:-translate-y-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
    </svg>
    <span class="sr-only">Back to Top</span>
  </a>
</div>

User Mentions Component

A complex, responsive user mentions component for educational platforms with a watercolor/artistic style, cool neutral color scheme, and dark mode support. Features user avatars, names, roles, and a subtle watercolor background effect.

Open Preview

                <div class="font-sans antialiased bg-stone-50 text-stone-800 dark:bg-stone-900 dark:text-stone-100 p-4 sm:p-8 md:p-12 min-h-screen">

  <!-- Watercolour Background Effect via pseudo-elements and gradients -->
  <style>
    .watercolor-bg {
      position: relative;
      overflow: hidden;
    }
    .watercolor-bg::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle at 10% 20%, rgba(200, 220, 230, 0.3) 0%, transparent 25%),
                  radial-gradient(circle at 70% 30%, rgba(200, 210, 220, 0.2) 0%, transparent 30%),
                  radial-gradient(circle at 30% 80%, rgba(230, 235, 240, 0.4) 0%, transparent 20%),
                  radial-gradient(circle at 90% 90%, rgba(210, 225, 235, 0.3) 0%, transparent 25%);
      background-blend-mode: overlay;
      opacity: 0.7;
      transform: rotate(15deg);
      z-index: -1;
      filter: blur(80px);
    }
    .dark .watercolor-bg::before {
      background: radial-gradient(circle at 10% 20%, rgba(60, 70, 80, 0.3) 0%, transparent 25%),
                  radial-gradient(circle at 70% 30%, rgba(50, 60, 70, 0.2) 0%, transparent 30%),
                  radial-gradient(circle at 30% 80%, rgba(70, 80, 90, 0.4) 0%, transparent 20%),
                  radial-gradient(circle at 90% 90%, rgba(60, 75, 85, 0.3) 0%, transparent 25%);
    }
  </style>

  <div class="max-w-4xl mx-auto rounded-3xl overflow-hidden 
              bg-gradient-to-br from-white to-stone-50 dark:from-stone-800 dark:to-stone-900
              shadow-xl dark:shadow-stone-700/30 border border-stone-200 dark:border-stone-700
              watercolor-bg relative p-6 sm:p-8 md:p-10">

    <h2 class="text-3xl sm:text-4xl font-extrabold text-stone-900 dark:text-stone-50 mb-6 sm:mb-8 text-center">
      Mentions & Collaborators
    </h2>

    <p class="text-center text-stone-600 dark:text-stone-300 mb-8 sm:mb-10 text-lg">
      Engage with fellow learners and instructors by mentioning them in your discussions.
    </p>

    <!-- Search/Filter Input -->
    <div class="mb-8 sm:mb-10 relative">
      <input type="text" placeholder="Search users or roles..." class="w-full p-3 sm:p-4 pl-12 rounded-xl 
            bg-stone-100 dark:bg-stone-700 
            border border-stone-300 dark:border-stone-600 
            text-stone-800 dark:text-stone-50 
            placeholder-stone-500 dark:placeholder-stone-400 
            focus:ring-2 focus:ring-blue-400 focus:border-transparent 
            transition duration-200 ease-in-out">
      <svg class="absolute left-4 top-1/2 -translate-y-1/2 text-stone-500 dark:text-stone-400" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <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>

    <!-- User List Grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">

      <!-- User Card 1 -->
      <div class="flex flex-col items-center p-5 sm:p-6 rounded-2xl 
                  bg-stone-50 dark:bg-stone-800 
                  shadow-md dark:shadow-stone-900/20 
                  border border-stone-200 dark:border-stone-700 
                  hover:shadow-lg dark:hover:shadow-stone-700/40 transform hover:-translate-y-1 transition duration-300 ease-in-out">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Alice Wonderland avatar" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-4 ring-2 ring-blue-300 dark:ring-blue-600/70 p-0.5">
        <h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-1">Alice Wonderland</h3>
        <p class="text-blue-600 dark:text-blue-400 text-sm font-medium mb-3">Lead Instructor</p>
        <p class="text-center text-stone-600 dark:text-stone-300 text-sm">Specializes in Advanced Algebra.</p>
        <button class="mt-4 px-4 py-2 text-sm rounded-full bg-blue-500 text-white hover:bg-blue-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
          Mention User
        </button>
      </div>

      <!-- User Card 2 -->
      <div class="flex flex-col items-center p-5 sm:p-6 rounded-2xl 
                  bg-stone-50 dark:bg-stone-800 
                  shadow-md dark:shadow-stone-900/20 
                  border border-stone-200 dark:border-stone-700 
                  hover:shadow-lg dark:hover:shadow-stone-700/40 transform hover:-translate-y-1 transition duration-300 ease-in-out">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Bob The Builder avatar" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-4 ring-2 ring-purple-300 dark:ring-purple-600/70 p-0.5">
        <h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-1">Bob The Builder</h3>
        <p class="text-purple-600 dark:text-purple-400 text-sm font-medium mb-3">Student Helper</p>
        <p class="text-center text-stone-600 dark:text-stone-300 text-sm">Experienced in Geometry.</p>
        <button class="mt-4 px-4 py-2 text-sm rounded-full bg-blue-500 text-white hover:bg-blue-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
          Mention User
        </button>
      </div>

      <!-- User Card 3 -->
      <div class="flex flex-col items-center p-5 sm:p-6 rounded-2xl 
                  bg-stone-50 dark:bg-stone-800 
                  shadow-md dark:shadow-stone-900/20 
                  border border-stone-200 dark:border-stone-700 
                  hover:shadow-lg dark:hover:shadow-stone-700/40 transform hover:-translate-y-1 transition duration-300 ease-in-out">
        <img src="https://randomuser.me/api/portraits/women/5.jpg" alt="Charlie Chaplin avatar" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-4 ring-2 ring-green-300 dark:ring-green-600/70 p-0.5">
        <h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-1">Charlie Chaplin</h3>
        <p class="text-green-600 dark:text-green-400 text-sm font-medium mb-3">Course Administrator</p>
        <p class="text-center text-stone-600 dark:text-stone-300 text-sm">Manages course registrations.</p>
        <button class="mt-4 px-4 py-2 text-sm rounded-full bg-blue-500 text-white hover:bg-blue-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
          Mention User
        </button>
      </div>

      <!-- User Card 4 -->
      <div class="flex flex-col items-center p-5 sm:p-6 rounded-2xl 
                  bg-stone-50 dark:bg-stone-800 
                  shadow-md dark:shadow-stone-900/20 
                  border border-stone-200 dark:border-stone-700 
                  hover:shadow-lg dark:hover:shadow-stone-700/40 transform hover:-translate-y-1 transition duration-300 ease-in-out">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="David Copperfield avatar" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-4 ring-2 ring-indigo-300 dark:ring-indigo-600/70 p-0.5">
        <h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-1">David Copperfield</h3>
        <p class="text-indigo-600 dark:text-indigo-400 text-sm font-medium mb-3">Teaching Assistant</p>
        <p class="text-center text-stone-600 dark:text-stone-300 text-sm">Aids with Calculus problems.</p>
        <button class="mt-4 px-4 py-2 text-sm rounded-full bg-blue-500 text-white hover:bg-blue-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
          Mention User
        </button>
      </div>

      <!-- User Card 5 -->
      <div class="flex flex-col items-center p-5 sm:p-6 rounded-2xl 
                  bg-stone-50 dark:bg-stone-800 
                  shadow-md dark:shadow-stone-900/20 
                  border border-stone-200 dark:border-stone-700 
                  hover:shadow-lg dark:hover:shadow-stone-700/40 transform hover:-translate-y-1 transition duration-300 ease-in-out">
        <img src="https://randomuser.me/api/portraits/women/11.jpg" alt="Eve Harrington avatar" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-4 ring-2 ring-pink-300 dark:ring-pink-600/70 p-0.5">
        <h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-1">Eve Harrington</h3>
        <p class="text-pink-600 dark:text-pink-400 text-sm font-medium mb-3">Instructor</p>
        <p class="text-center text-stone-600 dark:text-stone-300 text-sm">Teaches Discrete Mathematics.</p>
        <button class="mt-4 px-4 py-2 text-sm rounded-full bg-blue-500 text-white hover:bg-blue-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
          Mention User
        </button>
      </div>

      <!-- User Card 6 -->
      <div class="flex flex-col items-center p-5 sm:p-6 rounded-2xl 
                  bg-stone-50 dark:bg-stone-800 
                  shadow-md dark:shadow-stone-900/20 
                  border border-stone-200 dark:border-stone-700 
                  hover:shadow-lg dark:hover:shadow-stone-700/40 transform hover:-translate-y-1 transition duration-300 ease-in-out">
        <img src="https://randomuser.me/api/portraits/men/24.jpg" alt="Frankenstein avatar" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-4 ring-2 ring-orange-300 dark:ring-orange-600/70 p-0.5">
        <h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-1">Frankenstein</h3>
        <p class="text-orange-600 dark:text-orange-400 text-sm font-medium mb-3">Student</p>
        <p class="text-center text-stone-600 dark:text-stone-300 text-sm">Learning Python Programming.</p>
        <button class="mt-4 px-4 py-2 text-sm rounded-full bg-blue-500 text-white hover:bg-blue-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
          Mention User
        </button>
      </div>

    </div>

    <!-- Pagination/Load More (Placeholder) -->
    <div class="mt-10 flex justify-center">
      <button class="px-6 py-3 rounded-full bg-blue-500 text-white text-lg font-medium 
                     hover:bg-blue-600 transition duration-300 ease-in-out 
                     focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-stone-800 
                     shadow-lg hover:shadow-xl">
        Load More Users
      </button>
    </div>

  </div>
</div>

360_Viewer_Component_Retro_Rainbow_Simple_Ecommerce

A simple, retro-themed 360 viewer component for e-commerce, featuring a rainbow gradient, responsive design, and dark mode support. Designed to evoke 80s/90s nostalgia.

Open Preview

                <div class="flex items-center justify-center min-h-screen p-4 bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 font-mono text-gray-800 dark:text-gray-200">
  <div class="w-full max-w-sm p-4 border-4 border-b-8 border-r-8 border-[#1A1A1A] dark:border-gray-600 rounded-lg shadow-xl bg-gradient-to-br from-indigo-200 via-purple-200 to-pink-200 dark:from-gray-700 dark:via-gray-600 dark:to-gray-500 overflow-hidden relative group">
    <!-- Top 'display' section -->
    <div class="bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 rounded-t-sm p-1 shadow-inner opacity-90">
      <div class="bg-black border border-gray-700 rounded-sm overflow-hidden aspect-video relative flex items-center justify-center">
        <img src="https://picsum.photos/400/300?random=1" alt="Product view" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"/>
        <!-- 'Lens flare' effect -->
        <div class="absolute w-1/2 h-1/2 bg-white opacity-10 rounded-full blur-xl animate-pulse"></div>
      </div>
    </div>

    <!-- Controls section -->
    <div class="p-3 bg-gradient-to-r from-blue-400 via-indigo-400 to-purple-400 dark:from-blue-700 dark:via-indigo-700 dark:to-purple-700 rounded-b-md shadow-inner mt-2 border-t-2 border-black dark:border-gray-800">
      <div class="flex justify-around items-center space-x-2">
        <button class="flex-1 py-2 px-3 bg-gradient-to-br from-gray-700 to-gray-900 text-white dark:from-gray-200 dark:to-gray-400 dark:text-gray-900 rounded-full border-2 border-gray-500 dark:border-gray-600 text-sm font-bold shadow-md hover:from-gray-600 hover:to-gray-800 hover:scale-105 transition-transform duration-200 opacity-90">
          &lt; prev
        </button>
        <button class="relative flex-none w-16 h-16 bg-gradient-to-br from-yellow-300 via-orange-400 to-red-500 dark:from-yellow-600 dark:via-orange-700 dark:to-red-800 rounded-full border-4 border-yellow-200 dark:border-yellow-500 grid place-items-center text-gray-900 dark:text-gray-100 font-extrabold text-2xl shadow-lg hover:from-yellow-200 hover:to-red-400 hover:shadow-xl transition-all duration-300 animate-bounce-slowest">
          &#x21BB;
          <!-- 360 icon -->
          <span class="absolute top-1 right-1 text-xs text-black dark:text-white transform rotate-12">360°</span>
        </button>
        <button class="flex-1 py-2 px-3 bg-gradient-to-br from-gray-700 to-gray-900 text-white dark:from-gray-200 dark:to-gray-400 dark:text-gray-900 rounded-full border-2 border-gray-500 dark:border-gray-600 text-sm font-bold shadow-md hover:from-gray-600 hover:to-gray-800 hover:scale-105 transition-transform duration-200 opacity-90">
          next &gt;
        </button>
      </div>
      <div class="flex justify-around items-center text-xs mt-3 text-white dark:text-gray-900 font-bold opacity-80">
        <span>Angle: 0°</span>
        <span>Zoom: 1x</span>
      </div>
    </div>

    <!-- Decorative 'LED' indicators -->
    <div class="absolute top-4 left-4 flex space-x-1.5">
      <span class="w-3 h-3 rounded-full bg-red-500 animate-pulse-slow shadow-lg shadow-red-500/50"></span>
      <span class="w-3 h-3 rounded-full bg-yellow-400 animate-pulse-slow animation-delay-100 shadow-lg shadow-yellow-400/50"></span>
      <span class="w-3 h-3 rounded-full bg-green-500 animate-pulse-slow animation-delay-200 shadow-lg shadow-green-500/50"></span>
    </div>

    <!-- Retro Price Tag -->
    <div class="absolute bottom-4 right-4 bg-gradient-to-br from-lime-300 to-green-500 dark:to-green-700 px-4 py-2 rounded-lg rotate-6 border-2 border-green-700 dark:border-green-300 shadow-xl font-bold text-lg text-black dark:text-gray-900 opacity-95 group-hover:rotate-0 group-hover:scale-110 transition-all duration-300">
        <span class="text-sm line-through text-red-700 dark:text-red-300">$129.99</span><br>$99.99
    </div>
  </div>

  <!-- Custom animations for retro feel -->
  <style>
    @keyframes bounce-slowest {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-5px); }
    }
    @keyframes pulse-slow {
      0%, 100% { opacity: 0.8; }
      50% { opacity: 1; }
    }
    .animate-bounce-slowest {
      animation: bounce-slowest 3s infinite ease-in-out;
    }
    .animate-pulse-slow {
      animation: pulse-slow 2s infinite ease-in-out;
    }
    .animation-delay-100 {
      animation-delay: 0.1s;
    }
    .animation-delay-200 {
      animation-delay: 0.2s;
    }
  </style>
</div>

Art Deco Toast Notifications Component

A simple, high-contrast toast notification component with an Art Deco aesthetic, suitable for news and journalism websites. Features responsive design and dark mode support.

Open Preview

                <div class="fixed bottom-4 right-4 z-50 w-full max-w-xs pointer-events-none p-4">
  <!-- Success Toast -->
  <div class="bg-white dark:bg-zinc-800 border-2 border-green-600 dark:border-green-400 text-zinc-900 dark:text-zinc-50 font-sans shadow-lg rounded-lg overflow-hidden mb-4 transform transition-all duration-300 pointer-events-auto hover:scale-[1.02] active:scale-95 animate-fade-in-up md:animate-slide-in-right">
  <div class="flex items-center p-4 border-b-2 border-green-600 dark:border-green-400 bg-green-500 dark:bg-green-700/80">
      <svg class="w-6 h-6 text-white 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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
      <h3 class="text-lg font-bold text-white uppercase tracking-wider">Success!</h3>
      <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-green-500 dark:bg-green-700/80 text-white hover:text-green-900 focus:ring-2 focus:ring-green-300 p-1.5 rounded-lg inline-flex h-8 w-8 transition-colors duration-200">
        <span class="sr-only">Close</span>
        <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="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
      </button>
    </div>
    <div class="p-4">
      <p class="text-sm italic">Your article has been successfully published to the public eye. Check your dashboard for insights.</p>
    </div>
  </div>

  <!-- Error Toast -->
  <div class="bg-white dark:bg-zinc-800 border-2 border-red-600 dark:border-red-400 text-zinc-900 dark:text-zinc-50 font-sans shadow-lg rounded-lg overflow-hidden transform transition-all duration-300 pointer-events-auto hover:scale-[1.02] active:scale-95 animate-fade-in-up md:animate-slide-in-right">
    <div class="flex items-center p-4 border-b-2 border-red-600 dark:border-red-400 bg-red-500 dark:bg-red-700/80">
      <svg class="w-6 h-6 text-white 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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
      <h3 class="text-lg font-bold text-white uppercase tracking-wider">Error!</h3>
      <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-red-500 dark:bg-red-700/80 text-white hover:text-red-900 focus:ring-2 focus:ring-red-300 p-1.5 rounded-lg inline-flex h-8 w-8 transition-colors duration-200">
        <span class="sr-only">Close</span>
        <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="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
      </button>
    </div>
    <div class="p-4">
      <p class="text-sm italic">Failed to publish your article. Please check your network connection or try again later.</p>
    </div>
  </div>
</div>

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

  @keyframes slide-in-right {
    from {
      opacity: 0;
      transform: translateX(20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .animate-fade-in-up {
    animation: fade-in-up 0.5s ease-out forwards;
  }

  .md\:animate-slide-in-right {
    animation: none; /* Reset for mobile */
  }

  @media (min-width: 768px) {
    .md\:animate-slide-in-right {
      animation: slide-in-right 0.5s ease-out forwards;
    }
  }
</style>

Social Components Component

A simple, retro/vintage-themed social component inspired by paper/print materials for e-commerce, showcasing a user profile snippet with dark mode support.

Open Preview

                <div class="font-sans p-4 sm:p-6 md:p-8 bg-amber-50 dark:bg-zinc-800 text-stone-800 dark:text-stone-200 min-h-screen">
  <div class="max-w-xs mx-auto bg-amber-100 dark:bg-zinc-700 shadow-md shadow-stone-300 dark:shadow-zinc-900 rounded-lg overflow-hidden border border-amber-200 dark:border-zinc-600 transition-all duration-300 ease-in-out hover:shadow-lg hover:shadow-stone-400 dark:hover:shadow-zinc-950">
    <div class="relative p-4 sm:p-5 border-b border-amber-200 dark:border-zinc-600">
      <div class="flex items-center justify-between">
        <h3 class="text-lg sm:text-xl font-semibold text-stone-700 dark:text-stone-100">User Profile</h3>
        <button aria-label="Settings" class="text-stone-500 dark:text-stone-300 hover:text-stone-700 dark:hover:text-stone-100 transition-colors duration-200">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" 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 stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
          </svg>
        </button>
      </div>
    </div>
    <div class="p-4 sm:p-5 flex flex-col items-center">
      <img class="w-24 h-24 sm:w-28 sm:h-28 rounded-full border-4 border-amber-300 dark:border-zinc-500 mb-4 object-cover shadow-sm shadow-stone-300 dark:shadow-zinc-900" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
      <h4 class="text-xl sm:text-2xl font-bold text-stone-700 dark:text-stone-100 mb-1">Jane Doe</h4>
      <p class="text-sm text-stone-500 dark:text-stone-300 mb-4">Verified Buyer</p>
      <div class="flex space-x-4 mb-4">
        <div class="text-center">
          <p class="text-lg font-semibold text-stone-600 dark:text-stone-200">124</p>
          <p class="text-xs text-stone-500 dark:text-stone-400">Followers</p>
        </div>
        <div class="text-center">
          <p class="text-lg font-semibold text-stone-600 dark:text-stone-200">89</p>
          <p class="text-xs text-stone-500 dark:text-stone-400">Following</p>
        </div>
      </div>
      <button class="w-full py-2 px-4 rounded-md bg-rose-500 dark:bg-rose-700 text-white text-base font-medium shadow-sm transition-all duration-200 ease-in-out hover:bg-rose-600 dark:hover:bg-rose-800 focus:outline-none focus:ring-2 focus:ring-rose-400 dark:focus:ring-rose-600 focus:ring-opacity-75">
        View Profile
      </button>
    </div>
    <div class="p-4 sm:p-5 border-t border-amber-200 dark:border-zinc-600 bg-amber-50 dark:bg-zinc-800 text-center">
      <p class="text-xs text-stone-500 dark:text-stone-400">Last active 2 hours ago</p>
    </div>
  </div>
</div>

Header Component

A simple, responsive header component for a blog or content site with monochromatic styling and dark mode support, focusing on subtle microinteractions when hovering over navigation links.

Open Preview

                <header class="bg-gray-100 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 shadow-sm transition-colors duration-300">
  <div class="container mx-auto px-4 py-4 flex flex-col md:flex-row justify-between items-center">
    <div class="flex items-center mb-4 md:mb-0">
      <a href="#" class="text-2xl font-bold text-gray-800 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
        MyBlog
      </a>
    </div>
    <nav class="">
      <ul class="flex flex-wrap justify-center gap-x-6 gap-y-2">
        <li>
          <a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-all duration-200 ease-in-out font-medium group py-1 px-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
            Home
            <span class="absolute left-0 bottom-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
          </a>
        </li>
        <li>
          <a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-all duration-200 ease-in-out font-medium group py-1 px-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
            Articles
            <span class="absolute left-0 bottom-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
          </a>
        </li>
        <li>
          <a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-all duration-200 ease-in-out font-medium group py-1 px-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
            About
            <span class="absolute left-0 bottom-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
          </a>
        </li>
        <li>
          <a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-all duration-200 ease-in-out font-medium group py-1 px-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
            Contact
            <span class="absolute left-0 bottom-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</header>

1 ... 12 13 14 15 16 ... 335

Search Components

Categories

All Components