Search Components

All Components

Browse all available Tailwind CSS components

Sidebar Navigation Component - Gaming

A minimalist, responsive sidebar navigation component with black, white, and a bright accent color, designed for gaming websites. Includes dark mode support.

Open Preview

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900 font-sans">

  <!-- Mobile Menu Toggle Button (hidden on desktop) -->
  <button class="p-4 text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 md:hidden absolute top-0 left-0 z-20" aria-label="Toggle Navigation">
    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
    </svg>
  </button>

  <!-- Sidebar -->
  <aside class="w-64 bg-white dark:bg-gray-800 shadow-lg md:relative absolute inset-y-0 left-0 transform -translate-x-full md:translate-x-0 transition-transform duration-200 ease-in-out z-10" id="sidebar">
    <div class="flex flex-col h-full">
      <!-- Logo/Title -->
      <div class="p-6 border-b border-gray-200 dark:border-gray-700">
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">GameForge</h1>
      </div>

      <!-- Navigation Links -->
      <nav class="flex-1 p-4 space-y-2">
        <a href="#dashboard" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 group">
          <svg class="h-5 w-5 mr-3 text-gray-500 dark:text-gray-400 group-hover:text-blue-500 dark:group-hover:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
          </svg>
          <span class="font-medium">Dashboard</span>
        </a>
        <a href="#games" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 group">
          <svg class="h-5 w-5 mr-3 text-gray-500 dark:text-gray-400 group-hover:text-blue-500 dark:group-hover:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.792 2-4 2s-4-.895-4-2 1.792-2 4-2 4 .895 4 2zm12-2v2m-6-2v2M6 16.5V11M9 13V6l2-1m-2 7a2 2 0 11-4 0 2 2 0 014 0zm10.75-2.25l-2-2-4 4-2 2z" />
          </svg>
          <span class="font-medium">My Games</span>
        </a>
        <a href="#community" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 group">
          <svg class="h-5 w-5 mr-3 text-gray-500 dark:text-gray-400 group-hover:text-blue-500 dark:group-hover:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a3 3 0 015.356-1.857M17 20v-2c0-.35L3 4m7 2a4 4 0 11-8 0 4 4 0 018 0zm0 0c1.734-.843 2.002-2.906 1.157-4.64C10.16 2.766 8.1 2.498 6.357 3.353m6.762 6.762A4 4 0 1120 16a4 4 0 01-8 0zv" />
          </svg>
          <span class="font-medium">Community</span>
        </a>
        <a href="#store" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 group">
          <svg class="h-5 w-5 mr-3 text-gray-500 dark:text-gray-400 group-hover:text-blue-500 dark:group-hover:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
          </svg>
          <span class="font-medium">Store</span>
        </a>
        <a href="#settings" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 group">
          <svg class="h-5 w-5 mr-3 text-gray-500 dark:text-gray-400 group-hover:text-blue-500 dark:group-hover:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37a1.724 1.724 0 002.572-1.065z" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
          </svg>
          <span class="font-medium">Settings</span>
        </a>
      </nav>

      <!-- User Profile/Accent Section -->
      <div class="p-4 border-t border-gray-200 dark:border-gray-700 mt-auto">
        <div class="flex items-center space-x-3">
          <img class="h-10 w-10 rounded-full ring-2 ring-blue-500 dark:ring-blue-400" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
          <div class="leading-none">
            <p class="text-sm font-semibold text-gray-900 dark:text-white">PlayerOne</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Level 42</p>
          </div>
        </div>
      </div>
    </div>
  </aside>

  <!-- Main Content Area (for demonstration, can be styled further) -->
  <main class="flex-1 p-8 overflow-y-auto">
    <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">Welcome, PlayerOne!</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Latest Achievement</h3>
        <p class="text-gray-600 dark:text-gray-300">Unlocked 'Master Adventurer' in 'The Eldoria Chronicles'!</p>
        <img class="mt-4 rounded-md object-cover w-full h-32" src="https://picsum.photos/300/200?random=1" alt="Achievement thumbnail">
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">New Game Releases</h3>
        <p class="text-gray-600 dark:text-gray-300">Check out the highly anticipated 'Galactic Conquest' this week!</p>
        <img class="mt-4 rounded-md object-cover w-full h-32" src="https://picsum.photos/300/200?random=2" alt="New game thumbnail">
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Community Highlights</h3>
        <p class="text-gray-600 dark:text-gray-300">Top 5 'Fortress Siege' strategies discussed in forums.</p>
        <img class="mt-4 rounded-md object-cover w-full h-32" src="https://picsum.photos/300/200?random=3" alt="Community thumbnail">
      </div>
    </div>
  </main>

  <!-- Optional: Overlay for mobile menu -->
  <div class="fixed inset-0 bg-black bg-opacity-50 z-5 hidden md:hidden" id="sidebar-overlay"></div>

</div>

<!-- Simple JavaScript for mobile menu toggle - Note: This is an exception for demonstration purposes as per prompt, but component is designed to render without JS. -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const toggleButton = document.querySelector('button[aria-label="Toggle Navigation"]');
    const sidebar = document.getElementById('sidebar');
    const overlay = document.getElementById('sidebar-overlay');

    if (toggleButton && sidebar && overlay) {
      toggleButton.addEventListener('click', () => {
        sidebar.classList.toggle('-translate-x-full');
        overlay.classList.toggle('hidden');
      });

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

Paper/Print-Inspired Rainbow Gradient Data Table

A simple, responsive data table component with a paper/print-inspired design and a subtle rainbow gradient background, suitable for dashboards. Includes dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 min-h-screen bg-gradient-to-br from-blue-100 via-purple-100 to-pink-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 font-sans">

  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 print-effect">
    <div class="p-4 sm:p-6 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-xl sm:text-2xl font-semibold text-gray-800 dark:text-gray-100">Dashboard Data</h2>
      <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Overview of recent activities.</p>
    </div>

    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
        <thead class="bg-gray-50 dark:bg-gray-700">
          <tr>
            <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
              Project
            </th>
            <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
              Status
            </th>
            <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
              Due Date
            </th>
            <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
              Members
            </th>
          </tr>
        </thead>
        <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
          <tr>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Q3 Marketing Campaign</div>
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100">
                Completed
              </span>
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
              2023-09-30
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="flex -space-x-2 overflow-hidden">
                <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
                <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
              </div>
            </td>
          </tr>
          <tr>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Website Redesign V2</div>
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-100">
                In Progress
              </span>
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
              2023-11-15
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="flex -space-x-2 overflow-hidden">
                <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
                <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar">
                <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar">
              </div>
            </td>
          </tr>
          <tr>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Client Onboarding Process</div>
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-700 dark:text-blue-100">
                Pending
              </span>
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
              2023-10-01
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="flex -space-x-2 overflow-hidden">
                <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Avatar">
              </div>
            </td>
          </tr>
          <tr>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Annual Budget Review</div>
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-700 dark:text-red-100">
                Delayed
              </span>
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
              2023-12-31
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="flex -space-x-2 overflow-hidden">
                <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/men/7.jpg" alt="Avatar">
                <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/8.jpg" alt="Avatar">
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="p-4 sm:p-6 border-t border-gray-200 dark:border-gray-700 text-right">
      <p class="text-sm text-gray-500 dark:text-gray-400">Last updated: Oct 26, 2023</p>
    </div>
  </div>

  <style>
    /* Basic print-like shadow/border, optional for subtle effect */
    .print-effect {
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
      position: relative;
    }
    /* Optional: Add a subtle paper texture or slight curl via pseudo-elements */
    .print-effect::before,
    .print-effect::after {
      content: '';
      position: absolute;
      z-index: -1;
      transform: rotate(-0.5deg);
      box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.2);
      transition: transform 0.3s ease;
    }
    .print-effect::before {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: inherit;
      border-radius: inherit;
    }
    .print-effect::after {
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      background: inherit;
      border-radius: inherit;
      transform: rotate(0.5deg);
    }
    .print-effect:hover::before {
      transform: rotate(-1deg);
    }
    .print-effect:hover::after {
      transform: rotate(1deg);
    }
  </style>
</div>

Password Reset Component

A responsive password reset component with a 'paper/print-inspired' design, 'candy/sweet colors', and dark mode support, suitable for industrial and manufacturing companies.

