Search Components

All Components

Browse all available Tailwind CSS components

Neon_Glow_Grayscale_Sports_Sidebar

A complex, responsive sidebar component for sports/fitness applications, featuring neon/glow effects within a grayscale color scheme. Includes dark mode support and interactive elements like profile, navigation, teams, and settings.

Open Preview

                <div class="flex h-screen bg-gray-950 text-gray-300 dark:bg-black dark:text-gray-200">
  <!-- Sidebar -->
  <div class="flex flex-col w-64 md:w-72 bg-gray-900 border-r border-gray-800 shadow-xl dark:bg-[#1a1a1a] dark:border-gray-800 transition-all duration-300">
    <div class="flex items-center justify-center h-20 border-b border-gray-800 relative">
      <div class="absolute inset-0 bg-gradient-to-r from-transparent via-blue-500/20 to-transparent blur-md opacity-0 dark:opacity-100 transition-opacity duration-500"></div>
      <div class="absolute inset-0 bg-gradient-to-r from-transparent via-pink-500/10 to-transparent blur-3xl opacity-0 dark:opacity-100 transition-opacity duration-500 z-0"></div>
      <h1 class="text-2xl font-extrabold tracking-wider uppercase text-gray-50 dark:text-gray-50 relative z-10">
        <span class="text-blue-400 dark:text-blue-500">FIT</span><span class="text-pink-400 dark:text-pink-500">HUB</span>
      </h1>
    </div>

    <nav class="flex-1 py-6 px-4 space-y-2 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-700 scrollbar-track-gray-900">

      <!-- Profile Section -->
      <div class="flex items-center p-4 rounded-lg bg-gray-800 hover:bg-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700 transition-all duration-200 relative group">
        <div class="absolute inset-0 bg-blue-500/10 dark:bg-blue-500/20 opacity-0 group-hover:opacity-100 blur-sm transition-opacity duration-300"></div>
        <img class="h-12 w-12 rounded-full border-2 border-blue-400 dark:border-blue-500 object-cover relative z-10" src="https://randomuser.me/api/portraits/women/65.jpg" alt="User Avatar">
        <div class="ml-4 relative z-10">
          <p class="font-semibold text-gray-50 dark:text-gray-100">Jane Doe</p>
          <p class="text-sm text-gray-400 dark:text-gray-400">Athlete Pro</p>
        </div>
      </div>

      <!-- Main Navigation -->
      <a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-blue-600/30 hover:text-blue-400 dark:hover:bg-blue-500/20 dark:hover:text-blue-500 group relative overflow-hidden transition-all duration-200">
        <div class="absolute inset-0 bg-blue-500/10 dark:bg-blue-500/20 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <svg class="h-5 w-5 mr-3 relative z-10" 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 1h3v-3m-6 0v3H9m0-6h.01M10 12l-2 2m2-2l2 2m-6 4h4"></path></svg>
        <span class="relative z-10">Dashboard</span>
      </a>
      <a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-pink-600/30 hover:text-pink-400 dark:hover:bg-pink-500/20 dark:hover:text-pink-500 group relative overflow-hidden transition-all duration-200">
        <div class="absolute inset-0 bg-pink-500/10 dark:bg-pink-500/20 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <svg class="h-5 w-5 mr-3 relative z-10" 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.79 2-4 2s-4-.895-4-2 1.79-2 4-2 4 .895 4 2zm12-3c0 1.105-1.79 2-4 2s-4-.895-4-2 1.79-2 4-2 4 .895 4 2zM9 10l12-3"></path></svg>
        <span class="relative z-10">Workouts</span>
      </a>
      <a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-blue-600/30 hover:text-blue-400 dark:hover:bg-blue-500/20 dark:hover:text-blue-500 group relative overflow-hidden transition-all duration-200">
        <div class="absolute inset-0 bg-blue-500/10 dark:bg-blue-500/20 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <svg class="h-5 w-5 mr-3 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h-4l-3-3H6.5a2.5 2.5 0 010-5H17l-3-3h4l3 3V20z"></path></svg>
        <span class="relative z-10">Team Stats</span>
      </a>
      <a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-pink-600/30 hover:text-pink-400 dark:hover:bg-pink-500/20 dark:hover:text-pink-500 group relative overflow-hidden transition-all duration-200">
        <div class="absolute inset-0 bg-pink-500/10 dark:bg-pink-500/20 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <svg class="h-5 w-5 mr-3 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
        <span class="relative z-10">Schedule</span>
      </a>
      <a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-blue-600/30 hover:text-blue-400 dark:hover:bg-blue-500/20 dark:hover:text-blue-500 group relative overflow-hidden transition-all duration-200">
        <div class="absolute inset-0 bg-blue-500/10 dark:bg-blue-500/20 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <svg class="h-5 w-5 mr-3 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17L3 11m0 0l6-6m-6 6h12a2 2 0 012 2v6a2 2 0 01-2 2H3a2 2 0 01-2-2v-6a2 2 0 012-2zm0 0l6-6m-6 6h12a2 2 0 012 2v6a2 2 0 01-2 2H3a2 2 0 01-2-2v-6a2 2 0 012-2z"></path></svg>
        <span class="relative z-10">Reports</span>
      </a>

      <!-- Teams Section -->
      <div class="pt-4">
        <h3 class="text-xs uppercase tracking-wider text-gray-500 font-semibold mb-2">Teams</h3>
        <a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200 group relative overflow-hidden">
          <div class="absolute inset-0 bg-gray-500/10 dark:bg-gray-500/10 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          <span class="h-3 w-3 rounded-full bg-red-500 relative z-10 animate-pulse-glow-red"></span>
          <span class="ml-3 relative z-10">Phoenix United</span>
        </a>
        <a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200 group relative overflow-hidden">
          <div class="absolute inset-0 bg-gray-500/10 dark:bg-gray-500/10 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          <span class="h-3 w-3 rounded-full bg-green-500 relative z-10 animate-pulse-glow-green"></span>
          <span class="ml-3 relative z-10">Galaxy Runners</span>
        </a>
        <a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200 group relative overflow-hidden">
          <div class="absolute inset-0 bg-gray-500/10 dark:bg-gray-500/10 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          <span class="h-3 w-3 rounded-full bg-purple-500 relative z-10 animate-pulse-glow-purple"></span>
          <span class="ml-3 relative z-10">Zenith Strikers</span>
        </a>
      </div>
    </nav>

    <!-- Footer / Settings -->
    <div class="px-4 py-6 border-t border-gray-800">
      <a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200 group relative overflow-hidden">
        <div class="absolute inset-0 bg-gray-500/10 dark:bg-gray-500/10 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <svg class="h-5 w-5 mr-3 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
        <span class="relative z-10">Settings</span>
      </a>
      <a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors duration-200 group relative overflow-hidden">
        <div class="absolute inset-0 bg-gray-500/10 dark:bg-gray-500/10 blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <svg class="h-5 w-5 mr-3 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h12"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        <span class="relative z-10">Logout</span>
      </a>
    </div>
  </div>

  <!-- Main Content Area (for demonstration, not part of the sidebar itself) -->
  <div class="flex-1 p-8 text-gray-100 dark:text-gray-50 overflow-auto">
    <h2 class="text-3xl font-bold mb-6">
      <span class="text-blue-400 dark:text-blue-500">Welcome,</span> <span class="text-pink-400 dark:text-pink-500">Athlete!</span>
    </h2>
    <p class="mb-4">This is a placeholder for your main application content.</p>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="p-6 rounded-lg bg-gray-800 border border-gray-700 relative overflow-hidden group">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-transparent opacity-0 group-hover:opacity-100 blur-sm transition-opacity duration-300"></div>
        <h3 class="text-xl font-semibold mb-2 relative z-10">Daily Activity</h3>
        <p class="text-gray-400 relative z-10">Track your steps, calories, and active minutes.</p>
        <img src="https://picsum.photos/300/200?random=1" alt="Daily Activity" class="mt-4 rounded-md object-cover w-full h-32 relative z-10 opacity-70 group-hover:opacity-90 transition-opacity duration-300">
      </div>
      <div class="p-6 rounded-lg bg-gray-800 border border-gray-700 relative overflow-hidden group">
        <div class="absolute inset-0 bg-gradient-to-br from-pink-500/10 to-transparent opacity-0 group-hover:opacity-100 blur-sm transition-opacity duration-300"></div>
        <h3 class="text-xl font-semibold mb-2 relative z-10">Upcoming Events</h3>
        <p class="text-gray-400 relative z-10">Don't miss a game or practice session.</p>
        <img src="https://picsum.photos/300/200?random=2" alt="Upcoming Events" class="mt-4 rounded-md object-cover w-full h-32 relative z-10 opacity-70 group-hover:opacity-90 transition-opacity duration-300">
      </div>
      <div class="p-6 rounded-lg bg-gray-800 border border-gray-700 relative overflow-hidden group">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-transparent opacity-0 group-hover:opacity-100 blur-sm transition-opacity duration-300"></div>
        <h3 class="text-xl font-semibold mb-2 relative z-10">Performance Insights</h3>
        <p class="text-gray-400 relative z-10">Visualize your progress over time.</p>
        <img src="https://picsum.photos/300/200?random=3" alt="Performance Insights" class="mt-4 rounded-md object-cover w-full h-32 relative z-10 opacity-70 group-hover:opacity-90 transition-opacity duration-300">
      </div>
    </div>
    <p class="text-gray-500 mt-8 text-center text-sm">This content area demonstrates dark mode and overall integration.</p>
  </div>

  <style>
    /* Custom scrollbar for Webkit browsers */
    .scrollbar-thin::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

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

    .scrollbar-thin::-webkit-scrollbar-thumb {
      background-color: #4a5568; /* gray-700 */
      border-radius: 4px;
      border: 2px solid transparent;
    }

    .scrollbar-thin::-webkit-scrollbar-thumb:hover {
      background-color: #61626c; /* slightly lighter on hover */
    }

    /* Tailwind Animation Utilities */
    @keyframes pulse-glow-red {
      0%, 100% {
        box-shadow: 0 0 0px #ef4444;
      }
      50% {
        box-shadow: 0 0 8px #ef4444, 0 0 16px #ef4444;
      }
    }
    .animate-pulse-glow-red {
        animation: pulse-glow-red 2s infinite ease-in-out;
    }

    @keyframes pulse-glow-green {
      0%, 100% {
        box-shadow: 0 0 0px #22c55e;
      }
      50% {
        box-shadow: 0 0 8px #22c55e, 0 0 16px #22c55e;
      }
    }
    .animate-pulse-glow-green {
        animation: pulse-glow-green 2s infinite ease-in-out;
    }

     @keyframes pulse-glow-purple {
      0%, 100% {
        box-shadow: 0 0 0px #a855f7;
      }
      50% {
        box-shadow: 0 0 8px #a855f7, 0 0 16px #a855f7;
      }
    }
    .animate-pulse-glow-purple {
        animation: pulse-glow-purple 2s infinite ease-in-out;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .w-64 {
            width: 56px; /* Collapsed width on mobile */
        }

        .md\:w-72 {
            width: 56px; /* Override for mobile, effectively */
        }

        .flex-col .text-2xl, .flex-col .text-base, .flex-col .text-sm, .flex-col .text-lg, .flex-col .ml-4, .flex-col .mr-3, .flex-col .px-4, .flex-col .py-3, .flex-col .h-12, .flex-col .w-12, .flex-col .h-5, .flex-col .w-5, .flex-col .px-4, .flex-col .py-6 {
            display: none; /* Hide text/padding elements when collapsed */
        }

        .flex-col .h-20 {
            height: 60px;
        }

        .flex-col .items-center.justify-center {
            justify-content: center;
        }

        .flex-col .h-20 .text-2xl {
            display: initial; /* Show title on mobile */
            font-size: 1.5rem; /* Smaller title on mobile */
            line-height: 1.75rem;
        }

        .flex-col .h-20 .text-2xl span {
            display: none;
        }

         .flex-col .h-20 h1:before {
            content: 'F'; /* Show only 'F' for the logo on mobile */
            display: block;
            color: #60a5fa;
         }

         .flex-col .h-20 h1.dark\:text-gray-50:before {
            color: #60a5fa;
         }

        .flex-col .flex-col {
            width: 56px; /* Ensure collapsed width */
        }

        .flex-col .rounded-full {
            margin: auto; /* Center avatar */
        }

        .flex-col svg {
            margin-right: 0; /* Remove margin for icons */
        }

        .flex-col .px-4.py-3 {
            padding-left:0.9rem; /* Adjust padding for icons only */
            padding-right:0.9rem;
            justify-content: center;
        }

         .flex-col .px-4.py-3 span {
             display:none; /* Hide icon text */
         }

         .flex-col .rounded-lg.bg-gray-800, .flex-col .pt-4 {
            margin-top: 0; /* Adjust spacing */
            margin-bottom: 0;
         }
         .flex-col .pt-4 .text-xs {
            display: none; /* Hide team section title on mobile */
         }
         .flex-col .h-3.w-3 {
            margin: auto; /* Center team status indicator */
         }
         .flex-col .px-4.py-6 {
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
         }
    }
  </style>