Open Preview

                <div class="min-h-screen bg-pink-100 dark:bg-gray-900 flex items-center justify-center p-4 sm:p-6 lg:p-8">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform perspective-1000 -rotate-x-1 sm:-rotate-x-2 -skew-y-0.5 sm:-skew-y-1 transition-all duration-300 ease-in-out
              border-4 border-dashed border-pink-300 dark:border-pink-600
              flex flex-col items-center p-8 sm:p-10 relative">
    
    <!-- Paper-like background texture (subtle) -->
    <div class="absolute inset-0 bg-repeat opacity-10 dark:opacity-5" style="background-image: url('data:image/svg+xml;utf8,<svg viewBox=\'0 0 10 10\' xmlns=\'http://www.w3.org/2000/svg\'><circle cx=\'1\' cy=\'1\' r=\'.5\' fill=\'%23ccc\'/><circle cx=\'6\' cy=\'6\' r=\'.5\' fill=\'%23ccc\'/></svg>'); background-size: 10px 10px;"></div>

    <!-- Page Curl Effect (top right) -->
    <div class="absolute top-0 right-0 w-24 h-24 rounded-bl-full bg-pink-200 dark:bg-pink-700 opacity-70" style="clip-path: polygon(0 0, 100% 0, 100% 100%); transform: translate(25%, -25%) rotate(45deg);")></div>
    
    <div class="relative z-10 w-full">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-pink-700 dark:text-pink-300 mb-4 text-center tracking-tight leading-tight" style="font-family: 'Georgia', serif;">
        Reset Password
      </h2>
      <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400 mb-8 text-center leading-relaxed font-light">
        Enter your new password below. Make sure it's strong and unique.
      </p>

      <form class="space-y-6">
        <div>
          <label for="new-password" class="block text-sm font-medium text-pink-700 dark:text-pink-300 mb-1">
            New Password
          </label>
          <div class="relative">
            <input
              type="password"
              id="new-password"
              name="new-password"
              required
              class="appearance-none block w-full px-4 py-3 border border-pink-300 dark:border-pink-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500
                     focus:outline-none focus:ring-2 focus:ring-mint-500 focus:border-mint-500
                     bg-pink-50 dark:bg-gray-700 text-gray-900 dark:text-white sm:text-base"
              placeholder="••••••••"
            >
            <span class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-500 dark:text-gray-400">
              <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
            </span>
          </div>
        </div>

        <div>
          <label for="confirm-password" class="block text-sm font-medium text-pink-700 dark:text-pink-300 mb-1">
            Confirm Password
          </label>
          <div class="relative">
            <input
              type="password"
              id="confirm-password"
              name="confirm-password"
              required
              class="appearance-none block w-full px-4 py-3 border border-pink-300 dark:border-pink-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500
                     focus:outline-none focus:ring-2 focus:ring-mint-500 focus:border-mint-500
                     bg-pink-50 dark:bg-gray-700 text-gray-900 dark:text-white sm:text-base"
              placeholder="••••••••"
            >
            <span class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-500 dark:text-gray-400">
              <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
            </span>
          </div>
        </div>

        <div>
          <button
            type="submit"
            class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-semibold
                   bg-mint-500 hover:bg-mint-600 dark:bg-mint-600 dark:hover:bg-mint-700 text-white
                   focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-mint-500 dark:focus:ring-offset-gray-800
                   transform hover:scale-105 transition-all duration-200 ease-in-out
                   tracking-wide"
          >
            Reset Password
          </button>
        </div>
      </form>

      <p class="mt-8 text-center text-sm text-gray-500 dark:text-gray-400">
        <a href="#" class="font-medium text-pink-600 hover:text-pink-800 dark:text-pink-400 dark:hover:text-pink-200 transition-colors duration-200">
          Go back to login
        </a>
      </p>
    </div>
  </div>
</div>

Art Deco Finance Forum Component

A simple, responsive community forum component designed in a muted Art Deco style suitable for finance and banking interfaces, with dark mode support.

Open Preview

                <div class="font-sans bg-gray-100 dark:bg-zinc-900 min-h-screen p-4 sm:p-6 lg:p-8 flex items-center justify-center">
  <div class="w-full max-w-4xl bg-gradient-to-br from-amber-50 to-emerald-50 dark:from-zinc-800 dark:to-zinc-950 rounded-lg shadow-xl overflow-hidden border-2 border-amber-200 dark:border-zinc-700
    transform skew-y-1 scale-95 md:skew-y-0 md:scale-100 transition-all duration-500 ease-in-out">
    <div class="transform -skew-y-1 md:skew-y-0">
      <div class="p-6 sm:p-8 border-b-2 border-amber-200 dark:border-zinc-700">
        <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-2 tracking-wide">
          <span class="text-amber-700 dark:text-amber-300">Forum:</span> Investment Insights
        </h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm sm:text-base">Discuss market trends, strategies, and financial news.</p>
      </div>

      <div class="p-6 sm:p-8 space-y-6">
        <!-- Forum Post 1 -->
        <div class="bg-white dark:bg-zinc-800 rounded-md p-4 sm:p-5 shadow-md border border-amber-100 dark:border-zinc-700">
          <div class="flex items-center mb-3">
            <img class="w-10 h-10 rounded-full mr-3 border-2 border-amber-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar">
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</p>
            </div>
          </div>
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">The Future of Digital Banking</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
            "What are your thoughts on blockchain integration in traditional banking systems? Is it a threat or an opportunity for growth?"
          </p>
          <div class="mt-4 flex justify-between items-center text-gray-600 dark:text-gray-400 text-sm">
            <div class="flex items-center space-x-4">
              <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-amber-600 dark:text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4 1.135V18l-2 1v-2L1 15V5c0-2.209 4.03-4 9-4s9 1.791 9 4v5zm-5 0h2v2h-2v-2z" clip-rule="evenodd"></path></svg> 12 Comments</span>
            </div>
            <span class="px-3 py-1 bg-amber-100 dark:bg-zinc-700 text-amber-700 dark:text-amber-300 rounded-full text-xs font-medium">FinTech</span>
          </div>
        </div>

        <!-- Forum Post 2 -->
        <div class="bg-white dark:bg-zinc-800 rounded-md p-4 sm:p-5 shadow-md border border-amber-100 dark:border-zinc-700">
          <div class="flex items-center mb-3">
            <img class="w-10 h-10 rounded-full mr-3 border-2 border-amber-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/women/8.jpg" alt="User Avatar">
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200">Jane Smith</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">4 hours ago</p>
            </div>
          </div>
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Understanding ESG Investing</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
            "I'm looking into ESG (Environmental, Social, and Governance) funds. Any recommendations or pitfalls to be aware of?"
          </p>
          <div class="mt-4 flex justify-between items-center text-gray-600 dark:text-gray-400 text-sm">
            <div class="flex items-center space-x-4">
              <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-amber-600 dark:text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4 1.135V18l-2 1v-2L1 15V5c0-2.209 4.03-4 9-4s9 1.791 9 4v5zm-5 0h2v2h-2v-2z" clip-rule="evenodd"></path></svg> 8 Comments</span>
            </div>
            <span class="px-3 py-1 bg-amber-100 dark:bg-zinc-700 text-amber-700 dark:text-amber-300 rounded-full text-xs font-medium">Sustainability</span>
          </div>
        </div>
      </div>

      <div class="p-6 sm:p-8 border-t-2 border-amber-200 dark:border-zinc-700 flex justify-center">
        <button class="px-6 py-2 bg-amber-600 hover:bg-amber-700 dark:bg-amber-700 dark:hover:bg-amber-600 text-white font-semibold rounded-md shadow-lg transition duration-300 ease-in-out
          transform hover:scale-105 active:scale-95 border-2 border-amber-700 dark:border-amber-800">
          View All Discussions
        </button>
      </div>
    </div>
  </div>
</div>

Retro_Grayscale_Crypto_Pagination

A complex, retro/vintage styled pagination component for cryptocurrency/blockchain applications, using a grayscale color scheme. It's fully responsive and supports dark mode.

Open Preview

                <nav class="flex flex-col sm:flex-row items-center justify-between p-4 bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 font-mono text-sm border-t-4 border-b-4 border-gray-900 dark:border-gray-100 shadow-inner dark:shadow-none">
  <div class="flex items-center space-x-4 mb-4 sm:mb-0">
    <span class="hidden sm:inline">Showing</span>
    <div class="relative">
      <select class="appearance-none bg-gray-200 dark:bg-gray-700 border border-gray-400 dark:border-gray-600 px-3 py-1 pr-8 rounded-none shadow-sm focus:outline-none focus:ring-1 focus:ring-gray-500 focus:border-gray-500 cursor-pointer text-gray-800 dark:text-gray-200">
        <option value="10">10</option>
        <option value="25">25</option>
        <option value="50">50</option>
        <option value="100">100</option>
      </select>
      <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-300">
        <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
      </div>
    </div>
    <span>entries per page</span>
  </div>

  <div class="flex items-center space-x-2">
    <button class="px-3 py-1 border border-gray-600 dark:border-gray-400 bg-gray-300 dark:bg-gray-800 text-gray-700 dark:text-gray-300 transition-all duration-200 ease-in-out hover:bg-gray-400 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed rounded-none font-bold shadow-sm">
      &lt;&lt; First
    </button>
    <button class="px-3 py-1 border border-gray-600 dark:border-gray-400 bg-gray-300 dark:bg-gray-800 text-gray-700 dark:text-gray-300 transition-all duration-200 ease-in-out hover:bg-gray-400 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed rounded-none font-bold shadow-sm">
      &lt; Prev
    </button>

    <div class="flex space-x-1 sm:space-x-2">
      <button class="hidden sm:block px-3 py-1 border border-gray-600 dark:border-gray-400 bg-gray-400 dark:bg-gray-700 text-gray-900 dark:text-gray-100 font-bold rounded-none shadow-sm">1</button>
      <button class="px-3 py-1 border border-gray-600 dark:border-gray-400 bg-gray-300 dark:bg-gray-800 text-gray-700 dark:text-gray-300 transition-all duration-200 ease-in-out hover:bg-gray-400 dark:hover:bg-gray-700 rounded-none shadow-sm">2</button>
      <span class="px-3 py-1 text-gray-700 dark:text-gray-300 hidden sm:block">...</span>
      <button class="px-3 py-1 border border-gray-600 dark:border-gray-400 bg-gray-300 dark:bg-gray-800 text-gray-700 dark:text-gray-300 transition-all duration-200 ease-in-out hover:bg-gray-400 dark:hover:bg-gray-700 rounded-none shadow-sm">10</button>
      <button class="px-3 py-1 border border-gray-600 dark:border-gray-400 bg-gray-300 dark:bg-gray-800 text-gray-700 dark:text-gray-300 transition-all duration-200 ease-in-out hover:bg-gray-400 dark:hover:bg-gray-700 rounded-none shadow-sm">11</button>
    </div>

    <button class="px-3 py-1 border border-gray-600 dark:border-gray-400 bg-gray-300 dark:bg-gray-800 text-gray-700 dark:text-gray-300 transition-all duration-200 ease-in-out hover:bg-gray-400 dark:hover:bg-gray-700 rounded-none font-bold shadow-sm">
      Next &gt;
    </button>
    <button class="px-3 py-1 border border-gray-600 dark:border-gray-400 bg-gray-300 dark:bg-gray-800 text-gray-700 dark:text-gray-300 transition-all duration-200 ease-in-out hover:bg-gray-400 dark:hover:bg-gray-700 rounded-none font-bold shadow-sm">
      Last &gt;&gt;
    </button>
  </div>

  <div class="mt-4 sm:mt-0 text-center">
    <span class="text-gray-700 dark:text-gray-300">Page <span class="font-bold">2</span> of <span class="font-bold">11</span></span>
  </div>
</nav>

A moderate complexity dashboard component for dating/social platforms, featuring an Art Deco design style with muted/desaturated colors and full responsiveness. Includes profile cards, activity feed, and navigation, with dark mode support.