</div>

Forum_Community_Component

A responsive and thematic forum/community discussion component with a corporate/professional design style and ocean/blue color scheme, including dark mode support.

Open Preview

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

  <!-- Component Header -->
  <div class="max-w-7xl mx-auto mb-8">
    <h1 class="text-3xl sm:text-4xl font-extrabold text-blue-900 dark:text-blue-200 mb-2">Community Discussions</h1>
    <p class="text-lg text-blue-700 dark:text-blue-300">Engage with our professionals, share insights, and get support.</p>
  </div>

  <!-- Main Content Area - Grid Layout for Topics/Posts -->
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">

    <!-- Left Column: Forum Categories/Topics -->
    <div class="md:col-span-2 space-y-6">

      <!-- Search and Filter Bar -->
      <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm flex flex-col sm:flex-row items-center gap-4">
        <input type="text" placeholder="Search discussions..." class="flex-grow p-2 border border-blue-200 dark:border-gray-700 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-blue-50 dark:bg-gray-700 text-blue-900 dark:text-white placeholder-blue-400 dark:placeholder-gray-500">
        <select class="p-2 border border-blue-200 dark:border-gray-700 rounded-md bg-blue-50 dark:bg-gray-700 text-blue-900 dark:text-white">
          <option>All Categories</option>
          <option>Product Feedback</option>
          <option>Technical Support</option>
          <option>General Discussion</option>
          <option>Announcements</option>
        </select>
        <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 transition duration-300 ease-in-out flex-shrink-0">
          New Topic
        </button>
      </div>

      <!-- Discussion Post Card (Repeated for multiple posts) -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden animate-fade-in">
        <div class="p-4 sm:p-6 border-b border-blue-100 dark:border-gray-700">
          <div class="flex items-center mb-2">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar">
            <div>
              <a href="#" class="font-semibold text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-300">John Doe</a>
              <span class="text-sm text-gray-500 dark:text-gray-400 block">Posted on April 15, 2024</span>
            </div>
          </div>
          <h2 class="text-xl sm:text-2xl font-bold text-blue-900 dark:text-blue-100 mb-2">How to best integrate analytics with our new CRM?</h2>
          <p class="text-blue-700 dark:text-blue-300 line-clamp-3">We're looking for the most efficient way to connect Google Analytics and our in-house CRM system to get a unified view of customer data. Any recommended tools or best practices?</p>
          <div class="mt-4 flex items-center justify-between">
            <div class="flex space-x-4 text-gray-600 dark:text-gray-400 text-sm">
              <span class="flex items-center"><svg class="w-4 h-4 mr-1" 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-1l-3 1 1-3A8.84 8.84 0 012 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9a1 1 0 100-2 1 1 0 000 2zm7-2a1 1 0 11-2 0 1 1 0 012 0zm-7 4a1 1 0 100-2 1 1 0 000 2zm7-2a1 1 0 11-2 0 1 1 0 012 0z" clip="evenodd"></path></svg>56 Replies</span>
              <span class="flex items-center"><svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12.586l4.293 4.293a1 1 0 001.414-1.414L11.414 11l4.293-4.293a1 1 0 00-1.414-1.414L10 9.586 5.707 5.293a1 1 0 00-1.414 1.414L8.586 10l-4.293 4.293a1 1 0 101.414 1.414L10 12.586z"></path></svg>Category: CRM</span>
            </div>
            <a href="#" class="px-3 py-1 bg-blue-100 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-sm font-medium rounded-full cursor-pointer hover:bg-blue-200 dark:hover:bg-blue-600 transition-colors">View Discussion</a>
          </div>
        </div>
      </div>

      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden animate-fade-in">
        <div class="p-4 sm:p-6 border-b border-blue-100 dark:border-gray-700">
          <div class="flex items-center mb-2">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Avatar">
            <div>
              <a href="#" class="font-semibold text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-300">Jane Doe</a>
              <span class="text-sm text-gray-500 dark:text-gray-400 block">Posted on April 14, 2024</span>
            </div>
          </div>
          <h2 class="text-xl sm:text-2xl font-bold text-blue-900 dark:text-blue-100 mb-2">Seeking advice on enhancing team collaboration with new tools.</h2>
          <p class="text-blue-700 dark:text-blue-300 line-clamp-3">Our team is growing, and we're looking for innovative tools or strategies to improve our daily collaboration and project management. Any suggestions beyond the usual suspects?</p>
          <div class="mt-4 flex items-center justify-between">
            <div class="flex space-x-4 text-gray-600 dark:text-gray-400 text-sm">
              <span class="flex items-center"><svg class="w-4 h-4 mr-1" 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-1l-3 1 1-3A8.84 8.84 0 012 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9a1 1 0 100-2 1 1 0 000 2zm7-2a1 1 0 11-2 0 1 1 0 012 0zm-7 4a1 1 0 100-2 1 1 0 000 2zm7-2a1 1 0 11-2 0 1 1 0 012 0z" clip="evenodd"></path></svg>32 Replies</span>
              <span class="flex items-center"><svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12.586l4.293 4.293a1 1 0 001.414-1.414L11.414 11l4.293-4.293a1 1 0 00-1.414-1.414L10 9.586 5.707 5.293a1 1 0 00-1.414 1.414L8.586 10l-4.293 4.293a1 1 0 101.414 1.414L10 12.586z"></path></svg>Category: Productivity</span>
            </div>
            <a href="#" class="px-3 py-1 bg-blue-100 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-sm font-medium rounded-full cursor-pointer hover:bg-blue-200 dark:hover:bg-blue-600 transition-colors">View Discussion</a>
          </div>
        </div>
      </div>

       <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden animate-fade-in">
        <div class="p-4 sm:p-6 border-b border-blue-100 dark:border-gray-700">
          <div class="flex items-center mb-2">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Avatar">
            <div>
              <a href="#" class="font-semibold text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-300">Michael Scott</a>
              <span class="text-sm text-gray-500 dark:text-gray-400 block">Posted on April 13, 2024</span>
            </div>
          </div>
          <h2 class="text-xl sm:text-2xl font-bold text-blue-900 dark:text-blue-100 mb-2">Best practices for secure cloud deployments?</h2>
          <p class="text-blue-700 dark:text-blue-300 line-clamp-3">Looking for advice on maintaining robust security for our cloud infrastructure. What are the essential guidelines and tools for a corporate environment?</p>
          <div class="mt-4 flex items-center justify-between">
            <div class="flex space-x-4 text-gray-600 dark:text-gray-400 text-sm">
              <span class="flex items-center"><svg class="w-4 h-4 mr-1" 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-1l-3 1 1-3A8.84 8.84 0 012 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9a1 1 0 100-2 1 1 0 000 2zm7-2a1 1 0 11-2 0 1 1 0 012 0zm-7 4a1 1 0 100-2 1 1 0 000 2zm7-2a1 1 0 11-2 0 1 1 0 012 0z" clip="evenodd"></path></svg>78 Replies</span>
              <span class="flex items-center"><svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12.586l4.293 4.293a1 1 0 001.414-1.414L11.414 11l4.293-4.293a1 1 0 00-1.414-1.414L10 9.586 5.707 5.293a1 1 0 00-1.414 1.414L8.586 10l-4.293 4.293a1 1 0 101.414 1.414L10 12.586z"></path></svg>Category: Cloud Security</span>
            </div>
            <a href="#" class="px-3 py-1 bg-blue-100 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-sm font-medium rounded-full cursor-pointer hover:bg-blue-200 dark:hover:bg-blue-600 transition-colors">View Discussion</a>
          </div>
        </div>
      </div>

    </div>

    <!-- Right Column: Sidebar (Popular Topics, Recent Activity etc.) -->
    <div class="space-y-6">

      <!-- Popular Topics -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 sm:p-6">
        <h3 class="text-lg font-bold text-blue-900 dark:text-blue-100 mb-4">Popular Topics</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 text-truncate block font-medium">Future of AI in Business Operations</a></li>
          <li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 text-truncate block">Optimizing Remote Workflows</a></li>
          <li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 text-truncate block">Cybersecurity Threats 2024 Report</a></li>
          <li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 text-truncate block">Sustainable Business Practices</a></li>
        </ul>
      </div>

      <!-- Recent Activity -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 sm:p-6">
        <h3 class="text-lg font-bold text-blue-900 dark:text-blue-100 mb-4">Recent Activity</h3>
        <ul class="space-y-3">
          <li class="flex items-start">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
            <div>
              <p class="text-sm text-blue-700 dark:text-blue-300"><span class="font-semibold">Sarah L.</span> replied to "Challenges in Hybrid Cloud Adoption"</p>
              <span class="text-xs text-gray-500 dark:text-gray-400">5 minutes ago</span>
            </div>
          </li>
          <li class="flex items-start">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <div>
              <p class="text-sm text-blue-700 dark:text-blue-300"><span class="font-semibold">David K.</span> started "Best Practices for Q2 Planning"</p>
              <span class="text-xs text-gray-500 dark:text-gray-400">1 hour ago</span>
            </div>
          </li>
          <li class="flex items-start">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/7.jpg" alt="Avatar">
            <div>
              <p class="text-sm text-blue-700 dark:text-blue-300"><span class="font-semibold">Emily R.</span> voted on "Effective Communication Strategies"</p>
              <span class="text-xs text-gray-500 dark:text-gray-400">3 hours ago</span>
            </div>
          </li>
        </ul>
      </div>

      <!-- Pinned Announcements -->
      <div class="bg-blue-600 dark:bg-blue-900 text-white dark:text-blue-100 rounded-lg shadow-md p-4 sm:p-6">
        <h3 class="text-lg font-bold mb-3">📢 Important Announcement</h3>
        <p class="text-sm opacity-90">Our annual system maintenance will occur on May 1st from 2 AM to 6 AM UTC. Expect brief service interruptions. Thank you for your understanding.</p>
        <a href="#" class="mt-3 inline-block bg-blue-700 dark:bg-blue-800 hover:bg-blue-800 dark:hover:bg-blue-700 text-white text-xs font-semibold px-3 py-1 rounded-full transition duration-300">Read More</a>
      </div>

    </div>

  </div>

  <!-- Pagination (Example) -->
  <div class="max-w-7xl mx-auto mt-8 flex justify-center">
    <nav class="relative z-0 inline-flex shadow-sm -space-x-px" aria-label="Pagination">
      <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-blue-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-gray-700">
        <span class="sr-only">Previous</span>
        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip="evenodd" />
        </svg>
      </a>
      <a href="#" aria-current="page" class="relative inline-flex items-center px-4 py-2 border border-blue-300 dark:border-gray-700 bg-blue-600 text-sm font-medium text-white hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors z-10">
        1
      </a>
      <a href="#" class="relative inline-flex items-center px-4 py-2 border border-blue-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-gray-700">
        2
      </a>
      <a href="#" class="hidden md:inline-flex relative items-center px-4 py-2 border border-blue-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-gray-700">
        3
      </a>
      <span class="relative inline-flex items-center px-4 py-2 border border-blue-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-400">
        ...
      </span>
      <a href="#" class="relative inline-flex items-center px-4 py-2 border border-blue-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-gray-700">
        10
      </a>
      <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-blue-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-gray-700">
        <span class="sr-only">Next</span>
        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip="evenodd" />
        </svg>
      </a>
    </nav>
  </div>