Open Preview

                <div class="min-h-screen bg-stone-100 text-stone-800 font-serif dark:bg-stone-900 dark:text-stone-200 p-4 sm:p-6 lg:p-8">

  <!-- Header -->
  <header class="flex justify-between items-center mb-8 px-4 py-3 bg-stone-200 dark:bg-stone-800 shadow-md rounded-lg border border-stone-300 dark:border-stone-700">
    <h1 class="text-2xl sm:text-3xl font-bold tracking-wider text-amber-800 dark:text-amber-500 uppercase">
      <span class="hidden sm:inline">The</span> Social Soiree
    </h1>
    <div class="flex items-center space-x-4">
      <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-amber-800 dark:hover:text-amber-500 transition-colors duration-200">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path></svg>
      </a>
      <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-9 h-9 sm:w-10 sm:h-10 rounded-full border-2 border-amber-600 dark:border-amber-400 object-cover">
    </div>
  </header>

  <!-- Main Content Area -->
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

    <!-- Left Sidebar / Navigation -->
    <aside class="lg:col-span-1">
      <nav class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700">
        <ul class="space-y-4">
          <li>
            <a href="#" class="flex items-center space-x-3 text-lg text-stone-700 dark:text-stone-300 hover:text-amber-800 dark:hover:text-amber-500 transition-colors duration-200 group">
              <svg class="w-6 h-6 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
              <span>Dashboard</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center space-x-3 text-lg text-stone-700 dark:text-stone-300 hover:text-amber-800 dark:hover:text-amber-500 transition-colors duration-200 group">
              <svg class="w-6 h-6 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>
              <span>My Profile</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center space-x-3 text-lg text-stone-700 dark:text-stone-300 hover:text-amber-800 dark:hover:text-amber-500 transition-colors duration-200 group">
              <svg class="w-6 h-6 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3 1h6v4H5V6zm6 6H5v2h6v-2zm7-2h-4v2h4V9zm-4-3h4v2h-4V6z" clip-rule="evenodd"></path></svg>
              <span>Messages <span class="ml-2 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white bg-amber-600 rounded-full">3</span></span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center space-x-3 text-lg text-stone-700 dark:text-stone-300 hover:text-amber-800 dark:hover:text-amber-500 transition-colors duration-200 group">
              <svg class="w-6 h-6 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8c1.684 0 3.238-.606 4.455-1.621A4.004 4.004 0 0010.518 8H10a2 2 0 00-2 2H6a2 2 0 00-2-2h-.518C3.238 6.606 1.684 6 0 6s0 2 0 2h.518c.225-.972.637-1.895 1.13-2.732a3.996 3.996 0 015.352-1.282A4.004 4.004 0 008 4zM10 14a6 6 0 000-12H8a6 6 0 000 12h2zm-2 2a2 2 0 100-4 2 2 0 000 4zM12 4a4 4 0 100 8c1.684 0 3.238-.606 4.455-1.621A4.004 4.004 0 0014.518 8H14a2 2 0 00-2 2h-2a2 2 0 00-2-2h-.518C1.238 6.606 0 6 0 6s0 2 0 2h.518c.225-.972.637-1.895 1.13-2.732a3.996 3.996 0 015.352-1.282A4.004 4.004 0 008 4z" clip-rule="evenodd"></path></svg>
              <span>Matches</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center space-x-3 text-lg text-stone-700 dark:text-stone-300 hover:text-amber-800 dark:hover:text-amber-500 transition-colors duration-200 group">
              <svg class="w-6 h-6 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112.7 1.9L16 5.2a1 1 0 010 1.4L12.7 9.8a1 1 0 01-1.4-1.4L13.59 7H7a1 1 0 110-2h6.59l-2.29-2.29a1 1 0 010-1.414zM2 11h14a1 1 0 010 2H2a1 1 0 010-2z" clip-rule="evenodd"></path></svg>
              <span>Settings</span>
            </a>
          </li>
        </ul>
      </nav>
    </aside>

    <!-- Main Content / Profile Cards & Activity Feed -->
    <main class="lg:col-span-2 space-y-8">

      <!-- Discover New Profiles -->
      <section class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700">
        <h2 class="text-xl sm:text-2xl font-bold mb-6 text-amber-800 dark:text-amber-500 border-b-2 border-amber-600 dark:border-amber-400 pb-2">
          Discover New 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-stone-300 dark:bg-stone-700 rounded-lg shadow-inner overflow-hidden transform hover:scale-105 transition-transform duration-300 border-2 border-stone-400 dark:border-stone-600">
            <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Profile Image" class="w-full h-40 object-cover border-b-2 border-amber-600 dark:border-amber-400">
            <div class="p-4 text-center relative">
              <h3 class="text-lg font-semibold text-stone-900 dark:text-stone-100">Alice, 28</h3>
              <p class="text-sm text-stone-700 dark:text-stone-300">Creative Soul</p>
              <div class="mt-3 flex justify-center space-x-2">
                <button class="p-2 rounded-full bg-amber-600 dark:bg-amber-400 text-white dark:text-stone-900 hover:bg-amber-700 dark:hover:bg-amber-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
                </button>
                <button class="p-2 rounded-full bg-stone-500 dark:bg-stone-600 text-white hover:bg-stone-600 dark:hover:bg-stone-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.214 3.737C8.423 4.298 7.551 4.707 6.643 4.977l-.608-.608c-.768-.768-2.146-.768-2.914 0-.768.768-.768 2.146 0 2.914l.608.608C3.707 7.551 4.298 8.423 4.859 9.214L10 14.355l5.141-5.141C15.702 8.449 16.293 7.577 16.643 6.669l.608-.608c.768-.768.768-2.146 0-2.914-.768-.768-2.146-.768-2.914 0l-.608.608C12.449 3.707 11.577 3.298 10.786 2.737L10 2.102l-.786.635z" /></svg>
                </button>
              </div>
            </div>
          </div>
          <!-- Profile Card 2 -->
          <div class="bg-stone-300 dark:bg-stone-700 rounded-lg shadow-inner overflow-hidden transform hover:scale-105 transition-transform duration-300 border-2 border-stone-400 dark:border-stone-600">
            <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Profile Image" class="w-full h-40 object-cover border-b-2 border-amber-600 dark:border-amber-400">
            <div class="p-4 text-center relative">
              <h3 class="text-lg font-semibold text-stone-900 dark:text-stone-100">Ben, 31</h3>
              <p class="text-sm text-stone-700 dark:text-stone-300">Adventurer</p>
              <div class="mt-3 flex justify-center space-x-2">
                <button class="p-2 rounded-full bg-amber-600 dark:bg-amber-400 text-white dark:text-stone-900 hover:bg-amber-700 dark:hover:bg-amber-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
                </button>
                <button class="p-2 rounded-full bg-stone-500 dark:bg-stone-600 text-white hover:bg-stone-600 dark:hover:bg-stone-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.214 3.737C8.423 4.298 7.551 4.707 6.643 4.977l-.608-.608c-.768-.768-2.146-.768-2.914 0-.768.768-.768 2.146 0 2.914l.608.608C3.707 7.551 4.298 8.423 4.859 9.214L10 14.355l5.141-5.141C15.702 8.449 16.293 7.577 16.643 6.669l.608-.608c.768-.768.768-2.146 0-2.914-.768-.768-2.146-.768-2.914 0l-.608.608C12.449 3.707 11.577 3.298 10.786 2.737L10 2.102l-.786.635z" /></svg>
                </button>
              </div>
            </div>
          </div>
          <!-- Profile Card 3 (hidden on smaller screens) -->
          <div class="hidden lg:block bg-stone-300 dark:bg-stone-700 rounded-lg shadow-inner overflow-hidden transform hover:scale-105 transition-transform duration-300 border-2 border-stone-400 dark:border-stone-600">
            <img src="https://randomuser.me/api/portraits/women/15.jpg" alt="Profile Image" class="w-full h-40 object-cover border-b-2 border-amber-600 dark:border-amber-400">
            <div class="p-4 text-center relative">
              <h3 class="text-lg font-semibold text-stone-900 dark:text-stone-100">Chloe, 26</h3>
              <p class="text-sm text-stone-700 dark:text-stone-300">Musician</p>
              <div class="mt-3 flex justify-center space-x-2">
                <button class="p-2 rounded-full bg-amber-600 dark:bg-amber-400 text-white dark:text-stone-900 hover:bg-amber-700 dark:hover:bg-amber-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
                </button>
                <button class="p-2 rounded-full bg-stone-500 dark:bg-stone-600 text-white hover:bg-stone-600 dark:hover:bg-stone-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.214 3.737C8.423 4.298 7.551 4.707 6.643 4.977l-.608-.608c-.768-.768-2.146-.768-2.914 0-.768.768-.768 2.146 0 2.914l.608.608C3.707 7.551 4.298 8.423 4.859 9.214L10 14.355l5.141-5.141C15.702 8.449 16.293 7.577 16.643 6.669l.608-.608c.768-.768.768-2.146 0-2.914-.768-.768-2.146-.768-2.914 0l-.608.608C12.449 3.707 11.577 3.298 10.786 2.737L10 2.102l-.786.635z" /></svg>
                </button>
              </div>
            </div>
          </div>
          <!-- Profile Card 4 (hidden on smaller screens) -->
          <div class="hidden xl:block bg-stone-300 dark:bg-stone-700 rounded-lg shadow-inner overflow-hidden transform hover:scale-105 transition-transform duration-300 border-2 border-stone-400 dark:border-stone-600">
            <img src="https://randomuser.me/api/portraits/women/88.jpg" alt="Profile Image" class="w-full h-40 object-cover border-b-2 border-amber-600 dark:border-amber-400">
            <div class="p-4 text-center relative">
              <h3 class="text-lg font-semibold text-stone-900 dark:text-stone-100">Diana, 29</h3>
              <p class="text-sm text-stone-700 dark:text-stone-300">Philosopher</p>
              <div class="mt-3 flex justify-center space-x-2">
                <button class="p-2 rounded-full bg-amber-600 dark:bg-amber-400 text-white dark:text-stone-900 hover:bg-amber-700 dark:hover:bg-amber-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
                </button>
                <button class="p-2 rounded-full bg-stone-500 dark:bg-stone-600 text-white hover:bg-stone-600 dark:hover:bg-stone-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.214 3.737C8.423 4.298 7.551 4.707 6.643 4.977l-.608-.608c-.768-.768-2.146-.768-2.914 0-.768.768-.768 2.146 0 2.914l.608.608C3.707 7.551 4.298 8.423 4.859 9.214L10 14.355l5.141-5.141C15.702 8.449 16.293 7.577 16.643 6.669l.608-.608c.768-.768.768-2.146 0-2.914-.768-.768-2.146-.768-2.914 0l-.608.608C12.449 3.707 11.577 3.298 10.786 2.737L10 2.102l-.786.635z" /></svg>
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Recent Activity Feed -->
      <section class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700">
        <h2 class="text-xl sm:text-2xl font-bold mb-6 text-amber-800 dark:text-amber-500 border-b-2 border-amber-600 dark:border-amber-400 pb-2">
          Recent Activity
        </h2>
        <div class="space-y-6">
          <!-- Activity Item 1 -->
          <div class="flex items-start space-x-4 pb-4 border-b border-stone-300 dark:border-stone-700 last:border-b-0 last:pb-0">
            <img src="https://randomuser.me/api/portraits/women/7.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-amber-600 dark:border-amber-400 object-cover">
            <div class="flex-1">
              <p class="text-stone-900 dark:text-stone-100"><span class="font-semibold">Sophia</span> liked your profile.</p>
              <span class="text-xs text-stone-600 dark:text-stone-400">2 hours ago</span>
            </div>
          </div>
          <!-- Activity Item 2 -->
          <div class="flex items-start space-x-4 pb-4 border-b border-stone-300 dark:border-stone-700 last:border-b-0 last:pb-0">
            <img src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-amber-600 dark:border-amber-400 object-cover">
            <div class="flex-1">
              <p class="text-stone-900 dark:text-stone-100"><span class="font-semibold">Leo</span> sent you a new message.</p>
              <span class="text-xs text-stone-600 dark:text-stone-400">4 hours ago</span>
            </div>
          </div>
          <!-- Activity Item 3 -->
          <div class="flex items-start space-x-4 pb-4 border-b border-stone-300 dark:border-stone-700 last:border-b-0 last:pb-0">
            <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-amber-600 dark:border-amber-400 object-cover">
            <div class="flex-1">
              <p class="text-stone-900 dark:text-stone-100"><span class="font-semibold">Isabella</span> viewed your profile.</p>
              <span class="text-xs text-stone-600 dark:text-stone-400">1 day ago</span>
            </div>
          </div>
        </div>
      </section>

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

Neon Glow Food Carousel Slider

A complex, responsive carousel slider component with neon glow effects and a candy/sweet color scheme, designed for food delivery and restaurant websites, including dark mode support.

Open Preview

                <div class="relative w-full overflow-hidden bg-gradient-to-br from-purple-100 via-pink-100 to-green-100 dark:from-gray-900 dark:via-purple-950 dark:to-teal-950 py-16">
  <div class="container mx-auto px-4">
    <h2 class="text-center text-4xl sm:text-5xl md:text-6xl font-extrabold mb-12 text-sweet-pink-600 dark:text-sweet-pink-400 drop-shadow-lg relative">
      <span class="block relative z-10">Our <span class="text-sweet-mint-600 dark:text-sweet-mint-400">Neon Bites</span></span>
      <span class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full bg-sweet-pink-300 dark:bg-sweet-pink-700 opacity-20 dark:opacity-10 blur-3xl rounded-full z-0"></span>
    </h2>

    <div class="relative">
      <div class="flex overflow-x-auto snap-x snap-mandatory scroll-smooth pb-8 hide-scrollbar" id="carousel">
        <!-- Carousel Item 1 -->
        <div class="flex-shrink-0 w-full sm:w-1/2 lg:w-1/3 p-4 snap-center">
          <div class="relative bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden group border-4 border-solid border-sweet-pink-300 dark:border-sweet-pink-700 neon-border-pink">
            <div class="absolute inset-0 bg-gradient-to-br from-sweet-pink-200 to-sweet-mint-200 dark:from-purple-900/50 dark:to-teal-900/50 opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-md"></div>
            <img src="https://picsum.photos/id/1080/400/300" alt="Spicy Noodles" class="w-full h-48 object-cover rounded-t-2xl transform group-hover:scale-105 transition-transform duration-500 relative z-10">
            <div class="p-6 relative z-10">
              <h3 class="text-3xl font-bold mb-2 text-sweet-pink-700 dark:text-sweet-pink-300 drop-shadow-sm">Spicy Neon Noodles</h3>
              <p class="text-gray-600 dark:text-gray-300 mb-4 text-lg">Fiery noodles with a glow that excites your taste buds. A truly vibrant dish!</p>
              <div class="flex justify-between items-center">
                <span class="text-4xl font-extrabold text-sweet-mint-600 dark:text-sweet-mint-400 drop-shadow-lg">$14.99</span>
                <button class="px-6 py-3 bg-sweet-mint-500 text-white font-bold rounded-full shadow-lg hover:bg-sweet-mint-600 transition-colors duration-300 transform hover:scale-105 neon-button-mint group-hover:neon-button-mint-active">
                  Order Now
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- Carousel Item 2 -->
        <div class="flex-shrink-0 w-full sm:w-1/2 lg:w-1/3 p-4 snap-center">
          <div class="relative bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden group border-4 border-solid border-sweet-mint-300 dark:border-sweet-mint-700 neon-border-mint">
            <div class="absolute inset-0 bg-gradient-to-br from-sweet-mint-200 to-sweet-pink-200 dark:from-teal-900/50 dark:to-purple-900/50 opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-md"></div>
            <img src="https://picsum.photos/id/1082/400/300" alt="Glow Burgers" class="w-full h-48 object-cover rounded-t-2xl transform group-hover:scale-105 transition-transform duration-500 relative z-10">
            <div class="p-6 relative z-10">
              <h3 class="text-3xl font-bold mb-2 text-sweet-mint-700 dark:text-sweet-mint-300 drop-shadow-sm">Electric Blue Burgers</h3>
              <p class="text-gray-600 dark:text-gray-300 mb-4 text-lg">Juicy burgers with a surprising blue glow. A visual and culinary delight!</p>
              <div class="flex justify-between items-center">
                <span class="text-4xl font-extrabold text-sweet-pink-600 dark:text-sweet-pink-400 drop-shadow-lg">$12.50</span>
                <button class="px-6 py-3 bg-sweet-pink-500 text-white font-bold rounded-full shadow-lg hover:bg-sweet-pink-600 transition-colors duration-300 transform hover:scale-105 neon-button-pink group-hover:neon-button-pink-active">
                  Order Now
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- Carousel Item 3 -->
        <div class="flex-shrink-0 w-full sm:w-1/2 lg:w-1/3 p-4 snap-center">
          <div class="relative bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden group border-4 border-solid border-sweet-pink-300 dark:border-sweet-pink-700 neon-border-pink">
            <div class="absolute inset-0 bg-gradient-to-br from-sweet-pink-200 to-sweet-mint-200 dark:from-purple-900/50 dark:to-teal-900/50 opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-md"></div>
            <img src="https://picsum.photos/id/1084/400/300" alt="Colorful Sushi" class="w-full h-48 object-cover rounded-t-2xl transform group-hover:scale-105 transition-transform duration-500 relative z-10">
            <div class="p-6 relative z-10">
              <h3 class="text-3xl font-bold mb-2 text-sweet-pink-700 dark:text-sweet-pink-300 drop-shadow-sm">Rainbow Sushi Rolls</h3>
              <p class="text-gray-600 dark:text-gray-300 mb-4 text-lg">A magnificent array of sushi, bursting with color and flavor.</p>
              <div class="flex justify-between items-center">
                <span class="text-4xl font-extrabold text-sweet-mint-600 dark:text-sweet-mint-400 drop-shadow-lg">$18.00</span>
                <button class="px-6 py-3 bg-sweet-mint-500 text-white font-bold rounded-full shadow-lg hover:bg-sweet-mint-600 transition-colors duration-300 transform hover:scale-105 neon-button-mint group-hover:neon-button-mint-active">
                  Order Now
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- Carousel Item 4 -->
        <div class="flex-shrink-0 w-full sm:w-1/2 lg:w-1/3 p-4 snap-center">
          <div class="relative bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden group border-4 border-solid border-sweet-mint-300 dark:border-sweet-mint-700 neon-border-mint">
            <div class="absolute inset-0 bg-gradient-to-br from-sweet-mint-200 to-sweet-pink-200 dark:from-teal-900/50 dark:to-purple-900/50 opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-md"></div>
            <img src="https://picsum.photos/id/1070/400/300" alt="Electric Pancakes" class="w-full h-48 object-cover rounded-t-2xl transform group-hover:scale-105 transition-transform duration-500 relative z-10">
            <div class="p-6 relative z-10">
              <h3 class="text-3xl font-bold mb-2 text-sweet-mint-700 dark:text-sweet-mint-300 drop-shadow-sm">Glow Berry Pancakes</h3>
              <p class="text-gray-600 dark:text-gray-300 mb-4 text-lg">Fluffy pancakes with an ethereal glow and fresh berry explosion.</p>
              <div class="flex justify-between items-center">
                <span class="text-4xl font-extrabold text-sweet-pink-600 dark:text-sweet-pink-400 drop-shadow-lg">$9.50</span>
                <button class="px-6 py-3 bg-sweet-pink-500 text-white font-bold rounded-full shadow-lg hover:bg-sweet-pink-600 transition-colors duration-300 transform hover:scale-105 neon-button-pink group-hover:neon-button-pink-active">
                  Order Now
                </button>
              </div>
            </div>
          </div>
        </div>

      </div>

      <!-- Navigation Buttons (hidden on small screens, click to scroll on larger screens) -->
      <button onclick="prevSlide()" class="absolute top-1/2 left-4 -translate-y-1/2 bg-white dark:bg-gray-700 text-sweet-pink-600 dark:text-sweet-pink-400 p-3 rounded-full shadow-lg hover:scale-110 transition-transform duration-300 z-20 hidden sm:block neon-arrow-pink">
        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M15 19l-7-7 7-7"></path></svg>
      </button>
      <button onclick="nextSlide()" class="absolute top-1/2 right-4 -translate-y-1/2 bg-white dark:bg-gray-700 text-sweet-mint-600 dark:text-sweet-mint-400 p-3 rounded-full shadow-lg hover:scale-110 transition-transform duration-300 z-20 hidden sm:block neon-arrow-mint">
        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M9 5l7 7-7 7"></path></svg>
      </button>
    </div>

    <!-- Custom Scrollbar Indicator -->
    <div class="relative w-full h-2 rounded-full bg-sweet-pink-200 dark:bg-gray-700 mt-8">
      <div id="scroll-indicator" class="absolute h-full rounded-full bg-sweet-mint-500 shadow-custom-mint transition-all duration-150 ease-out"></div>
    </div>

  </div>
</div>