</div>

Brutalist_Sepia_Timeline_Documentation

A complex, brutalist-style timeline component for documentation or wiki sites, featuring sepia/brown tones and full responsiveness with dark mode support. Designed with high contrast and raw aesthetics.

Open Preview

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

  <h1 class="text-4xl sm:text-5xl md:text-6xl font-bold mb-8 sm:mb-12 text-stone-900 dark:text-stone-100 uppercase tracking-tighter border-b-4 border-stone-900 dark:border-stone-100 pb-2">
    Project Chronology <span class="text-stone-600 dark:text-stone-400">// V-0.1</span>
  </h1>

  <div class="max-w-6xl mx-auto relative">

    <!-- Vertical Line -->
    <div class="absolute left-4 sm:left-1/2 -ml-0.5 w-1 h-full bg-stone-500 dark:bg-stone-600 border border-stone-900 dark:border-stone-100 transform -translate-x-1/2"></div>

    <!-- Timeline Item 1 -->
    <div class="mb-10 sm:flex sm:justify-between items-center w-full right-aligned-item">
      <div class="order-1 sm:order-2 sm:w-1/2 flex justify-start sm:justify-end pr-4 sm:pr-8 md:pr-12">
        <div class="w-full sm:w-10/12 md:w-8/12 bg-stone-200 dark:bg-stone-800 p-4 sm:p-6 border-4 border-stone-900 dark:border-stone-100 shadow-[8px_8px_0_0_rgba(0,0,0,0.8)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.2)] transform transition-all duration-200 hover:scale-[1.01] hover:shadow-[12px_12px_0_0_rgba(0,0,0,0.8)] dark:hover:shadow-[12px_12px_0_0_rgba(255,255,255,0.2)]">
          <h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-100 uppercase pb-1 border-b-2 border-stone-500 dark:border-stone-400">System Architecture Draft</h3>
          <p class="mb-3 text-stone-700 dark:text-stone-300">Initial conceptualization of modular components and data flow. Focus on redundancy and fault tolerance.</p>
          <div class="text-sm text-stone-600 dark:text-stone-400 flex items-center justify-between">
            <span>Version 1.0.0 Alpha</span>
            <span class="font-bold text-stone-900 dark:text-stone-100">12, JAN 2023</span>
          </div>
          <div class="flex items-center space-x-2 mt-4 -ml-2">
            <img class="w-8 h-8 rounded-full border-2 border-stone-900 dark:border-stone-100" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Author">
            <span class="text-md text-stone-700 dark:text-stone-300">By <a href="#" class="underline font-bold">Dr. A. Smith</a></span>
          </div>
        </div>
      </div>
      <div class="absolute left-4 sm:left-1/2 -translate-x-1/2 w-8 h-8 rounded-full bg-stone-900 dark:bg-stone-100 border-4 border-stone-500 dark:border-stone-600 z-10 hidden sm:block"></div>
    </div>

    <!-- Timeline Item 2 -->
    <div class="mb-10 sm:flex sm:justify-between items-center w-full left-aligned-item">
      <div class="order-1 sm:order-1 sm:w-1/2 flex justify-start sm:justify-start pl-4 sm:pl-8 md:pl-12">
        <div class="w-full sm:w-10/12 md:w-8/12 bg-stone-200 dark:bg-stone-800 p-4 sm:p-6 border-4 border-stone-900 dark:border-stone-100 shadow-[8px_8px_0_0_rgba(0,0,0,0.8)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.2)] transform transition-all duration-200 hover:scale-[1.01] hover:shadow-[12px_12px_0_0_rgba(0,0,0,0.8)] dark:hover:shadow-[12px_12px_0_0_rgba(255,255,255,0.2)]">
          <h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-100 uppercase pb-1 border-b-2 border-stone-500 dark:border-stone-400">Core Module Prototyping</h3>
          <p class="mb-3 text-stone-700 dark:text-stone-300">Development begins on critical path components, including secure data handling and authentication layers.</p>
          <img src="https://picsum.photos/400/250?random=1" alt="Prototyping" class="w-full h-auto object-cover border-2 border-stone-900 dark:border-stone-100 mb-3 grayscale mix-blend-multiply dark:mix-blend-normal">
          <div class="text-sm text-stone-600 dark:text-stone-400 flex items-center justify-between">
            <span>Hotfix Branch 3.1</span>
            <span class="font-bold text-stone-900 dark:text-stone-100">05, APR 2023</span>
          </div>
          <div class="flex items-center space-x-2 mt-4 -ml-2">
            <img class="w-8 h-8 rounded-full border-2 border-stone-900 dark:border-stone-100" src="https://randomuser.me/api/portraits/women/42.jpg" alt="Author">
            <span class="text-md text-stone-700 dark:text-stone-300">By <a href="#" class="underline font-bold">J. Rodriguez</a></span>
          </div>
        </div>
      </div>
      <div class="absolute left-4 sm:left-1/2 -translate-x-1/2 w-8 h-8 rounded-full bg-stone-900 dark:bg-stone-100 border-4 border-stone-500 dark:border-stone-600 z-10 hidden sm:block"></div>
    </div>

    <!-- Timeline Item 3 -->
    <div class="mb-10 sm:flex sm:justify-between items-center w-full right-aligned-item">
      <div class="order-1 sm:order-2 sm:w-1/2 flex justify-start sm:justify-end pr-4 sm:pr-8 md:pr-12">
        <div class="w-full sm:w-10/12 md:w-8/12 bg-stone-200 dark:bg-stone-800 p-4 sm:p-6 border-4 border-stone-900 dark:border-stone-100 shadow-[8px_8px_0_0_rgba(0,0,0,0.8)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.2)] transform transition-all duration-200 hover:scale-[1.01] hover:shadow-[12px_12px_0_0_rgba(0,0,0,0.8)] dark:hover:shadow-[12px_12px_0_0_rgba(255,255,255,0.2)]">
          <h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-100 uppercase pb-1 border-b-2 border-stone-500 dark:border-stone-400">Security Audit & Remediation</h3>
          <p class="mb-3 text-stone-700 dark:text-stone-300">Comprehensive third-party security assessment. Identified and patched critical vulnerabilities.</p>
          <ul class="list-disc list-inside text-sm mb-3 text-stone-700 dark:text-stone-300">
              <li>CVE-2023-1234 patched.</li>
              <li>Cross-site scripting mitigation implemented.</li>
              <li>Access control list hardening applied.</li>
          </ul>
          <div class="text-sm text-stone-600 dark:text-stone-400 flex items-center justify-between">
            <span>Audit Report v2.1</span>
            <span class="font-bold text-stone-900 dark:text-stone-100">20, JUN 2023</span>
          </div>
          <div class="flex items-center space-x-2 mt-4 -ml-2">
            <img class="w-8 h-8 rounded-full border-2 border-stone-900 dark:border-stone-100" src="https://randomuser.me/api/portraits/men/29.jpg" alt="Author">
            <span class="text-md text-stone-700 dark:text-stone-300">By <a href="#" class="underline font-bold">Cyb. Sec. Team</a></span>
          </div>
        </div>
      </div>
      <div class="absolute left-4 sm:left-1/2 -translate-x-1/2 w-8 h-8 rounded-full bg-stone-900 dark:bg-stone-100 border-4 border-stone-500 dark:border-stone-600 z-10 hidden sm:block"></div>
    </div>

    <!-- Timeline Item 4 -->
    <div class="mb-10 sm:flex sm:justify-between items-center w-full left-aligned-item">
      <div class="order-1 sm:order-1 sm:w-1/2 flex justify-start sm:justify-start pl-4 sm:pl-8 md:pl-12">
        <div class="w-full sm:w-10/12 md:w-8/12 bg-stone-200 dark:bg-stone-800 p-4 sm:p-6 border-4 border-stone-900 dark:border-stone-100 shadow-[8px_8px_0_0_rgba(0,0,0,0.8)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,0.2)] transform transition-all duration-200 hover:scale-[1.01] hover:shadow-[12px_12px_0_0_rgba(0,0,0,0.8)] dark:hover:shadow-[12px_12px_0_0_rgba(255,255,255,0.2)]">
          <h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-100 uppercase pb-1 border-b-2 border-stone-500 dark:border-stone-400">Beta Launch & Feedback</h3>
          <p class="mb-3 text-stone-700 dark:text-stone-300">Limited release to internal testers and key partners. Initial user feedback gathered and analyzed.</p>
          <div class="grid grid-cols-2 gap-2 mb-3">
            <img src="https://picsum.photos/200/150?random=2" alt="Beta Testing 1" class="w-full h-auto object-cover border-2 border-stone-900 dark:border-stone-100 grayscale mix-blend-multiply dark:mix-blend-normal">
            <img src="https://picsum.photos/200/150?random=3" alt="Beta Testing 2" class="w-full h-auto object-cover border-2 border-stone-900 dark:border-stone-100 grayscale mix-blend-multiply dark:mix-blend-normal">
          </div>
          <div class="text-sm text-stone-600 dark:text-stone-400 flex items-center justify-between">
            <span>Build 2023.Q3.BETA</span>
            <span class="font-bold text-stone-900 dark:text-stone-100">01, SEP 2023</span>
          </div>
          <div class="flex items-center space-x-2 mt-4 -ml-2">
            <img class="w-8 h-8 rounded-full border-2 border-stone-900 dark:border-stone-100" src="https://randomuser.me/api/portraits/women/67.jpg" alt="Author">
            <span class="text-md text-stone-700 dark:text-stone-300">By <a href="#" class="underline font-bold">Team Lead</a></span>
          </div>
        </div>
      </div>
      <div class="absolute left-4 sm:left-1/2 -translate-x-1/2 w-8 h-8 rounded-full bg-stone-900 dark:bg-stone-100 border-4 border-stone-500 dark:border-stone-600 z-10 hidden sm:block"></div>
    </div>

    <!-- Timeline Item 5 (Future Milestone - visual distinction) -->
    <div class="mb-10 sm:flex sm:justify-between items-center w-full right-aligned-item opacity-70 cursor-not-allowed">
      <div class="order-1 sm:order-2 sm:w-1/2 flex justify-start sm:justify-end pr-4 sm:pr-8 md:pr-12">
        <div class="w-full sm:w-10/12 md:w-8/12 bg-stone-300 dark:bg-stone-700 p-4 sm:p-6 border-4 border-stone-600 dark:border-stone-400 border-dashed shadow-[4px_4px_0_0_rgba(0,0,0,0.5)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,0.1)]">
          <h3 class="text-2xl font-bold mb-2 text-stone-700 dark:text-stone-300 uppercase pb-1 border-b-2 border-stone-400 dark:border-stone-500">Public Release Candidate</h3>
          <p class="mb-3 text-stone-600 dark:text-stone-400">Preparation for wider audience release. Final checks and documentation updates.</p>
          <div class="text-sm text-stone-500 dark:text-stone-500 flex items-center justify-between">
            <span>ETA: Full Launch</span>
            <span class="font-bold text-stone-700 dark:text-stone-300">Q4, 2023+</span>
          </div>
        </div>
      </div>
      <div class="absolute left-4 sm:left-1/2 -translate-x-1/2 w-8 h-8 rounded-full bg-stone-600 dark:bg-stone-400 border-4 border-stone-300 dark:border-stone-700 z-10 hidden sm:block"></div>
    </div>

  </div>