<style>
  /* Hide scrollbar for custom indicator */
  .hide-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .hide-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

  /* Custom properties for color scheme */
  :root {
    --sweet-pink-100: #FFE4E6;
    --sweet-pink-200: #FFCDD2;
    --sweet-pink-300: #FFB6C1;
    --sweet-pink-400: #FF96AC;
    --sweet-pink-500: #FF7098;
    --sweet-pink-600: #FF527B;
    --sweet-pink-700: #E63965;

    --sweet-mint-100: #E0FFF8;
    --sweet-mint-200: #C1FFF1;
    --sweet-mint-300: #A2FEEA;
    --sweet-mint-400: #83FDE3;
    --sweet-mint-500: #64FDDD;
    --sweet-mint-600: #45FCD6;
    --sweet-mint-700: #26FBCE;
  }

  .text-sweet-pink-600 { color: var(--sweet-pink-600); }
  .dark\:text-sweet-pink-400 { color: var(--sweet-pink-400); }
  .text-sweet-pink-700 { color: var(--sweet-pink-700); }
  .dark\:text-sweet-pink-300 { color: var(--sweet-pink-300); }
  .bg-sweet-pink-500 { background-color: var(--sweet-pink-500); }
  .hover\:bg-sweet-pink-600:hover { background-color: var(--sweet-pink-600); }
  .border-sweet-pink-300 { border-color: var(--sweet-pink-300); }
  .dark\:border-sweet-pink-700 { border-color: var(--sweet-pink-700); }
  .bg-sweet-pink-200 { background-color: var(--sweet-pink-200); }

  .text-sweet-mint-600 { color: var(--sweet-mint-600); }
  .dark\:text-sweet-mint-400 { color: var(--sweet-mint-400); }
  .text-sweet-mint-700 { color: var(--sweet-mint-700); }
  .dark\:text-sweet-mint-300 { color: var(--sweet-mint-300); }
  .bg-sweet-mint-500 { background-color: var(--sweet-mint-500); }
  .hover\:bg-sweet-mint-600:hover { background-color: var(--sweet-mint-600); }
  .border-sweet-mint-300 { border-color: var(--sweet-mint-300); }
  .dark\:border-sweet-mint-700 { border-color: var(--sweet-mint-700); }

  /* Neon Glow Effects */
  .neon-border-pink {
    box-shadow: 0 0 5px var(--sweet-pink-500), 0 0 10px var(--sweet-pink-500), 0 0 20px var(--sweet-pink-500), inset 0 0 5px var(--sweet-pink-500), inset 0 0 10px var(--sweet-pink-500);
  }
  .dark .neon-border-pink {
    box-shadow: 0 0 5px var(--sweet-pink-700), 0 0 10px var(--sweet-pink-700), 0 0 20px var(--sweet-pink-700), inset 0 0 5px var(--sweet-pink-700), inset 0 0 10px var(--sweet-pink-700);
  }

  .neon-border-mint {
    box-shadow: 0 0 5px var(--sweet-mint-500), 0 0 10px var(--sweet-mint-500), 0 0 20px var(--sweet-mint-500), inset 0 0 5px var(--sweet-mint-500), inset 0 0 10px var(--sweet-mint-500);
  }
  .dark .neon-border-mint {
    box-shadow: 0 0 5px var(--sweet-mint-700), 0 0 10px var(--sweet-mint-700), 0 0 20px var(--sweet-mint-700), inset 0 0 5px var(--sweet-mint-700), inset 0 0 10px var(--sweet-mint-700);
  }

  .neon-button-mint {
    box-shadow: 0 0 5px var(--sweet-mint-500), 0 0 10px var(--sweet-mint-500);
    transition: all 0.3s ease-in-out;
  }
  .group-hover\:neon-button-mint-active, .neon-button-mint:hover {
    box-shadow: 0 0 10px var(--sweet-mint-500), 0 0 20px var(--sweet-mint-500), 0 0 30px var(--sweet-mint-500);
  }
  .dark .neon-button-mint {
    box-shadow: 0 0 5px var(--sweet-mint-700), 0 0 10px var(--sweet-mint-700);
  }
  .dark .group-hover\:neon-button-mint-active, .dark .neon-button-mint:hover {
    box-shadow: 0 0 10px var(--sweet-mint-700), 0 0 20px var(--sweet-mint-700), 0 0 30px var(--sweet-mint-700);
  }

  .neon-button-pink {
    box-shadow: 0 0 5px var(--sweet-pink-500), 0 0 10px var(--sweet-pink-500);
    transition: all 0.3s ease-in-out;
  }
  .group-hover\:neon-button-pink-active, .neon-button-pink:hover {
    box-shadow: 0 0 10px var(--sweet-pink-500), 0 0 20px var(--sweet-pink-500), 0 0 30px var(--sweet-pink-500);
  }
  .dark .neon-button-pink {
    box-shadow: 0 0 5px var(--sweet-pink-700), 0 0 10px var(--sweet-pink-700);
  }
  .dark .group-hover\:neon-button-pink-active, .dark .neon-button-pink:hover {
    box-shadow: 0 0 10px var(--sweet-pink-700), 0 0 20px var(--sweet-pink-700), 0 0 30px var(--sweet-pink-700);
  }

  .neon-arrow-pink {
    box-shadow: 0 0 8px var(--sweet-pink-500);
  }
  .dark .neon-arrow-pink {
    box-shadow: 0 0 8px var(--sweet-pink-700);
  }
    .neon-arrow-pink:hover {
    box-shadow: 0 0 12px var(--sweet-pink-500), 0 0 20px var(--sweet-pink-500);
  }
  .dark .neon-arrow-pink:hover {
    box-shadow: 0 0 12px var(--sweet-pink-700), 0 0 20px var(--sweet-pink-700);
  }

  .neon-arrow-mint {
    box-shadow: 0 0 8px var(--sweet-mint-500);
  }
  .dark .neon-arrow-mint {
    box-shadow: 0 0 8px var(--sweet-mint-700);
  }
  .neon-arrow-mint:hover {
    box-shadow: 0 0 12px var(--sweet-mint-500), 0 0 20px var(--sweet-mint-500);
  }
  .dark .neon-arrow-mint:hover {
    box-shadow: 0 0 12px var(--sweet-mint-700), 0 0 20px var(--sweet-mint-700);
  }

  .shadow-custom-mint {
    box-shadow: 0 0 10px var(--sweet-mint-500);
  }
  .dark .shadow-custom-mint {
    box-shadow: 0 0 10px var(--sweet-mint-700);
  }

</style>

<script>
  const carousel = document.getElementById('carousel');
  const scrollIndicator = document.getElementById('scroll-indicator');

  function updateScrollIndicator() {
    const scrollLeft = carousel.scrollLeft;
    const scrollWidth = carousel.scrollWidth;
    const clientWidth = carousel.clientWidth;

    if (scrollWidth === clientWidth) {
      // If no scrollbar, hide indicator or set to full width
      scrollIndicator.style.width = '100%';
      scrollIndicator.style.left = '0%';
      return;
    }

    const scrollPercentage = (scrollLeft / (scrollWidth - clientWidth));
    const indicatorWidth = (clientWidth / scrollWidth) * 100;
    const indicatorLeft = scrollPercentage * (100 - indicatorWidth);

    scrollIndicator.style.width = indicatorWidth + '%';
    scrollIndicator.style.left = indicatorLeft + '%';
  }

  function scrollToAmount(amount) {
    carousel.scrollBy({ left: amount, behavior: 'smooth' });
  }

  function nextSlide() {
    const viewWidth = carousel.clientWidth;
    let scrollAmount;

    if (viewWidth >= 1024) { // lg breakpoint
      scrollAmount = viewWidth / 3; // Scroll by one card width
    } else if (viewWidth >= 640) { // sm breakpoint
      scrollAmount = viewWidth / 2; // Scroll by one card width
    } else { // default to full width
      scrollAmount = viewWidth;
    }
    scrollToAmount(scrollAmount);
  }

  function prevSlide() {
    const viewWidth = carousel.clientWidth;
    let scrollAmount;

    if (viewWidth >= 1024) { // lg breakpoint
      scrollAmount = -viewWidth / 3;
    } else if (viewWidth >= 640) { // sm breakpoint
      scrollAmount = -viewWidth / 2;
    } else { // default to full width
      scrollAmount = -viewWidth;
    }
    scrollToAmount(scrollAmount);
  }

  carousel.addEventListener('scroll', updateScrollIndicator);
  window.addEventListener('resize', updateScrollIndicator);

  // Initial update
  updateScrollIndicator();

  // Optional: Add swipe functionality for mobile
  let startX;
  let isDragging = false;

  carousel.addEventListener('touchstart', (e) => {
    isDragging = true;
    startX = e.touches[0].pageX - carousel.offsetLeft;
    scrollLeft = carousel.scrollLeft;
  });

  carousel.addEventListener('touchend', () => {
    isDragging = false;
  });

  carousel.addEventListener('touchmove', (e) => {
    if (!isDragging) return;
    e.preventDefault(); // Prevent scrolling page up/down
    const x = e.touches[0].pageX - carousel.offsetLeft;
    const walk = (x - startX) * 1; // The * 1 is to control scroll speed
    carousel.scrollLeft = scrollLeft - walk;
  });

</script>

Brutalist Grayscale Industrial Form

A complex, brutalist-style form component with a grayscale color scheme, designed for industrial and manufacturing applications. Features high-contrast elements, unusual layouts, and full responsiveness with dark mode support.

Open Preview

                <div class="min-h-screen bg-neutral-100 dark:bg-neutral-950 p-4 sm:p-8 font-mono text-neutral-900 dark:text-neutral-50 flex items-start justify-center">
  <div class="w-full max-w-6xl border-4 border-neutral-900 dark:border-neutral-50 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_0px_rgba(255,255,255,1)] grid md:grid-cols-3 overflow-hidden">

    <!-- Left Section: Header Block -->
    <div class="md:col-span-1 bg-neutral-900 dark:bg-neutral-50 text-neutral-50 dark:text-neutral-900 p-6 sm:p-8 border-b-4 md:border-b-0 md:border-r-4 border-neutral-900 dark:border-neutral-50">
      <h1 class="text-2xl sm:text-3xl font-bold tracking-tighter uppercase mb-4 leading-none">MANUFACTURING OPS. DATA INPUT.</h1>
      <p class="text-sm sm:text-base mb-6 border-b-2 border-neutral-50 dark:border-neutral-900 pb-2">RECORD AND MONITOR PRODUCTION FLOW, MACHINE STATUS, AND QUALITY CONTROL METRICS.</p>
      <div class="space-y-4">
        <div class="flex items-center space-x-2">
          <svg class="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><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 10.586V6z" clip-rule="evenodd"></path></svg>
          <span class="text-xs sm:text-sm font-semibold">UTC+00:00 - 15:30:45</span>
        </div>
        <div class="flex items-center space-x-2">
          <svg class="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
          <span class="text-xs sm:text-sm font-semibold">PLANT_A_UNIT_07 - ZONE 3B</span>
        </div>
      </div>
      <img src="https://picsum.photos/300/200?grayscale&random=1" alt="Industrial machinery" class="w-full h-auto mt-8 border-4 border-neutral-50 dark:border-neutral-900 object-cover" style="image-rendering: pixelated;">
    </div>

    <!-- Right Section: Form Fields -->
    <div class="md:col-span-2 p-6 sm:p-8 bg-neutral-100 dark:bg-neutral-950 ">
      <form class="space-y-6 sm:space-y-8">

        <!-- Production Data Section -->
        <div class="border-b-2 border-neutral-400 dark:border-neutral-700 pb-6">
          <h2 class="text-xl sm:text-2xl font-bold uppercase mb-4 relative z-0 before:content-[''] before:absolute before:-bottom-1 before:left-0 before:w-1/3 before:h-1 before:bg-neutral-900 dark:before:bg-neutral-50">PRODUCTION DATA</h2>
          <div class="grid gap-4 sm:gap-6 md:grid-cols-2 lg:grid-cols-3">
            <div>
              <label for="batch-id" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Batch ID:</label>
              <input type="text" id="batch-id" placeholder="BCH-731-X" class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm">
            </div>
            <div>
              <label for="product-code" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Product Code:</label>
              <input type="text" id="product-code" placeholder="PRD-A-04" class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm">
            </div>
            <div>
              <label for="quantity-produced" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Quantity Produced:</label>
              <input type="number" id="quantity-produced" placeholder="0" class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm">
            </div>
            <div class="lg:col-span-3">
              <label for="operator-notes" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Operator Notes:</label>
              <textarea id="operator-notes" rows="3" placeholder="Add any relevant observations or incidents..." class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm"></textarea>
            </div>
          </div>
        </div>

        <!-- Machine Status Section -->
        <div class="border-b-2 border-neutral-400 dark:border-neutral-700 pb-6">
          <h2 class="text-xl sm:text-2xl font-bold uppercase mb-4 relative z-0 before:content-[''] before:absolute before:-bottom-1 before:left-0 before:w-1/3 before:h-1 before:bg-neutral-900 dark:before:bg-neutral-50">MACHINE STATUS</h2>
          <div class="grid gap-4 sm:gap-6 md:grid-cols-2">
            <div>
              <label for="machine-id" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Machine ID:</label>
              <select id="machine-id" class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm">
                <option value="">SELECT MACHINE</option>
                <option value="MCH-001">CNC MILL 001</option>
                <option value="MCH-002">LASER CUTTER 002</option>
                <option value="MCH-003">ROBOTIC ARM 003</option>
              </select>
            </div>
            <div>
              <label class="block text-xs sm:text-sm font-semibold uppercase mb-1">Status:</label>
              <div class="flex flex-wrap gap-x-4 gap-y-2 text-sm">
                <label class="inline-flex items-center cursor-pointer">
                  <input type="radio" name="machine-status" value="operational" class="form-radio h-4 w-4 text-neutral-900 dark:text-neutral-50 border-neutral-900 dark:border-neutral-50 focus:ring-neutral-900 dark:focus:ring-neutral-50 checked:bg-neutral-900 dark:checked:bg-neutral-50">
                  <span class="ml-2 select-none">Operational</span>
                </label>
                <label class="inline-flex items-center cursor-pointer">
                  <input type="radio" name="machine-status" value="maintenance" class="form-radio h-4 w-4 text-neutral-900 dark:text-neutral-50 border-neutral-900 dark:border-neutral-50 focus:ring-neutral-900 dark:focus:ring-neutral-50 checked:bg-neutral-900 dark:checked:bg-neutral-50">
                  <span class="ml-2 select-none">Maintenance</span>
                </label>
                <label class="inline-flex items-center cursor-pointer">
                  <input type="radio" name="machine-status" value="error" class="form-radio h-4 w-4 text-neutral-900 dark:text-neutral-50 border-neutral-900 dark:border-neutral-50 focus:ring-neutral-900 dark:focus:ring-neutral-50 checked:bg-neutral-900 dark:checked:bg-neutral-50">
                  <span class="ml-2 select-none">Error</span>
                </label>
              </div>
            </div>
            <div>
              <label for="downtime-minutes" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Downtime (min):</label>
              <input type="numbeer" id="downtime-minutes" placeholder="0" class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm">
            </div>
            <div>
              <label for="last-maintenance" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Last Maintenance:</label>
              <input type="date" id="last-maintenance" class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm">
            </div>
          </div>
        </div>

        <!-- Quality Control Section -->
        <div>
          <h2 class="text-xl sm:text-2xl font-bold uppercase mb-4 relative z-0 before:content-[''] before:absolute before:-bottom-1 before:left-0 before:w-1/3 before:h-1 before:bg-neutral-900 dark:before:bg-neutral-50">QUALITY CONTROL</h2>
          <div class="grid gap-4 sm:gap-6 md:grid-cols-2">
            <div>
              <label for="defects-reported" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Defects Reported:</label>
              <input type="number" id="defects-reported" placeholder="0" class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm">
            </div>
            <div>
              <label for="inspection-result" class="block text-xs sm:text-sm font-semibold uppercase mb-1">Inspection Result:</label>
              <select id="inspection-result" class="w-full p-2 bg-transparent border-2 border-neutral-900 dark:border-neutral-50 focus:outline-none focus:ring-2 focus:ring-neutral-900 dark:focus:ring-neutral-50 text-sm">
                <option value="">SELECT OUTCOME</option>
                <option value="pass">PASS</option>
                <option value="fail">FAIL</option>
                <option value="review">PENDING REVIEW</option>
              </select>
            </div>
            <div class="md:col-span-2">
              <label class="block text-xs sm:text-sm font-semibold uppercase mb-1">Attached Documents:</label>
              <div class="flex flex-wrap gap-x-4 gap-y-2 text-sm mt-1">
                <label class="inline-flex items-center cursor-pointer">
                  <input type="checkbox" name="doc-img" value="img-report" class="form-checkbox h-4 w-4 text-neutral-900 dark:text-neutral-50 border-neutral-900 dark:border-neutral-50 rounded-none focus:ring-neutral-900 dark:focus:ring-neutral-50">
                  <span class="ml-2 select-none">Image Report</span>
                </label>
                <label class="inline-flex items-center cursor-pointer">
                  <input type="checkbox" name="doc-spec" value="spec-sheet" class="form-checkbox h-4 w-4 text-neutral-900 dark:text-neutral-50 border-neutral-900 dark:border-neutral-50 rounded-none focus:ring-neutral-900 dark:focus:ring-neutral-50">
                  <span class="ml-2 select-none">Spec Sheet</span>
                </label>
                <label class="inline-flex items-center cursor-pointer">
                  <input type="checkbox" name="doc-log" value="test-log" class="form-checkbox h-4 w-4 text-neutral-900 dark:text-neutral-50 border-neutral-900 dark:border-neutral-50 rounded-none focus:ring-neutral-900 dark:focus:ring-neutral-50">
                  <span class="ml-2 select-none">Test Log</span>
                </label>
              </div>
            </div>
          </div>
        </div>

        <!-- Submission & Control -->
        <div class="flex flex-col sm:flex-row sm:justify-between sm:items-end pt-4 border-t-2 border-neutral-400 dark:border-neutral-700">
          <span class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-4 sm:mb-0">FORM VERSION 2.1.b / ENGAGE PROTOCOL 7-ALPHA</span>
          <button type="submit" class="px-8 py-3 bg-neutral-900 dark:bg-neutral-50 text-neutral-50 dark:text-neutral-900 font-bold uppercase border-2 border-neutral-900 dark:border-neutral-50 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,1)] hover:shadow-none transition-all duration-150 ease-in-out text-sm sm:text-base tracking-widest">
            SUBMIT DATA
          </button>
        </div>

      </form>
    </div>

  </div>
</div>

Blog Layout with Gradient Sidebar

A responsive blog layout component with a main content area and a gradient sidebar, featuring subtle muted colors, smooth transitions, and full dark mode support. Designed for content consumption on various screen sizes.