</div>

Table of Contents Component

A responsive and dark mode enabled Table of Contents component with a retro/vintage color palette, suitable for dating/social platforms. It features a muted color scheme and smooth scrolling navigation.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gray-200 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-xs mx-auto md:max-w-sm lg:max-w-md xl:max-w-lg bg-red-800 bg-opacity-70 dark:bg-red-950 dark:bg-opacity-70 rounded-lg shadow-xl overflow-hidden backdrop-filter backdrop-blur-sm">
    <div class="p-4 sm:p-5 md:p-6 bg-red-900 bg-opacity-80 dark:bg-red-900 dark:bg-opacity-90 border-b border-rose-900 dark:border-rose-950">
      <h2 class="text-xl sm:text-2xl font-bold text-amber-200 dark:text-amber-100 uppercase tracking-wide text-center">Explore Profiles</h2>
    </div>
    <nav class="py-3 sm:py-4 md:py-5">
      <ul class="space-y-1 sm:space-y-2 px-3 sm:px-4 md:px-5">
        <li>
          <a href="#popular" class="flex items-center p-2 sm:p-3 rounded-lg text-amber-100 dark:text-amber-50 hover:bg-red-700 dark:hover:bg-red-800 transition-colors duration-200 group">
            <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-3 text-amber-300 dark:text-amber-200 group-hover:text-amber-100 dark:group-hover:text-amber-50" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a4 4 0 014-4h12v-2.334A4.9 4.9 0 0013 3h-1.06C11.393 4.8 9.721 6 7.854 6c-.958 0-1.868-.27-2.614-.723M17 20a2 2 0 01-2 2H3a2 2 0 01-2-2