Open Preview

                <div class="min-h-screen bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 transition-colors duration-500 font-sans">
  <header class="w-full py-4 px-6 bg-gradient-to-r from-teal-500 to-indigo-600 dark:from-teal-700 dark:to-indigo-900 shadow-md flex justify-between items-center">
    <a href="#" class="text-2xl font-bold text-white tracking-tight">MutedBlog</a>
    <nav class="hidden md:flex space-x-6">
      <a href="#" class="text-white hover:text-gray-200 transition-colors duration-300">Home</a>
      <a href="#" class="text-white hover:text-gray-200 transition-colors duration-300">Categories</a>
      <a href="#" class="text-white hover:text-gray-200 transition-colors duration-300">About</a>
      <a href="#" class="text-white hover:text-gray-200 transition-colors duration-300">Contact</a>
    </nav>
    <button class="md:hidden text-white focus:outline-none">
      <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
    </button>
  </header>

  <main class="container mx-auto px-4 py-8 grid grid-cols-1 md:grid-cols-3 gap-8">
    <!-- Main Content Area -->
    <section class="md:col-span-2 space-y-8">
      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-500 hover:shadow-xl">
        <img src="https://picsum.photos/800/400?random=1" alt="Article thumbnail" class="w-full h-48 object-cover">
        <div class="p-6">
          <h2 class="text-2xl font-semibold mb-2 text-gray-900 dark:text-gray-100">The Serenity of Desaturated Landscapes</h2>
          <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Published on October 26, 2023 by Jane Doe</p>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Dive deep into the tranquil beauty of muted tones and discover how subtle changes in color can evoke profound emotions. This piece explores the artistic choices behind desaturated photography and its impact on viewers.</p>
          <a href="#" class="inline-block bg-teal-500 hover:bg-teal-600 text-white font-semibold py-2 px-4 rounded-md transition-all duration-300">Read More</a>
        </div>
      </article>

      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-500 hover:shadow-xl">
        <img src="https://picsum.photos/800/400?random=2" alt="Article thumbnail" class="w-full h-48 object-cover">
        <div class="p-6">
          <h2 class="text-2xl font-semibold mb-2 text-gray-900 dark:text-gray-100">Minimalist Living: A Gentle Approach</h2>
          <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Published on October 24, 2023 by John Smith</p>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Explore the core principles of minimalist living focusing on simplicity and functionality, all while embracing a soft, understated aesthetic. Less is truly more when it comes to mindful living.</p>
          <a href="#" class="inline-block bg-teal-500 hover:bg-teal-600 text-white font-semibold py-2 px-4 rounded-md transition-all duration-300">Read More</a>
        </div>
      </article>

      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-500 hover:shadow-xl">
        <img src="https://picsum.photos/800/400?random=3" alt="Article thumbnail" class="w-full h-48 object-cover">
        <div class="p-6">
          <h2 class="text-2xl font-semibold mb-2 text-gray-900 dark:text-gray-100">Understanding Color Theory for Web Design</h2>
          <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Published on October 22, 2023 by Emily White</p>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">A deep dive into the psychological effects of color and how muted palettes can create a sense of calm and sophistication in user interfaces. Perfect for designers looking to refine their aesthetic.</p>
          <a href="#" class="inline-block bg-teal-500 hover:bg-teal-600 text-white font-semibold py-2 px-4 rounded-md transition-all duration-300">Read More</a>
        </div>
      </article>
    </section>

    <!-- Sidebar (Categories & About) -->
    <aside class="space-y-8">
      <div class="bg-gradient-to-br from-indigo-300 to-purple-400 dark:from-indigo-700 dark:to-purple-900 rounded-lg shadow-lg p-6 text-white transition-all duration-500">
        <h3 class="text-xl font-semibold mb-4 border-b border-white border-opacity-30 pb-2">Categories</h3>
        <ul class="space-y-2">
          <li><a href="#" class="hover:text-gray-200 transition-colors duration-300">Photography (7)</a></li>
          <li><a href="#" class="hover:text-gray-200 transition-colors duration-300">Lifestyle (5)</a></li>
          <li><a href="#" class="hover:text-gray-200 transition-colors duration-300">Design (9)</a></li>
          <li><a href="#" class="hover:text-gray-200 transition-colors duration-300">Wellness (3)</a></li>
          <li><a href="#" class="hover:text-gray-200 transition-colors duration-300">Technology (6)</a></li>
        </ul>
      </div>

      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 text-gray-800 dark:text-gray-200 transition-all duration-500">
        <h3 class="text-xl font-semibold mb-4 border-b border-gray-200 dark:border-gray-700 pb-2">About Us</h3>
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Author Avatar" class="w-24 h-24 rounded-full mx-auto mb-4 object-cover border-4 border-teal-400 dark:border-teal-600 transition-all duration-300">
        <p class="text-center leading-relaxed">We are a collective of writers passionate about bringing you serene and thoughtful content on art, life, and design. Our aim is to provide a calm reading experience.</p>
        <p class="text-center mt-3"><a href="#" class="text-teal-600 dark:text-teal-400 hover:underline transition-colors duration-300">Learn More</a></p>
      </div>

      <div class="bg-gradient-to-br from-red-300 to-orange-400 dark:from-red-700 dark:to-orange-900 rounded-lg shadow-lg p-6 text-white transition-all duration-500">
        <h3 class="text-xl font-semibold mb-4 border-b border-white border-opacity-30 pb-2">Subscribe</h3>
        <p class="mb-4 text-sm">Get our latest articles delivered right to your inbox.</p>
        <form class="flex flex-col space-y-3">
          <input type="email" placeholder="Your email address" class="p-3 rounded-md border-0 focus:ring-2 focus:ring-white focus:outline-none bg-white bg-opacity-20 text-white placeholder-white::placeholder-opacity-75 transition-all duration-300">
          <button type="submit" class="bg-white text-orange-600 font-semibold py-3 px-4 rounded-md hover:bg-gray-100 transition-all duration-300">Subscribe Now</button>
        </form>
      </div>
    </aside>
  </main>

  <footer class="w-full py-6 px-6 bg-gray-200 dark:bg-gray-900 text-center text-gray-700 dark:text-gray-300 transition-colors duration-500">
    <p>&copy; 2023 MutedBlog. All rights reserved.</p>
    <nav class="mt-2 space-x-4">
      <a href="#" class="hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-300">Privacy Policy</a>
      <a href="#" class="hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-300">Terms of Service</a>
    </nav>
  </footer>
</div>

Session Timeout Alert Component

A simple, responsive, and dark-mode-compatible session timeout alert component with an industrial and muted aesthetic, suitable for booking and reservation systems.

Open Preview

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900/50 dark:bg-black/70 font-sans">
  <div class="relative w-full max-w-sm rounded-lg shadow-xl bg-gray-100 dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-700 overflow-hidden">
    
    <!-- Header with exposed screw-like elements -->
    <div class="flex items-center justify-between p-4 bg-gray-200 dark:bg-gray-700 border-b-2 border-gray-300 dark:border-gray-700">
      <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 uppercase tracking-wide">Session Timeout</h3>
      <div class="flex space-x-2">
        <span class="block w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-600 border border-gray-500 dark:border-gray-500"></span>
        <span class="block w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-600 border border-gray-500 dark:border-gray-500"></span>
      </div>
    </div>

    <!-- Content body -->
    <div class="p-6 text-center">
      <svg class="mx-auto mb-4 h-12 w-12 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
      <p class="mb-4 text-gray-700 dark:text-gray-300">
        Your session is about to expire due to inactivity.
      </p>
      <p class="text-sm text-gray-600 dark:text-gray-400 font-mono">
        Please extend your session to continue.
      </p>
      <div class="mt-6">
        <p class="text-2xl font-bold text-gray-800 dark:text-gray-200 tabular-nums">00:59</p>
      </div>
    </div>

    <!-- Footer with utilitarian buttons -->
    <div class="flex flex-col sm:flex-row justify-end gap-3 p-4 bg-gray-200 dark:bg-gray-700 border-t-2 border-gray-300 dark:border-gray-700">
      <button type="button" class="w-full flex-1 px-5 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-300 dark:bg-gray-600 rounded-md border-2 border-gray-400 dark:border-gray-500 hover:bg-gray-400 dark:hover:bg-gray-500 transition duration-200 ease-in-out uppercase tracking-wide">
        Logout
      </button>
      <button type="button" class="w-full flex-1 px-5 py-2 text-sm font-medium text-gray-100 dark:text-gray-900 bg-gray-600 dark:bg-gray-400 rounded-md border-2 border-gray-700 dark:border-gray-300 hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-200 ease-in-out uppercase tracking-wide">
        Extend Session
      </button>
    </div>
  </div>
</div>

1 ... 104 105 106 107 108 ... 335