Progress Indicators Component

A simple, responsive progress indicator component with neon/glow effects and jewel tones, suitable for consulting/service websites. Includes dark mode support.

Open Preview

                <div class="font-sans bg-stone-950 text-emerald-300 min-h-screen p-8 sm:p-12 lg:p-16 flex items-center justify-center dark:bg-gray-950 dark:text-emerald-300">
  <div class="w-full max-w-4xl">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-10 sm:mb-14 relative group leading-tight">
      <span class="bg-clip-text text-transparent bg-gradient-to-r from-emerald-400 via-emerald-200 to-emerald-400 drop-shadow-lg inline-block relative">
        Our Consulting Process
        <span class="absolute inset-x-0 bottom-[-5px] h-[3px] bg-gradient-to-r from-emerald-500 via-emerald-300 to-emerald-500 blur-sm opacity-75 animate-pulse"></span>
      </span>
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
      <!-- Step 1 -->
      <div class="flex flex-col items-center text-center p-6 rounded-lg border border-emerald-700 bg-gradient-to-br from-stone-900 to-stone-950 shadow-md transition-all duration-300 hover:shadow-emerald-500/30 hover:scale-[1.02] relative group overflow-hidden">
        <span class="absolute inset-0 bg-gradient-to-br from-emerald-900/0 via-emerald-800/20 to-emerald-900/0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-lg pointer-events-none"></span>
        <div class="relative z-10">
          <div class="w-16 h-16 sm:w-20 sm:h-20 bg-gradient-to-br from-emerald-600 to-emerald-800 rounded-full flex items-center justify-center mb-4 sm:mb-6 shadow-lg shadow-emerald-500/40 relative">
            <p class="text-2xl sm:text-3xl font-bold text-white drop-shadow-md">1</p>
             <span class="absolute inset-0 w-full h-full bg-emerald-400 rounded-full blur-xl opacity-30 animate-pulse"></span>
          </div>
          <h3 class="text-xl sm:text-2xl font-semibold mb-2 text-emerald-200 drop-shadow-sm">Discovery</h3>
          <p class="text-sm sm:text-base text-emerald-400 opacity-80 leading-relaxed">Understanding your unique needs and challenges through detailed consultation.</p>
        </div>
      </div>

      <!-- Step 2 -->
      <div class="flex flex-col items-center text-center p-6 rounded-lg border border-emerald-700 bg-gradient-to-br from-stone-900 to-stone-950 shadow-md transition-all duration-300 hover:shadow-emerald-500/30 hover:scale-[1.02] relative group overflow-hidden">
        <span class="absolute inset-0 bg-gradient-to-br from-emerald-900/0 via-emerald-800/20 to-emerald-900/0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-lg pointer-events-none"></span>
        <div class="relative z-10">
          <div class="w-16 h-16 sm:w-20 sm:h-20 bg-gradient-to-br from-emerald-600 to-emerald-800 rounded-full flex items-center justify-center mb-4 sm:mb-6 shadow-lg shadow-emerald-500/40 relative">
            <p class="text-2xl sm:text-3xl font-bold text-white drop-shadow-md">2</p>
             <span class="absolute inset-0 w-full h-full bg-emerald-400 rounded-full blur-xl opacity-30 animate-pulse"></span>
          </div>
          <h3 class="text-xl sm:text-2xl font-semibold mb-2 text-emerald-200 drop-shadow-sm">Strategy</h3>
          <p class="text-sm sm:text-base text-emerald-400 opacity-80 leading-relaxed">Crafting tailored strategies and actionable plans specific to your objectives.</p>
        </div>
      </div>

      <!-- Step 3 -->
      <div class="flex flex-col items-center text-center p-6 rounded-lg border border-emerald-700 bg-gradient-to-br from-stone-900 to-stone-950 shadow-md transition-all duration-300 hover:shadow-emerald-500/30 hover:scale-[1.02] relative group overflow-hidden">
        <span class="absolute inset-0 bg-gradient-to-br from-emerald-900/0 via-emerald-800/20 to-emerald-900/0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-lg pointer-events-none"></span>
        <div class="relative z-10">
          <div class="w-16 h-16 sm:w-20 sm:h-20 bg-gradient-to-br from-emerald-600 to-emerald-800 rounded-full flex items-center justify-center mb-4 sm:mb-6 shadow-lg shadow-emerald-500/40 relative">
            <p class="text-2xl sm:text-3xl font-bold text-white drop-shadow-md">3</p>
             <span class="absolute inset-0 w-full h-full bg-emerald-400 rounded-full blur-xl opacity-30 animate-pulse"></span>
          </div>
          <h3 class="text-xl sm:text-2xl font-semibold mb-2 text-emerald-200 drop-shadow-sm">Execution</h3>
          <p class="text-sm sm:text-base text-emerald-400 opacity-80 leading-relaxed">Implementing solutions and providing hands-on support for successful deployment.</p>
        </div>
      </div>

      <!-- Step 4 -->
      <div class="flex flex-col items-center text-center p-6 rounded-lg border border-emerald-700 bg-gradient-to-br from-stone-900 to-stone-950 shadow-md transition-all duration-300 hover:shadow-emerald-500/30 hover:scale-[1.02] relative group overflow-hidden">
        <span class="absolute inset-0 bg-gradient-to-br from-emerald-900/0 via-emerald-800/20 to-emerald-900/0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-lg pointer-events-none"></span>
        <div class="relative z-10">
          <div class="w-16 h-16 sm:w-20 sm:h-20 bg-gradient-to-br from-emerald-600 to-emerald-800 rounded-full flex items-center justify-center mb-4 sm:mb-6 shadow-lg shadow-emerald-500/40 relative">
            <p class="text-2xl sm:text-3xl font-bold text-white drop-shadow-md">4</p>
             <span class="absolute inset-0 w-full h-full bg-emerald-400 rounded-full blur-xl opacity-30 animate-pulse"></span>
          </div>
          <h3 class="text-xl sm:text-2xl font-semibold mb-2 text-emerald-200 drop-shadow-sm">Growth</h3>
          <p class="text-sm sm:text-base text-emerald-400 opacity-80 leading-relaxed">Monitoring performance and refining strategies for continuous improvement and growth.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Neumorphic Vibrant Rating System Component

A complex, interactive rating system component designed with a Neumorphic style and vibrant color scheme, suitable for forum and community platforms. It includes star ratings, up/down voting, and a numerical display, with full responsiveness and dark mode support.

Open Preview

                <div class="p-6 sm:p-8 md:p-10 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-900 dark:to-gray-800 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl mx-auto rounded-3xl shadow-xl space-y-8 p-6 sm:p-8 md:p-10
    bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-850 dark:to-gray-750
    dark:shadow-[inset_2px_2px_5px_#222,inset_-5px_-5px_10px_#444] shadow-[inset_2px_2px_5px_#dcdcdc,inset_-5px_-5px_15px_#ffffff]">

    <div class="text-center">
      <h2 class="text-2xl sm:text-3xl font-bold mb-2 text-purple-700 dark:text-purple-300">
        Rate This Discussion!
      </h2>
      <p class="text-sm sm:text-base text-pink-600 dark:text-pink-200">
        Your feedback helps the community grow.
      </p>
    </div>

    <!-- Star Rating Section -->
    <div class="flex justify-center items-center gap-2 sm:gap-3 lg:gap-4 p-4 sm:p-5 rounded-2xl
      bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-800 dark:to-gray-700
      shadow-[inset_2px_2px_5px_#e0e0e0,inset_-5px_-5px_10px_#ffffff] dark:shadow-[inset_2px_2px_5px_#222,inset_-5px_-5px_10px_#444]
      relative border-t border-l border-white/50 dark:border-gray-600/50">

      <!-- Each star is a 'button' for demonstration, in a real app these would be radio inputs or JS controlled -->
      <div class="group relative cursor-pointer">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-400 opacity-60 hover:opacity-100 transition-all duration-200
          group-hover:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)] group-[.active]:opacity-100 group-[.active]:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)]"
          fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
        </svg>
        <span class="absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-800 dark:to-gray-700 rounded-lg text-xs text-purple-700 dark:text-purple-300 opacity-0 group-hover:opacity-100 transition-opacity duration-200 shadow-md whitespace-nowrap">Terrible</span>
      </div>
      <div class="group relative cursor-pointer">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-400 opacity-60 hover:opacity-100 transition-all duration-200
          group-hover:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)] group-[.active]:opacity-100 group-[.active]:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)]"
          fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
        </svg>
        <span class="absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-800 dark:to-gray-700 rounded-lg text-xs text-purple-700 dark:text-purple-300 opacity-0 group-hover:opacity-100 transition-opacity duration-200 shadow-md whitespace-nowrap">Bad</span>
      </div>
      <div class="group relative cursor-pointer">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-400 opacity-60 hover:opacity-100 transition-all duration-200
          group-hover:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)] group-[.active]:opacity-100 group-[.active]:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)]"
          fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
        </svg>
        <span class="absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-800 dark:to-gray-700 rounded-lg text-xs text-purple-700 dark:text-purple-300 opacity-0 group-hover:opacity-100 transition-opacity duration-200 shadow-md whitespace-nowrap">Okay</span>
      </div>
      <div class="group relative cursor-pointer">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-400 opacity-60 hover:opacity-100 transition-all duration-200
          group-hover:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)] group-[.active]:opacity-100 group-[.active]:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)]"
          fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
        </svg>
        <span class="absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-800 dark:to-gray-700 rounded-lg text-xs text-purple-700 dark:text-purple-300 opacity-0 group-hover:opacity-100 transition-opacity duration-200 shadow-md whitespace-nowrap">Good</span>
      </div>
      <div class="group relative cursor-pointer active">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-yellow-400 opacity-100 transition-all duration-200
          drop-shadow-[0_0_8px_rgba(252,211,77,0.7)] !group-hover:opacity-100 !group-hover:drop-shadow-[0_0_8px_rgba(252,211,77,0.7)]"
          fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
        </svg>
        <span class="absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-800 dark:to-gray-700 rounded-lg text-xs text-purple-700 dark:text-purple-300 opacity-0 group-hover:opacity-100 transition-opacity duration-200 shadow-md whitespace-nowrap">Excellent</span>
      </div>
    </div>

    <!-- Up/Down Voting Section -->
    <div class="flex justify-center items-center gap-6 sm:gap-8 p-4 sm:p-5 rounded-2xl relative
      bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-800 dark:to-gray-700
      shadow-[inset_2px_2px_5px_#e0e0e0,inset_-5px_-5px_10px_#ffffff] dark:shadow-[inset_2px_2px_5px_#222,inset_-5px_-5px_10px_#444]
      border-t border-l border-white/50 dark:border-gray-600/50">
      
      <!-- Downvote Button -->
      <button class="relative px-4 py-2 sm:px-6 sm:py-3 rounded-full group
        bg-gradient-to-br from-pink-500 to-red-500 dark:from-pink-600 dark:to-red-600
        shadow-[5px_5px_10px_#d0d0d0,-5px_-5px_10px_#ffffff] dark:shadow-[5px_5px_10px_#111,-5px_-5px_10px_#555]
        text-white font-semibold flex items-center justify-center gap-2
        hover:shadow-[inset_2px_2px_5px_#a0a0a0,inset_-5px_-5px_10px_#ffffff] dark:hover:shadow-[inset_2px_2px_5px_#222,inset_-5px_-5px_10px_#444]
        transition-all duration-200 active:scale-95">
        <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path>
        </svg>
        <span class="text-sm sm:text-base">Downvote</span>
      </button>
      
      <!-- Score Display -->
      <span class="text-4xl sm:text-5xl font-extrabold text-purple-700 dark:text-purple-300 drop-shadow-md">
        +124
      </span>
      
      <!-- Upvote Button active -->
      <button class="relative px-4 py-2 sm:px-6 sm:py-3 rounded-full active group
        bg-gradient-to-br from-green-500 to-blue-500 dark:from-green-600 dark:to-blue-600
        shadow-[inset_2px_2px_5px_#a0a0a0,inset_-5px_-5px_10px_#ffffff] dark:shadow-[inset_2px_2px_5px_#222,inset_-5px_-5px_10px_#444]
        text-white font-semibold flex items-center justify-center gap-2
        hover:shadow-[5px_5px_10px_#d0d0d0,-5px_-5px_10px_#ffffff] dark:hover:shadow-[5px_5px_10px_#111,-5px_-5px_10px_#555]
        transition-all duration-200 active:scale-95">
        <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
        <span class="text-sm sm:text-base">Upvote</span>
      </button>
    </div>

    <!-- Comment/Submit Section -->
    <div class="flex flex-col sm:flex-row gap-4">
      <input type="text" placeholder="Add a quick comment..." class="flex-grow px-5 py-3 rounded-full
        bg-purple-50 dark:bg-gray-700 text-purple-800 dark:text-white
        shadow-[inset_2px_2px_5px_#d0d0d0,inset_-5px_-5px_10px_#ffffff] dark:shadow-[inset_2px_2px_5px_#222,inset_-5px_-5px_10px_#444]
        focus:outline-none focus:ring-2 focus:ring-purple-400 dark:focus:ring-purple-500
        placeholder-purple-400 dark:placeholder-gray-500 transition-all duration-200 text-sm sm:text-base">
      <button class="px-6 py-3 rounded-full
        bg-gradient-to-br from-purple-600 to-pink-600 dark:from-purple-700 dark:to-pink-700
        shadow-[5px_5px_10px_#d0d0d0,-5px_-5px_10px_#ffffff] dark:shadow-[5px_5px_10px_#111,-5px_-5px_10px_#555]
        text-white font-semibold flex items-center justify-center gap-2 transition-all duration-200
        hover:scale-[1.02] hover:shadow-[7px_7px_14px_#c0c0c0,-7px_-7px_14px_#ffffff] dark:hover:shadow-[7px_7px_14px_#000,-7px_-7px_14px_#666]
        active:scale-95 active:shadow-[inset_2px_2px_5px_#a0a0a0,inset_-5px_-5px_10px_#ffffff] dark:active:shadow-[inset_2px_2px_5px_#222,inset_-5px_-5px_10px_#444]">
        Submit Rating
      </button>
    </div>

    <p class="text-xs text-center text-gray-500 dark:text-gray-400 mt-6">
      Average rating: <span class="font-bold text-indigo-700 dark:text-indigo-300">4.5/5</span> based on <span class="font-bold text-indigo-700 dark:text-indigo-300">2,345 votes</span>
    </p>

  </div>
  
  <!-- Custom Dark Mode Toggle (for demonstration) -->
  <div class="absolute top-4 right-4 flex items-center space-x-2">
    <span class="text-gray-700 dark:text-gray-300 text-sm">Light</span>
    <label for="dark-mode-toggle" class="relative inline-flex items-center cursor-pointer">
      <input type="checkbox" id="dark-mode-toggle" class="sr-only peer" onchange="document.documentElement.classList.toggle('dark')">
      <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-purple-600"></div>
    </label>
    <span class="text-gray-700 dark:text-gray-300 text-sm">Dark</span>
  </div>
</div>

<style>
  /* Custom CSS for Neumorphism background colors */
  .dark .bg-gray-850 {
    background-color: #1a1a1a; /* Deeper dark for neumorphism inset */
  }
  .dark .bg-gray-750 {
    background-color: #2a2a2a; /* Lighter dark for neumorphism inset */
  }
</style>

Site Map Component

A simple, responsive sitemap component for Technology/SaaS applications with a dark mode UI and a rainbow gradient accent. Optimized for minimal elements and clear navigation.

Open Preview

                <footer class="bg-gray-950 text-gray-300 py-8 md:py-12 lg:py-16 dark:bg-gray-950">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-8 text-center md:text-left">

      <div class="col-span-1">
        <h3 class="text-lg font-semibold text-white mb-4 bg-clip-text text-transparent bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 inline-block">Product</h3>
        <ul class="space-y-2">
          <li><a href="#" class="hover:text-white transition-colors duration-200">Features</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Pricing</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Integrations</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Roadmap</a></li>
        </ul>
      </div>

      <div class="col-span-1">
        <h3 class="text-lg font-semibold text-white mb-4 bg-clip-text text-transparent bg-gradient-to-r from-green-500 via-blue-500 to-indigo-500 inline-block">Company</h3>
        <ul class="space-y-2">
          <li><a href="#" class="hover:text-white transition-colors duration-200">About Us</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Careers</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Blog</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Partners</a></li>
        </ul>
      </div>

      <div class="col-span-1">
        <h3 class="text-lg font-semibold text-white mb-4 bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 inline-block">Resources</h3>
        <ul class="space-y-2">
          <li><a href="#" class="hover:text-white transition-colors duration-200">Documentation</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Support</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Community</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">API Status</a></li>
        </ul>
      </div>

      <div class="col-span-1">
        <h3 class="text-lg font-semibold text-white mb-4 bg-clip-text text-transparent bg-gradient-to-r from-pink-500 via-orange-500 to-red-500 inline-block">Legal</h3>
        <ul class="space-y-2">
          <li><a href="#" class="hover:text-white transition-colors duration-200">Privacy Policy</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Terms of Service</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Cookie Policy</a></li>
          <li><a href="#" class="hover:text-white transition-colors duration-200">Compliance</a></li>
        </ul>
      </div>

      <div class="col-span-1 md:col-span-3 lg:col-span-1 flex flex-col items-center md:items-start space-y-4">
        <h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-red-500 via-yellow-400 via-green-400 via-blue-400 via-indigo-400 to-purple-500 inline-block">YourApp</h3>
        <p class="text-sm text-gray-500 dark:text-gray-400 text-center md:text-left">Building the future of SaaS.</p>
        <div class="flex space-x-4">
          <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200" aria-label="Twitter">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M8.29 20.251c-1.83 0-3.32-.49-4.81-1.48C2.18 17.77 1 15.53 1 12.5c0-2.88 1.18-5.11 3.29-6.42.06-.03.1-.05.15-.07.08-.03.17-.06.25-.09.32-.12.65-.22.99-.31 1.7-.49 3.5-.83 5.3-.83 1.94 0 3.79.34 5.56.96.96.34 1.87.8 2.72 1.34.85.54 1.63 1.18 2.34 1.89.71.71 1.35 1.49 1.89 2.34.54.85.98 1.76 1.34 2.73.62 1.77.96 3.63.96 5.56 0 2.8-1.04 4.86-3.13 6.18-2.09 1.32-4.57 1.98-7.44 1.98zM9.5 13.91l8.77-8.77 2.11 2.11-8.77 8.77-4.11-4.11L9.5 13.91z" fill="currentColor"/>
              <path d="M22.251 17.581c-.552 0-1 .448-1 1s.448 1 1 1h.75c.552 0 1-.448 1-1s-.448-1-1-1h-.75zM1.751 17.581c.552 0 1 .448 1 1s-.448 1-1 1h-.75c-.552 0-1-.448-1-1s.448-1 1-1h.75z" fill="currentColor"/>
            </svg>
          </a>
          <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200" aria-label="LinkedIn">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M19 0H5a5 5 0 00-5 5v14a5 5 0 005 5h14a5 5 0 005-5V5a5 5 0 00-5-5zM8 19H5V8h3v11zM6.5 6.73a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM19 19h-3v-4.75c0-1.4-.47-2.37-1.76-2.37-1.35 0-2.14 1.02-2.14 2.37V19h-3V8h3v1.75s.9-1.63 2.87-1.63c2.25 0 3.13 1.55 3.13 4.88V19z" fill="currentColor"/>
            </svg>
          </a>
          <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200" aria-label="GitHub">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.83 9.504.475.087.687-.206.687-.456 0-.227-.007-.75-.011-1.849-2.782.607-3.368-1.341-3.368-1.341-.454-1.15-.111-1.458-.111-1.458.37-.26.02-.255.02-.255.407-.03.62.261.62.261.363.626.953.444 1.187.34.037-.266.142-.444.258-.546-1.076-.123-2.203-.538-2.203-2.404 0-.53.192-.964.507-1.304-.05-.123-.22-.616.04-.123 0 0 .415.13.882.3.82-.254 1.69-.395 2.578-.395.888 0 1.758.14 2.578.395.467-.17.882-.3.882-.3.268.51.098.393.04.123.315.34.507.773.507 1.304 0 1.868-1.127 2.278-2.208 2.399.14.12.27.359.27.727 0 .524-.005 1.894-.01 2.146 0 .252.213.547.688.455C21.139 20.19 24 16.435 24 12.017c0-5.533-4.477-10.017-10-10.017H12z" clip-rule="evenodd" />
            </svg>
          </a>
        </div>
      </div>

    </div>

    <div class="mt-8 pt-8 border-t border-gray-800 text-center text-gray-500 text-sm dark:border-gray-700">
      <p>&copy; 2023 YourApp, Inc. All rights reserved.</p>
    </div>
  </div>
</footer>

User Profiles Component

A responsive user profile component with a 3D design aesthetic and earth-tone color scheme, suitable for travel and tourism websites. Includes dark mode support.

Open Preview

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

  <div class="max-w-4xl w-full mx-auto grid md:grid-cols-2 gap-6 lg:gap-8">

    <!-- User Profile Card 1 -->
    <div class="relative bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-750 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 perspective-1000 group p-6 sm:p-8 overflow-hidden">
      <!-- Overlay for 3D effect -->
      <div class="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" style="transform: translateZ(10px); perspective: 1000px;"></div>

      <div class="relative z-10 flex flex-col items-center text-center">
        <div class="w-32 h-32 md:w-36 md:h-36 rounded-full overflow-hidden border-4 border-stone-400 dark:border-stone-600 shadow-lg mb-4 group-hover:scale-105 transition-transform duration-300">
          <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Isabella Rossi" class="w-full h-full object-cover">
        </div>
        <h2 class="text-2xl sm:text-3xl font-extrabold text-stone-800 dark:text-stone-100 mt-2 mb-2 group-hover:text-amber-700 dark:group-hover:text-amber-500 transition-colors duration-300">Isabella Rossi</h2>
        <p class="text-md sm:text-lg text-stone-600 dark:text-stone-300 font-medium mb-4 italic">"The world is a book, and those who do not travel read only one page."</p>

        <div class="w-full grid grid-cols-2 gap-4 text-stone-700 dark:text-stone-300 mb-6">
          <div class="flex flex-col items-center">
            <span class="text-xl font-bold text-amber-700 dark:text-amber-500">12</span>
            <span class="text-sm">Trips Taken</span>
          </div>
          <div class="flex flex-col items-center">
            <span class="text-xl font-bold text-amber-700 dark:text-amber-500">23</span>
            <span class="text-sm">Reviews</span>
          </div>
        </div>

        <p class="text-sm text-stone-600 dark:text-stone-400 mb-6 max-w-sm">
          Passionate globetrotter with a love for sustainable travel and exploring hidden gems. Specializes in cultural immersions.
        </p>

        <div class="flex flex-wrap justify-center gap-3">
          <a href="#" class="inline-flex items-center px-5 py-2.5 rounded-full bg-amber-700 hover:bg-amber-800 dark:bg-amber-500 dark:hover:bg-amber-600 text-white text-sm font-semibold transition-colors duration-300 shadow-md group-hover:shadow-lg dark:shadow-stone-950/50">
            <svg class="w-4 h-4 mr-2 -ml-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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
            Send Message
          </a>
          <a href="#" class="inline-flex items-center px-5 py-2.5 rounded-full border border-amber-700 dark:border-amber-500 text-amber-700 dark:text-amber-500 dark:hover:text-white hover:bg-amber-700 dark:hover:bg-amber-500 text-sm font-semibold transition-colors duration-300 shadow-md group-hover:shadow-lg dark:shadow-stone-950/50">
            <svg class="w-4 h-4 mr-2 -ml-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="M17.657 16.727A8 8 0 016.343 7.273L17.657 16.727zm0 0A8 8 0 0118.91 10.37M6.343 7.273v10.184h10.184"></path></svg>
            View Profile
          </a>
        </div>
      </div>
    </div>

    <!-- User Profile Card 2 -->
    <div class="relative bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-750 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 perspective-1000 group p-6 sm:p-8 overflow-hidden">
      <!-- Overlay for 3D effect -->
      <div class="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" style="transform: translateZ(10px); perspective: 1000px;"></div>

      <div class="relative z-10 flex flex-col items-center text-center">
        <div class="w-32 h-32 md:w-36 md:h-36 rounded-full overflow-hidden border-4 border-stone-400 dark:border-stone-600 shadow-lg mb-4 group-hover:scale-105 transition-transform duration-300">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Ethan Miller" class="w-full h-full object-cover">
        </div>
        <h2 class="text-2xl sm:text-3xl font-extrabold text-stone-800 dark:text-stone-100 mt-2 mb-2 group-hover:text-amber-700 dark:group-hover:text-amber-500 transition-colors duration-300">Ethan Miller</h2>
        <p class="text-md sm:text-lg text-stone-600 dark:text-stone-300 font-medium mb-4 italic">"Blessed are the curious for they shall have adventures."</p>

        <div class="w-full grid grid-cols-2 gap-4 text-stone-700 dark:text-stone-300 mb-6">
          <div class="flex flex-col items-center">
            <span class="text-xl font-bold text-amber-700 dark:text-amber-500">9</span>
            <span class="text-sm">Trips Taken</span>
          </div>
          <div class="flex flex-col items-center">
            <span class="text-xl font-bold text-amber-700 dark:text-amber-500">18</span>
            <span class="text-sm">Reviews</span>
          </div>
        </div>

        <p class="text-sm text-stone-600 dark:text-stone-400 mb-6 max-w-sm">
          Adventure seeker and nature enthusiast always looking for the next hiking trail or mountain to conquer. Enjoys wilderness expeditions.
        </p>

        <div class="flex flex-wrap justify-center gap-3">
          <a href="#" class="inline-flex items-center px-5 py-2.5 rounded-full bg-amber-700 hover:bg-amber-800 dark:bg-amber-500 dark:hover:bg-amber-600 text-white text-sm font-semibold transition-colors duration-300 shadow-md group-hover:shadow-lg dark:shadow-stone-950/50">
            <svg class="w-4 h-4 mr-2 -ml-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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
            Send Message
          </a>
          <a href="#" class="inline-flex items-center px-5 py-2.5 rounded-full border border-amber-700 dark:border-amber-500 text-amber-700 dark:text-amber-500 dark:hover:text-white hover:bg-amber-700 dark:hover:bg-amber-500 text-sm font-semibold transition-colors duration-300 shadow-md group-hover:shadow-lg dark:shadow-stone-950/50">
            <svg class="w-4 h-4 mr-2 -ml-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="M17.657 16.727A8 8 0 016.343 7.273L17.657 16.727zm0 0A8 8 0 0118.91 10.37M6.343 7.273v10.184h10.184"></path></svg>
            View Profile
          </a>
        </div>
      </div>
    </div>

  </div>
</div>

Retro_Reaction_Buttons_Industrial

Simple, responsive like/reaction buttons component with a retro industrial aesthetic, suitable for manufacturing or industrial company websites.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 font-mono select-none">
  <div class="bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl p-6 border-4 border-gray-400 dark:border-gray-700 w-full max-w-sm">
    <h3 class="text-center text-xl font-bold mb-6 text-gray-800 dark:text-gray-200 uppercase tracking-wider">Process Feedback</h3>
    <div class="flex justify-around space-x-4 mb-6">
      <!-- Like Button -->
      <button class="flex flex-col items-center p-3 rounded-md transition-transform duration-200 ease-in-out transform hover:scale-105 active:scale-95
                     bg-blue-600 dark:bg-blue-700 text-white font-semibold shadow-lg
                     border-b-4 border-r-4 border-blue-800 dark:border-blue-900
                     hover:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600">
        <svg class="w-8 h-8 md:w-10 md:h-10" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.5a2.5 2.5 0 002.5 2.5h2.464l-.929 3.488a1 1 0 001.942.518L13 16.582V13a2.5 2.5 0 002.5-2.5V6.5a2.5 2.5 0 00-2.5-2.5h-1.586a1.5 1.5 0 01-1.06-.44L10 2.5v-.5A1.5 1.5 0 008.5 1h-1A1.5 1.5 0 006 2.5v1.272a1.5 1.5 0 01-.447 1.06L4.354 7.646A1.5 1.5 0 003.293 8.707L2.5 9.5a1.5 1.5 0 00-.5 1.06v0z"></path>
        </svg>
        <span class="mt-2 text-sm md:text-base">Success</span>
      </button>

      <!-- Dislike Button -->
      <button class="flex flex-col items-center p-3 rounded-md transition-transform duration-200 ease-in-out transform hover:scale-105 active:scale-95
                     bg-red-600 dark:bg-red-700 text-white font-semibold shadow-lg
                     border-b-4 border-r-4 border-red-800 dark:border-red-900
                     hover:bg-red-700 dark:hover:bg-red-800 focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-600">
        <svg class="w-8 h-8 md:w-10 md:h-10" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M18 9.5a1.5 1.5 0 11-3 0v-6a1.5 1.5 0 013 0v6zM14 9.667v-5.5a2.5 2.5 0 00-2.5-2.5H9.036l.929-3.488A1 1 0 008.023.002L7 3.418V7a2.5 2.5 0 00-2.5 2.5v4a2.5 2.5 0 002.5 2.5h1.586a1.5 1.5 0 011.06.44L10 17.5v.5A1.5 1.5 0 0011.5 19h1a1.5 1.5 0 001.5-1.5v-1.272a1.5 1.5 0 01.447-1.06L15.646 12.354A1.5 1.5 0 0016.707 11.293L17.5 10.5a1.5 1.5 0 00.5-1.06v0z"></path>
        </svg>
        <span class="mt-2 text-sm md:text-base">Failure</span>
      </button>
    </div>
    <p class="text-center text-sm text-gray-700 dark:text-gray-400 mt-4 leading-relaxed">Provide quick feedback on operational processes.</p>
  </div>
</div>

Follow Button Component

A simple, responsive follow button component designed for dating/social platforms with a pastel color scheme and dark mode support.

Open Preview

                <div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-screen">
  <button class="follow-button flex items-center justify-center px-6 py-3 rounded-full text-lg font-semibold transition-all duration-300 ease-in-out
    bg-gradient-to-r from-purple-200 to-pink-200 text-purple-800 dark:from-purple-800 dark:to-pink-800 dark:text-white
    hover:from-purple-300 hover:to-pink-300 hover:text-purple-900 dark:hover:from-purple-700 dark:hover:to-pink-700 dark:hover:text-white
    focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700
    shadow-lg hover:shadow-xl">
    <svg class="h-5 w-5 mr-2 -ml-1 text-purple-700 dark:text-purple-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM8 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0z"></path>
    </svg>
    Follow
  </button>
</div>

1 ... 87 88 89 90 91 ... 335