Search Components

All Components

Browse all available Tailwind CSS components

Social_Components_Documentation_Wiki

A complex, responsive social component for documentation/wiki sites, featuring autumn color gradients and smooth transitions with dark mode support.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-amber-100 via-orange-200 to-red-200 dark:from-stone-900 dark:via-red-950 dark:to-orange-950 p-4 sm:p-6 lg:p-8 font-sans transition-colors duration-500">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">

    <!-- Left Sidebar: Profile/Navigation -->
    <aside class="md:col-span-1">
      <div class="bg-white dark:bg-stone-800 rounded-3xl shadow-xl p-6 mb-6 transform transition duration-300 hover:scale-[1.01] hover:shadow-2xl">
        <div class="flex items-center space-x-4 mb-6">
          <img class="w-20 h-20 rounded-full object-cover ring-4 ring-amber-400 dark:ring-red-600 shadow-lg" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
          <div>
            <h2 class="text-2xl font-bold text-stone-800 dark:text-stone-100">John Doe</h2>
            <p class="text-sm text-stone-600 dark:text-stone-300">Documentation Manager</p>
          </div>
        </div>
        <nav class="space-y-3">
          <a href="#" class="flex items-center p-3 rounded-lg text-lg font-medium text-stone-700 dark:text-stone-200 bg-amber-100 dark:bg-red-800 transition-all duration-300 hover:bg-amber-200 dark:hover:bg-red-700 hover:text-orange-800 dark:hover:text-amber-100 group">
            <svg class="w-6 h-6 mr-3 text-amber-600 dark:text-amber-400 group-hover:text-orange-700 dark:group-hover:text-amber-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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-3 3h4m-re-6 0c0 4.418 7.84 8 13 8s13-3.582 13-8"></path></svg>
            My Wiki
          </a>
          <a href="#" class="flex items-center p-3 rounded-lg text-lg font-medium text-stone-700 dark:text-stone-200 transition-all duration-300 hover:bg-amber-100 dark:hover:bg-red-800 hover:text-orange-800 dark:hover:text-amber-100 group">
            <svg class="w-6 h-6 mr-3 text-stone-500 dark:text-stone-400 group-hover:text-orange-700 dark:group-hover:text-amber-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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>
            Recent Activity
          </a>
          <a href="#" class="flex items-center p-3 rounded-lg text-lg font-medium text-stone-700 dark:text-stone-200 transition-all duration-300 hover:bg-amber-100 dark:hover:bg-red-800 hover:text-orange-800 dark:hover:text-amber-100 group">
            <svg class="w-6 h-6 mr-3 text-stone-500 dark:text-stone-400 group-hover:text-orange-700 dark:group-hover:text-amber-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h2a2 2 0 002-2V8a2 2 0 00-2-2h-2M13 18v2a2 2 0 002 2h2a2 2 0 002-2v-2M9 18H5a2 2 0 01-2-2V8a2 2 0 012-2h2M11 5H9a2 2 0 00-2 2v2M12 12v.01"></path></svg>
            Settings
          </a>
        </nav>
      </div>

      <!-- Recommended Articles -->
      <div class="bg-white dark:bg-stone-800 rounded-3xl shadow-xl p-6 transform transition duration-300 hover:scale-[1.01] hover:shadow-2xl">
        <h3 class="text-xl font-bold text-stone-800 dark:text-stone-100 mb-4">Trending Articles</h3>
        <ul class="space-y-4">
          <li class="flex items-start">
            <span class="text-orange-500 dark:text-amber-400 font-bold text-lg mr-3">1.</span>
            <div>
              <a href="#" class="text-stone-700 dark:text-stone-200 font-medium text-base hover:text-orange-600 dark:hover:text-amber-300 transition-colors duration-200 leading-tight">Understanding API Integrations v3.0</a>
              <p class="text-sm text-stone-500 dark:text-stone-400">5 min read</p>
            </div>
          </li>
          <li class="flex items-start">
            <span class="text-orange-500 dark:text-amber-400 font-bold text-lg mr-3">2.</span>
            <div>
              <a href="#" class="text-stone-700 dark:text-stone-200 font-medium text-base hover:text-orange-600 dark:hover:text-amber-300 transition-colors duration-200 leading-tight">Getting Started with Microservices</a>
              <p class="text-sm text-stone-500 dark:text-stone-400">12 min read</p>
            </div>
          </li>
          <li class="flex items-start">
            <span class="text-orange-500 dark:text-amber-400 font-bold text-lg mr-3">3.</span>
            <div>
              <a href="#" class="text-stone-700 dark:text-stone-200 font-medium text-base hover:text-orange-600 dark:hover:text-amber-300 transition-colors duration-200 leading-tight">Best Practices for Secure Coding</a>
              <p class="text-sm text-stone-500 dark:text-stone-400">8 min read</p>
            </div>
          </li>
        </ul>
      </div>
    </aside>

    <!-- Main Content Area: Feed/Articles -->
    <main class="md:col-span-2">
      <!-- Search Bar -->
      <div class="mb-6">
        <label for="search" class="sr-only">Search wiki...</label>
        <div class="relative">
          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
          </div>
          <input type="search" id="search" class="block w-full pl-10 pr-3 py-3 rounded-full border border-transparent bg-white dark:bg-stone-800 text-stone-900 dark:text-stone-100 placeholder-stone-500 dark:placeholder-stone-400 shadow-lg focus:outline-none focus:ring-2 focus:ring-orange-500 dark:focus:ring-amber-600 focus:border-transparent transition-all duration-300" placeholder="Search documentation...">
        </div>
      </div>

      <!-- Feed/Article Cards -->
      <section class="space-y-6">

        <!-- Article Card 1 -->
        <article class="bg-white dark:bg-stone-800 rounded-3xl shadow-xl p-6 transform transition duration-300 hover:scale-[1.01] hover:shadow-2xl overflow-hidden relative group">
          <span class="absolute top-0 right-0 bg-orange-500 dark:bg-red-700 text-white text-xs px-3 py-1 rounded-bl-lg font-bold uppercase z-10">New</span>
          <div class="flex items-start space-x-4 mb-4">
            <img class="w-14 h-14 rounded-full object-cover shadow-md ring-2 ring-orange-200" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar">
            <div>
              <h3 class="text-xl font-bold text-stone-800 dark:text-stone-100">How to contribute to our Wiki</h3>
              <p class="text-sm text-stone-600 dark:text-stone-300">By <a href="#" class="font-medium text-orange-600 dark:text-amber-400 hover:underline">Jane Smith</a> · October 26, 2023</p>
            </div>
          </div>
          <figure class="mb-4 rounded-xl overflow-hidden shadow-lg border border-gray-100 dark:border-stone-700">
            <img class="w-full h-48 object-cover transform scale-105 group-hover:scale-100 transition duration-500 ease-in-out" src="https://picsum.photos/800/400?random=1" alt="Article Image">
          </figure>
          <p class="text-stone-700 dark:text-stone-200 mb-4 leading-relaxed line-clamp-3">Learn the step-by-step process of adding, editing, and managing content effectively within our knowledge base. This guide covers everything from basic formatting to advanced topic structuring... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <div class="flex justify-between items-center">
            <a href="#" class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-orange-400 to-red-500 dark:from-red-700 dark:to-orange-800 text-white font-semibold rounded-full shadow-md hover:shadow-lg transform hover:scale-105 transition-all duration-300">
              Read More
              <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
            </a>
            <div class="flex space-x-4">
              <button class="flex items-center text-stone-600 dark:text-stone-300 hover:text-orange-600 dark:hover:text-amber-400 transition-colors duration-200">
                <svg class="w-5 h-5 mr-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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
                <span>45</span>
              </button>
              <button class="flex items-center text-stone-600 dark:text-stone-300 hover:text-orange-600 dark:hover:text-amber-400 transition-colors duration-200">
                <svg class="w-5 h-5 mr-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="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path></svg>
                <span>12</span>
              </button>
            </div>
          </div>
        </article>

        <!-- Article Card 2 -->
        <article class="bg-white dark:bg-stone-800 rounded-3xl shadow-xl p-6 transform transition duration-300 hover:scale-[1.01] hover:shadow-2xl overflow-hidden relative group">
          <div class="flex items-start space-x-4 mb-4">
            <img class="w-14 h-14 rounded-full object-cover shadow-md ring-2 ring-orange-200" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Author Avatar">
            <div>
              <h3 class="text-xl font-bold text-stone-800 dark:text-stone-100">Understanding Database Normalization</h3>
              <p class="text-sm text-stone-600 dark:text-stone-300">By <a href="#" class="font-medium text-orange-600 dark:text-amber-400 hover:underline">Michael Brown</a> · October 20, 2023</p>
            </div>
          </div>
          <figure class="mb-4 rounded-xl overflow-hidden shadow-lg border border-gray-100 dark:border-stone-700">
            <img class="w-full h-48 object-cover transform scale-105 group-hover:scale-100 transition duration-500 ease-in-out" src="https://picsum.photos/800/400?random=2" alt="Article Image">
          </figure>
          <p class="text-stone-700 dark:text-stone-200 mb-4 leading-relaxed line-clamp-3">Delve into the principles of database normalization (1NF, 2NF, 3NF, BCNF) and learn how to design efficient, consistent, and reliable database schemas. This article provides practical examples and best practices... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <div class="flex justify-between items-center">
            <a href="#" class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-orange-400 to-red-500 dark:from-red-700 dark:to-orange-800 text-white font-semibold rounded-full shadow-md hover:shadow-lg transform hover:scale-105 transition-all duration-300">
              Read More
              <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
            </a>
            <div class="flex space-x-4">
              <button class="flex items-center text-stone-600 dark:text-stone-300 hover:text-orange-600 dark:hover:text-amber-400 transition-colors duration-200">
                <svg class="w-5 h-5 mr-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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
                <span>68</span>
              </button>
              <button class="flex items-center text-stone-600 dark:text-stone-300 hover:text-orange-600 dark:hover:text-amber-400 transition-colors duration-200">
                <svg class="w-5 h-5 mr-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="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path></svg>
                <span>25</span>
              </button>
            </div>
          </div>
        </article>

        <!-- Article Card 3 -->
        <article class="bg-white dark:bg-stone-800 rounded-3xl shadow-xl p-6 transform transition duration-300 hover:scale-[1.01] hover:shadow-2xl overflow-hidden relative group">
          <div class="flex items-start space-x-4 mb-4">
            <img class="w-14 h-14 rounded-full object-cover shadow-md ring-2 ring-orange-200" src="https://randomuser.me/api/portraits/women/67.jpg" alt="Author Avatar">
            <div>
              <h3 class="text-xl font-bold text-stone-800 dark:text-stone-100">Implementing CI/CD Pipelines with Jenkins</h3>
              <p class="text-sm text-stone-600 dark:text-stone-300">By <a href="#" class="font-medium text-orange-600 dark:text-amber-400 hover:underline">Sarah Johnson</a> · October 15, 2023</p>
            </div>
          </div>
          <figure class="mb-4 rounded-xl overflow-hidden shadow-lg border border-gray-100 dark:border-stone-700">
            <img class="w-full h-48 object-cover transform scale-105 group-hover:scale-100 transition duration-500 ease-in-out" src="https://picsum.photos/800/400?random=3" alt="Article Image">
          </figure>
          <p class="text-stone-700 dark:text-stone-200 mb-4 leading-relaxed line-clamp-3">Explore the essentials of Continuous Integration and Continuous Deployment using Jenkins. This comprehensive guide covers setup, pipeline creation, and advanced configurations for automated software delivery... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <div class="flex justify-between items-center">
            <a href="#" class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-orange-400 to-red-500 dark:from-red-700 dark:to-orange-800 text-white font-semibold rounded-full shadow-md hover:shadow-lg transform hover:scale-105 transition-all duration-300">
              Read More
              <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
            </a>
            <div class="flex space-x-4">
              <button class="flex items-center text-stone-600 dark:text-stone-300 hover:text-orange-600 dark:hover:text-amber-400 transition-colors duration-200">
                <svg class="w-5 h-5 mr-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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
                <span>51</span>
              </button>
              <button class="flex items-center text-stone-600 dark:text-stone-300 hover:text-orange-600 dark:hover:text-amber-400 transition-colors duration-200">
                <svg class="w-5 h-5 mr-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="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path></svg>
                <span>18</span>
              </button>
            </div>
          </div>
        </article>

      </section>
    </main>

  </div>
</div>

Buttons Component

A set of interactive buttons for a CRM/Business Tools application, featuring microinteractions, jewel tone colors, and full responsiveness with dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-indigo-50 to-purple-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-4xl bg-white dark:bg-gray-800 shadow-2xl rounded-xl p-6 sm:p-8 space-y-8 border border-purple-200 dark:border-purple-900">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-center text-purple-800 dark:text-purple-400 mb-8">
      CRM Action Buttons
    </h2>

    <!-- Primary Action Buttons -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      <button class="relative group flex items-center justify-center px-6 py-3 rounded-lg overflow-hidden
                     bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800
                     text-white text-lg font-semibold shadow-lg
                     transition-all duration-300 ease-out transform hover:-translate-y-1 hover:scale-102
                     dark:bg-emerald-700 dark:hover:bg-emerald-800 dark:active:bg-emerald-900">
        <span class="absolute inset-0 bg-emerald-500 opacity-0 group-hover:opacity-20 group-active:opacity-40 transition-opacity duration-300"></span>
        <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
        <span>New Contact</span>
      </button>

      <button class="relative group flex items-center justify-center px-6 py-3 rounded-lg overflow-hidden
                     bg-sapphire-600 hover:bg-sapphire-700 active:bg-sapphire-800
                     text-white text-lg font-semibold shadow-lg
                     transition-all duration-300 ease-out transform hover:-translate-y-1 hover:scale-102
                     dark:bg-sapphire-700 dark:hover:bg-sapphire-800 dark:active:bg-sapphire-900">
        <span class="absolute inset-0 bg-sapphire-500 opacity-0 group-hover:opacity-20 group-active:opacity-40 transition-opacity duration-300"></span>
        <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
        <span>View Pipeline</span>
      </button>

      <button class="relative group flex items-center justify-center px-6 py-3 rounded-lg overflow-hidden
                     bg-ruby-600 hover:bg-ruby-700 active:bg-ruby-800
                     text-white text-lg font-semibold shadow-lg
                     transition-all duration-300 ease-out transform hover:-translate-y-1 hover:scale-102
                     dark:bg-ruby-700 dark:hover:bg-ruby-800 dark:active:bg-ruby-900">
        <span class="absolute inset-0 bg-ruby-500 opacity-0 group-hover:opacity-20 group-active:opacity-40 transition-opacity duration-300"></span>
        <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
        <span>Schedule Demo</span>
      </button>
    </div>

    <!-- Secondary Action Buttons -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 pt-4">
      <button class="relative group flex items-center justify-center px-6 py-3 rounded-lg overflow-hidden
                     bg-indigo-500 hover:bg-indigo-600 active:bg-indigo-700
                     text-white text-lg font-semibold shadow-md
                     transition-all duration-300 ease-out transform hover:-translate-y-1
                     dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:active:bg-indigo-800">
        <span class="absolute inset-0 bg-indigo-400 opacity-0 group-hover:opacity-20 group-active:opacity-40 transition-opacity duration-300"></span>
        <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
        <span>Send Email</span>
      </button>

      <button class="relative group flex items-center justify-center px-6 py-3 rounded-lg overflow-hidden
                     bg-purple-500 hover:bg-purple-600 active:bg-purple-700
                     text-white text-lg font-semibold shadow-md
                     transition-all duration-300 ease-out transform hover:-translate-y-1
                     dark:bg-purple-600 dark:hover:bg-purple-700 dark:active:bg-purple-800">
        <span class="absolute inset-0 bg-purple-400 opacity-0 group-hover:opacity-20 group-active:opacity-40 transition-opacity duration-300"></span>
        <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684L10.5 9l2.59 1.34L15.38 5.76a1 1 0 011.02-.303L21 4V3a1 1 0 00-1-1H4a1 1 0 00-1 1v2zm0 14a2 2 0 002 2h14a2 2 0 002-2v-3l-2.03-2.03a1 1 0 00-.98-.21L15 14l-2.5-1.5-2.59 1.34L9 17l-1.34 2.68L5 20a1 1 0 01-1-1v-2l-1 .5V19z"></path></svg>
        <span>Log Activity</span>
      </button>

      <button class="relative group flex items-center justify-center px-6 py-3 rounded-lg overflow-hidden
                     bg-teal-500 hover:bg-teal-600 active:bg-teal-700
                     text-white text-lg font-semibold shadow-md
                     transition-all duration-300 ease-out transform hover:-translate-y-1
                     dark:bg-teal-600 dark:hover:bg-teal-700 dark:active:bg-teal-800">
        <span class="absolute inset-0 bg-teal-400 opacity-0 group-hover:opacity-20 group-active:opacity-40 transition-opacity duration-300"></span>
        <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
        <span>Add Note</span>
      </button>
    </div>

    <!-- Utility Buttons with subtle hover effects -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 pt-6">
      <button class="relative group flex items-center justify-center px-4 py-2 rounded-lg overflow-hidden
                     bg-gray-100 hover:bg-gray-200 active:bg-gray-300
                     text-gray-700 text-base font-medium shadow-sm
                     transition-all duration-200 ease-in-out transform hover:scale-105
                     dark:bg-gray-700 dark:hover:bg-gray-600 dark:active:bg-gray-500 dark:text-gray-200">
        <span class="absolute inset-0 bg-gray-500 opacity-0 group-hover:opacity-10 transition-opacity duration-200"></span>
        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 21h7a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0014.586 3H7a2 2 0 00-2 2v11m0 0l-1 1h4m-4-4v4

A responsive timeline component with a candy/sweet color scheme, gradient transitions, and dark mode support, suitable for showcasing work or products in a portfolio. Features multiple timeline events.

Open Preview

                <div class="font-sans antialiased text-gray-800 bg-gradient-to-br from-pink-100 via-purple-100 to-indigo-100 dark:from-gray-900 dark:via-purple-950 dark:to-pink-950 py-12 sm:py-16 lg:py-20">
  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center mb-16
               bg-clip-text text-transparent bg-gradient-to-r from-pink-500 via-purple-600 to-indigo-600
               dark:from-pink-400 dark:via-purple-500 dark:to-indigo-400">
      Our Journey
    </h2>

    <div class="relative before:absolute before:inset-0 before:top-2 before:bottom-2 before:w-1 before:bg-gradient-to-b before:from-pink-400 before:via-purple-500 before:to-indigo-500 before:left-1/2 before:-translate-x-1/2 before:rounded-full dark:before:from-pink-600 dark:before:via-purple-700 dark:before:to-indigo-700">

      <!-- Timeline Item 1 -->
      <div class="timeline-item flex items-center w-full my-8 md:my-12">
        <div class="order-1 w-full md:w-1/2 flex justify-end md:pr-12">
          <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 w-full max-w-lg
                      border border-transparent hover:border-pink-300 dark:hover:border-purple-600
                      transform transition-all duration-300 hover:scale-105
                      bg-gradient-to-br from-pink-50 via-purple-50 to-indigo-50 dark:from-gray-700 dark:via-purple-900 dark:to-indigo-900
                      text-gray-800 dark:text-gray-200">
            <h3 class="font-bold text-2xl sm:text-3xl mb-4 bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-purple-600 dark:from-pink-400 dark:to-purple-500">Project Alpha Launch</h3>
            <p class="mb-4 text-md sm:text-lg">Successfully launched our flagship product, revolutionizing the industry with its innovative features and user-centric design.</p>
            <img src="https://picsum.photos/600/400?random=1" alt="Project Alpha screenshots" class="rounded-lg shadow-md mb-4 w-full h-auto object-cover">
            <span class="text-sm text-pink-600 dark:text-pink-400 font-semibold">October 2023</span>
          </div>
        </div>
        <div class="z-10 flex items-center order-1 w-10 h-10 rounded-full shadow-xl absolute left-1/2 -translate-x-1/2
                    bg-gradient-to-br from-pink-400 to-purple-500 dark:from-pink-600 dark:to-purple-700
                    border-4 border-white dark:border-gray-900">
          <svg class="mx-auto text-white dark:text-gray-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
        </div>
      </div>

      <!-- Timeline Item 2 -->
      <div class="timeline-item flex items-center w-full my-8 md:my-12 flex-row-reverse">
        <div class="order-1 w-full md:w-1/2 flex justify-start md:pl-12">
          <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 w-full max-w-lg
                      border border-transparent hover:border-purple-300 dark:hover:border-indigo-600
                      transform transition-all duration-300 hover:scale-105
                      bg-gradient-to-br from-purple-50 via-indigo-50 to-pink-50 dark:from-gray-700 dark:via-indigo-900 dark:to-purple-900
                      text-gray-800 dark:text-gray-200">
            <h3 class="font-bold text-2xl sm:text-3xl mb-4 bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-indigo-600 dark:from-purple-500 dark:to-indigo-400">Partnership Expansion</h3>
            <p class="mb-4 text-md sm:text-lg">Forged strategic alliances with key industry leaders, expanding our reach and service capabilities globally.</p>
            <img src="https://picsum.photos/600/400?random=2" alt="Partnership handshake" class="rounded-lg shadow-md mb-4 w-full h-auto object-cover">
            <span class="text-sm text-purple-600 dark:text-purple-400 font-semibold">December 2023</span>
          </div>
        </div>
        <div class="z-10 flex items-center order-1 w-10 h-10 rounded-full shadow-xl absolute left-1/2 -translate-x-1/2
                    bg-gradient-to-br from-purple-500 to-indigo-500 dark:from-purple-700 dark:to-indigo-700
                    border-4 border-white dark:border-gray-900">
          <svg class="mx-auto text-white dark:text-gray-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8 9a1 1 0 100-2 1 1 0 000 2zM5 8a2 2 0 100 4h10a2 2 0 100-4H5z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
      </div>

      <!-- Timeline Item 3 -->
      <div class="timeline-item flex items-center w-full my-8 md:my-12">
        <div class="order-1 w-full md:w-1/2 flex justify-end md:pr-12">
          <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 w-full max-w-lg
                      border border-transparent hover:border-indigo-300 dark:hover:border-pink-600
                      transform transition-all duration-300 hover:scale-105
                      bg-gradient-to-br from-indigo-50 via-pink-50 to-purple-50 dark:from-gray-700 dark:via-pink-900 dark:to-indigo-900
                      text-gray-800 dark:text-gray-200">
            <h3 class="font-bold text-2xl sm:text-3xl mb-4 bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-pink-600 dark:from-indigo-400 dark:to-pink-500">Community Growth</h3>
            <p class="mb-4 text-md sm:text-lg">Our user community grew by 500%, fostering a vibrant ecosystem of engagement and feedback.</p>
            <img src="https://picsum.photos/600/400?random=3" alt="Group of people smiling" class="rounded-lg shadow-md mb-4 w-full h-auto object-cover">
            <span class="text-sm text-indigo-600 dark:text-indigo-400 font-semibold">February 2024</span>
          </div>
        </div>
        <div class="z-10 flex items-center order-1 w-10 h-10 rounded-full shadow-xl absolute left-1/2 -translate-x-1/2
                    bg-gradient-to-br from-indigo-500 to-pink-500 dark:from-indigo-700 dark:to-pink-700
                    border-4 border-white dark:border-gray-900">
          <svg class="mx-auto text-white dark:text-gray-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zm-6 9A.75.75 0 015.25 15h-.5a.75.75 0 01-.75-.75v-1.5a.75.75 0 01.75-.75h4.5a.75.75 0 01.75.75v1.5a.75.75 0 01-.75.75H13zm5.75-2.75a.75.75 0 00-.75-.75h-10.5c-.414 0-.75.336-.75.75v3.5A.75.75 0 005 17h10a.75.75 0 00.75-.75v-3.5z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
      </div>

      <!-- Timeline Item 4 -->
      <div class="timeline-item flex items-center w-full my-8 md:my-12 flex-row-reverse">
        <div class="order-1 w-full md:w-1/2 flex justify-start md:pl-12">
          <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 w-full max-w-lg
                      border border-transparent hover:border-pink-300 dark:hover:border-purple-600
                      transform transition-all duration-300 hover:scale-105
                      bg-gradient-to-br from-pink-50 via-purple-50 to-indigo-50 dark:from-gray-700 dark:via-purple-900 dark:to-indigo-900
                      text-gray-800 dark:text-gray-200">
            <h3 class="font-bold text-2xl sm:text-3xl mb-4 bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-purple-600 dark:from-pink-400 dark:to-purple-500">Future Endeavors</h3>
            <p class="mb-4 text-md sm:text-lg">Exploring new technologies and markets to bring even more value to our users and stakeholders.</p>
            <img src="https://picsum.photos/600/400?random=4" alt="Future looking abstract image" class="rounded-lg shadow-md mb-4 w-full h-auto object-cover">
            <span class="text-sm text-pink-600 dark:text-pink-400 font-semibold">Present & Beyond</span>
          </div>
        </div>
        <div class="z-10 flex items-center order-1 w-10 h-10 rounded-full shadow-xl absolute left-1/2 -translate-x-1/2
                    bg-gradient-to-br from-pink-400 to-purple-500 dark:from-pink-600 dark:to-purple-700
                    border-4 border-white dark:border-gray-900">
          <svg class="mx-auto text-white dark:text-gray-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.75 3c-.966 0-1.895.143-2.75.405V6a.75.75 0 001.5 0V4.604c.59-.224 1.23-.365 1.9-.365 2.87 0 5.1-.88 5.1-2h-.057c-.126-1.58-1.543-2.83-3.268-2.909a.75.75 0 00-.734.708l.334 3.344a.75.75 0 001.492-.149l-.21-2.09c.654.148 1.15.54 1.488 1.05v.23a.75.75 0 001.5 0v-1c0-.496-.345-.92-.81-1.096A6.25 6.25 0 0010.75 3v13c.966 0 1.895-.143 2.75-.405V14a.75.75 0 00-1.5 0v1.396c-.59.224-1.23.365-1.9.365-2.87 0-5.1.88-5.1 2h.057c.126 1.58 1.543 2.83 3.268 2.909a.75.75 0 00.734-.708l-.334-3.344a.75.75 0 00-1.492.149l.21 2.09c-.654-.148-1.15-.54-1.488-1.05v-.23a.75.75 0 00-1.5 0v1c0 .496.345.92.81 1.096A6.25 6.25 0 0010.75 17z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
        </div>
      </div>

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

Memphis Pastel Success Message

A simple, responsive success message component with a Memphis design aesthetic using pastel colors. Features playful geometric shapes and supports dark mode.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 lg:p-10 flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-blue-100 dark:from-purple-800 dark:via-pink-800 dark:to-blue-800">
  <div class="relative w-full max-w-lg bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden p-6 sm:p-8 md:p-10 lg:p-12 border-4 border-dashed border-purple-300 dark:border-purple-600 animate-slide-in-up">
    
    <!-- Memphis Design Elements -->
    <div class="absolute -top-8 -left-8 w-24 h-24 bg-pink-300 dark:bg-pink-600 rounded-full opacity-70"></div>
    <div class="absolute top-1/4 -right-10 w-20 h-20 bg-blue-300 dark:bg-blue-600 transform rotate-45 opacity-70"></div>
    <div class="absolute -bottom-6 -right-6 w-16 h-16 bg-yellow-200 dark:bg-yellow-500 rounded-lg opacity-70"></div>
    <div class="absolute bottom-1/2 -left-4 w-12 h-12 bg-green-200 dark:bg-green-500 rounded-full opacity-70"></div>

    <div class="relative z-10 flex flex-col items-center text-center">
      <div class="mb-4 sm:mb-6">
        <svg class="w-16 h-16 sm:w-20 sm:h-20 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
        </svg>
      </div>
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-purple-600 dark:text-purple-300 mb-3 sm:mb-4 leading-tight">
        Success!
      </h2>
      <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-6 sm:mb-8 max-w-md">
        Your action was completed successfully. Enjoy the fresh content!
      </p>
      <button type="button" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-bold rounded-full shadow-lg text-white bg-pink-500 hover:bg-pink-600 focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-pink-300 dark:focus:ring-pink-700 transition ease-in-out duration-300 transform hover:scale-105 active:scale-95">
        <span class="mr-2">Explore More</span>
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          <path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
        </svg>
      </button>
    </div>
  </div>
</div>


<style>
  @keyframes slide-in-up {
    0% {
      transform: translateY(20px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .animate-slide-in-up {
    animation: slide-in-up 0.7s ease-out forwards;
  }
</style>

Session Timeout Alert Component - Art Deco Candy Theme

A simple, responsive session timeout alert component with an Art Deco inspired design, using bright candy colors. Optimized for documentation/wiki sites, with dark mode support.

Open Preview

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-75 dark:bg-black dark:bg-opacity-85">
  <div class="relative w-full max-w-sm p-6 overflow-hidden text-center transition-all duration-300 ease-in-out transform rounded-lg shadow-2xl bg-gradient-to-br from-pink-200 to-purple-200 dark:from-pink-800 dark:to-purple-800 md:max-w-md lg:max-w-lg">
    <div class="absolute inset-0 z-0 opacity-20 dark:opacity-10">
      <!-- Art Deco Geometric Pattern Overlay -->
      <svg class="w-full h-full" preserveAspectRatio="xMidYMid slice" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
        <pattern id="squares-deco" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
          <rect x="0" y="0" width="2" height="2" fill="currentColor"/>
          <rect x="5" y="5" width="2" height="2" fill="currentColor"/>
        </pattern>
        <rect width="100%" height="100%" fill="url(#squares-deco)" class="text-pink-400 dark:text-purple-600"/>
        <path d="M0 0 L100 0 L100 100 L0 100 Z" fill="none" stroke="currentColor" stroke-width="2" class="text-pink-500 dark:text-purple-700"/>
        <circle cx="50" cy="50" r="40" stroke="currentColor" stroke-width="1" class="text-pink-300 dark:text-purple-500"/>
        <line x1="20" y1="50" x2="80" y2="50" stroke="currentColor" stroke-width="1" class="text-pink-300 dark:text-purple-500"/>
        <line x1="50" y1="20" x2="50" y2="80" stroke="currentColor" stroke-width="1" class="text-pink-300 dark:text-purple-500"/>
      </svg>
    </div>

    <div class="relative z-10 space-y-4">
      <div class="inline-flex items-center justify-center p-3 rounded-full bg-pink-400 text-white dark:bg-pink-600 shadow-lg">
        <svg class="w-8 h-8 md:w-10 md:h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
      </div>
      <h3 class="text-xl md:text-2xl font-extrabold text-purple-800 dark:text-purple-100 font-serif tracking-wide border-b-2 border-purple-500 dark:border-purple-300 pb-2 inline-block">
        Session Expiring Soon!
      </h3>
      <p class="text-sm md:text-base text-purple-700 dark:text-purple-200 leading-relaxed">
        Your session will expire in <strong class="font-bold text-pink-600 dark:text-pink-300">02:00</strong> minutes due to inactivity. Do you want to remain logged in?
      </p>
      <div class="flex flex-col sm:flex-row justify-center gap-3 pt-2">
        <button class="flex-1 px-5 py-2 text-sm font-semibold rounded-full bg-pink-500 text-white shadow-lg transform transition-transform duration-200 hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-pink-300 dark:bg-pink-700 dark:hover:bg-pink-800 dark:focus:ring-pink-600">
          Keep Me Logged In
        </button>
        <button class="flex-1 px-5 py-2 text-sm font-semibold rounded-full text-purple-700 bg-white shadow-lg border border-purple-300 transform transition-transform duration-200 hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-purple-300 dark:bg-purple-900 dark:text-purple-200 dark:border-purple-600 dark:hover:bg-purple-800 dark:focus:ring-purple-500">
          Log Out
        </button>
      </div>
    </div>
  </div>
</div>

360_Viewer_Component

A complex 360° viewer component with glassmorphism design, grayscale color scheme, and interactive elements, suitable for educational platforms. Includes full responsiveness and dark mode support.

Open Preview

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

  <!-- Background gradient for glassmorphism effect -->
  <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-800 dark:to-gray-950 opacity-20 dark:opacity-30"></div>

  <div class="relative w-full max-w-6xl mx-auto rounded-xl shadow-2xl overflow-hidden backdrop-blur-xl bg-white/30 dark:bg-gray-800/30 border border-white/40 dark:border-gray-700/40 transform transition-all duration-300 ease-in-out sm:p-6 lg:p-8 flex flex-col lg:flex-row gap-6 lg:gap-8">

    <!-- Left Pane: 360 Viewer and Controls -->
    <div class="flex-1 flex flex-col gap-6">
      <!-- Viewer Area -->
      <div class="relative w-full aspect-video bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden shadow-inner border border-white/50 dark:border-gray-600/50 flex items-center justify-center">
        <img src="https://picsum.photos/1200/700?random=1" alt="360 Degree View" class="object-cover w-full h-full pointer-events-none select-none filter blur-sm opacity-70 absolute inset-0">
        <div class="absolute inset-0 flex items-center justify-center z-10">
          <!-- Actual 360 image Placeholder - would be replaced by JS library -->
          <img src="https://picsum.photos/1200/700?random=2" alt="Viewer content" class="w-full h-full object-contain mix-blend-multiply dark:mix-blend-screen opacity-90">
          <div class="absolute inset-0 flex items-center justify-center">
            <div class="w-16 h-16 rounded-full bg-black/30 dark:bg-white/30 backdrop-blur-sm flex items-center justify-center pointer-events-none">
              <svg class="w-8 h-8 text-white dark:text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
              </svg>
            </div>
          </div>
        </div>

        <!-- Hotspots/Interaction points placeholder -->
        <div class="absolute top-1/4 left-1/4 w-4 h-4 rounded-full bg-white/70 dark:bg-gray-900/70 backdrop-blur-sm shadow-md cursor-pointer hover:scale-125 transition-transform duration-200" title="Hotspot 1"></div>
        <div class="absolute bottom-1/3 right-1/4 w-4 h-4 rounded-full bg-white/70 dark:bg-gray-900/70 backdrop-blur-sm shadow-md cursor-pointer hover:scale-125 transition-transform duration-200" title="Hotspot 2"></div>

        <div class="absolute bottom-4 right-4 flex items-center space-x-2">
          <button class="p-2 rounded-full bg-white/60 dark:bg-gray-700/60 backdrop-blur-md shadow-md text-gray-800 dark:text-gray-100 hover:bg-white/80 dark:hover:bg-gray-700/80 transition-colors" aria-label="Zoom In">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"></path></svg>
          </button>
          <button class="p-2 rounded-full bg-white/60 dark:bg-gray-700/60 backdrop-blur-md shadow-md text-gray-800 dark:text-gray-100 hover:bg-white/80 dark:hover:bg-gray-700/80 transition-colors" aria-label="Zoom Out">
            <svg class="w-5 h-5 rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"></path></svg>
          </button>
        </div>
      </div>

      <!-- Playback Controls -->
      <div class="bg-white/40 dark:bg-gray-800/40 backdrop-blur-md p-4 rounded-lg shadow-md border border-white/50 dark:border-gray-700/50 flex flex-col sm:flex-row items-center justify-between gap-4">
        <div class="flex items-center space-x-4">
          <button class="p-3 rounded-full bg-gray-200/70 dark:bg-gray-700/70 text-gray-800 dark:text-gray-100 hover:bg-gray-300/80 dark:hover:bg-gray-600/80 transition-colors shadow-sm" aria-label="Previous"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></button>
          <button class="p-3 rounded-full bg-gray-200/70 dark:bg-gray-700/70 text-gray-800 dark:text-gray-100 hover:bg-gray-300/80 dark:hover:bg-gray-600/80 transition-colors shadow-sm" aria-label="Play"><svg class="w-6 h-6 ml-1" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></button>
          <button class="p-3 rounded-full bg-gray-200/70 dark:bg-gray-700/70 text-gray-800 dark:text-gray-100 hover:bg-gray-300/80 dark:hover:bg-gray-600/80 transition-colors shadow-sm" aria-label="Next"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z"/></svg></button>
        </div>
        <div class="flex-1 min-w-0 flex items-center space-x-4 w-full sm:w-auto">
          <span class="text-gray-700 dark:text-gray-300 text-sm">0:34</span>
          <div class="relative flex-1 h-2 rounded-full bg-gray-300 dark:bg-gray-600 overflow-hidden group">
            <div class="h-full bg-gray-600 dark:bg-gray-300 rounded-full" style="width: 45%;"></div>
            <div class="absolute -top-1 left-[45%] -ml-2 w-4 h-4 bg-gray-800 dark:bg-gray-100 rounded-full shadow-lg group-hover:scale-110 transition-transform duration-200"></div>
          </div>
          <span class="text-gray-700 dark:text-gray-300 text-sm">2:10</span>
        </div>
        <div class="flex items-center space-x-2">
          <button class="p-2 rounded-full bg-gray-200/70 dark:bg-gray-700/70 text-gray-800 dark:text-gray-100 hover:bg-gray-300/80 dark:hover:bg-gray-600/80 transition-colors shadow-sm" aria-label="Toggle Fullscreen">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>
          </button>
        </div>
      </div>

      <!-- Description/Information -->
      <div class="bg-white/40 dark:bg-gray-800/40 backdrop-blur-md p-6 rounded-lg shadow-md border border-white/50 dark:border-gray-700/50">
        <h3 class="text-xl font-bold mb-3 text-gray-900 dark:text-gray-100">Understanding The Solar System</h3>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
          Explore our solar system in a stunning 360-degree interactive tour. 
          Discover fascinating facts about each planet, from the fiery surface of Mercury to the icy rings of Saturn. Navigate through celestial bodies and learn about their unique characteristics and orbital paths. This module provides an immersive learning experience for all enthusiasts.
        </p>
        <div class="mt-4 flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-400">
          <span><strong class="text-gray-800 dark:text-gray-200">Topic:</strong> Astronomy</span>
          <span><strong class="text-gray-800 dark:text-gray-200">Duration:</strong> 15 min</span>
          <span><strong class="text-gray-800 dark:text-gray-200">Views:</strong> 1.2k</span>
        </div>
      </div>
    </div>

    <!-- Right Pane: Timeline/Related Content -->
    <div class="w-full lg:w-80 flex-shrink-0 flex flex-col gap-6">

      <!-- Timeline/Navigation -->
      <div class="bg-white/40 dark:bg-gray-800/40 backdrop-blur-md p-6 rounded-lg shadow-md border border-white/50 dark:border-gray-700/50 flex-grow min-h-[200px] lg:min-h-0">
        <h3 class="text-lg font-bold mb-4 text-gray-900 dark:text-gray-100">Planetary Tour Timeline</h3>
        <ul class="space-y-4">
          <li class="flex items-start group relative">
            <div class="flex-shrink-0 w-2 h-2 rounded-full bg-gray-500 dark:bg-gray-400 ring-2 ring-white dark:ring-gray-800 transition-all group-hover:bg-gray-800 dark:group-hover:bg-gray-100 mt-1.5"></div>
            <div class="absolute left-1 top-2.5 bottom-0 w-0.5 bg-gray-300 dark:bg-gray-600 group-last-of-type:hidden"></div>
            <div class="ml-4 text-gray-700 dark:text-gray-300">
              <p class="font-semibold text-gray-800 dark:text-gray-200 leading-tight">Introduction: Welcome to the Cosmos</p>
              <p class="text-sm mt-0.5 text-gray-600 dark:text-gray-400">0:00 - 0:30</p>
            </div>
          </li>
          <li class="flex items-start group relative">
            <div class="flex-shrink-0 w-2 h-2 rounded-full bg-gray-500 dark:bg-gray-400 ring-2 ring-white dark:ring-gray-800 transition-all group-hover:bg-gray-800 dark:group-hover:bg-gray-100 mt-1.5"></div>
            <div class="absolute left-1 top-2.5 bottom-0 w-0.5 bg-gray-300 dark:bg-gray-600 group-last-of-type:hidden"></div>
            <div class="ml-4 text-gray-700 dark:text-gray-300">
              <p class="font-semibold text-gray-800 dark:text-gray-200 leading-tight">Mercury & Venus: Inner Orbit</p>
              <p class="text-sm mt-0.5 text-gray-600 dark:text-gray-400">0:31 - 1:05</p>
            </div>
          </li>
          <li class="flex items-start group relative">
            <div class="flex-shrink-0 w-2 h-2 rounded-full bg-gray-800 dark:bg-gray-100 ring-2 ring-white dark:ring-gray-800 shadow-lg mt-1.5"></div>
            <div class="absolute left-1 top-2.5 bottom-0 w-0.5 bg-gray-300 dark:bg-gray-600 group-last-of-type:hidden"></div>
            <div class="ml-4 text-gray-700 dark:text-gray-300">
              <p class="font-semibold text-gray-900 dark:text-gray-50 leading-tight">Earth & Mars: Terrestrial Neighbors</p>
              <p class="text-sm mt-0.5 font-bold text-gray-800 dark:text-gray-200">1:06 - 2:00 (Current)</p>
            </div>
          </li>
          <li class="flex items-start group relative">
            <div class="flex-shrink-0 w-2 h-2 rounded-full bg-gray-500 dark:bg-gray-400 ring-2 ring-white dark:ring-gray-800 transition-all group-hover:bg-gray-800 dark:group-hover:bg-gray-100 mt-1.5"></div>
            <div class="absolute left-1 top-2.5 bottom-0 w-0.5 bg-gray-300 dark:bg-gray-600 group-last-of-type:hidden"></div>
            <div class="ml-4 text-gray-700 dark:text-gray-300">
              <p class="font-semibold text-gray-800 dark:text-gray-200 leading-tight">Asteroid Belt & Jupiter: Gas Giant</p>
              <p class="text-sm mt-0.5 text-gray-600 dark:text-gray-400">2:01 - 3:15</p>
            </div>
          </li>
          <li class="flex items-start group relative">
            <div class="flex-shrink-0 w-2 h-2 rounded-full bg-gray-500 dark:bg-gray-400 ring-2 ring-white dark:ring-gray-800 transition-all group-hover:bg-gray-800 dark:group-hover:bg-gray-100 mt-1.5"></div>
            <div class="absolute left-1 top-2.5 bottom-0 w-0.5 bg-gray-300 dark:bg-gray-600 group-last-of-type:hidden"></div>
            <div class="ml-4 text-gray-700 dark:text-gray-300">
              <p class="font-semibold text-gray-800 dark:text-gray-200 leading-tight">Saturn, Uranus & Neptune: Outer Giants</p>
              <p class="text-sm mt-0.5 text-gray-600 dark:text-gray-400">3:16 - 4:40</p>
            </div>
          </li>
           <li class="flex items-start group relative">
            <div class="flex-shrink-0 w-2 h-2 rounded-full bg-gray-500 dark:bg-gray-400 ring-2 ring-white dark:ring-gray-800 transition-all group-hover:bg-gray-800 dark:group-hover:bg-gray-100 mt-1.5"></div>
            <div class="absolute left-1 top-2.5 bottom-0 w-0.5 bg-gray-300 dark:bg-gray-600 group-last-of-type:hidden"></div>
            <div class="ml-4 text-gray-700 dark:text-gray-300">
              <p class="font-semibold text-gray-800 dark:text-gray-200 leading-tight">Beyond Neptune: Kuiper Belt & Oort Cloud</p>
              <p class="text-sm mt-0.5 text-gray-600 dark:text-gray-400">4:41 - 5:30</p>
            </div>
          </li>
        </ul>
      </div>

      <!-- Related Modules -->
      <div class="bg-white/40 dark:bg-gray-800/40 backdrop-blur-md p-6 rounded-lg shadow-md border border-white/50 dark:border-gray-700/50">
        <h3 class="text-lg font-bold mb-4 text-gray-900 dark:text-gray-100">Related Modules</h3>
        <div class="space-y-4">
          <div class="flex items-center space-x-3 group cursor-pointer">
            <div class="w-16 h-10 flex-shrink-0 overflow-hidden rounded-md bg-gray-300 dark:bg-gray-600">
              <img src="https://picsum.photos/100/60?random=3" alt="Module thumbnail" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
            </div>
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors">The Life Cycle of Stars</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Advanced Astronomy</p>
            </div>
          </div>
          <div class="flex items-center space-x-3 group cursor-pointer">
            <div class="w-16 h-10 flex-shrink-0 overflow-hidden rounded-md bg-gray-300 dark:bg-gray-600">
              <img src="https://picsum.photos/100/60?random=4" alt="Module thumbnail" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
            </div>
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors">Cosmic Distances & Galaxies</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Space Engineering</p>
            </div>
          </div>
          <div class="flex items-center space-x-3 group cursor-pointer">
            <div class="w-16 h-10 flex-shrink-0 overflow-hidden rounded-md bg-gray-300 dark:bg-gray-600">
              <img src="https://picsum.photos/100/60?random=5" alt="Module thumbnail" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
            </div>
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors">History of Space Exploration</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Historical Context</p>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

Forum_Community_Cards_Component

A responsive and interactive cards component for a forum or community platform, featuring a retro/vintage color scheme and subtle hover effects for microinteractions. Includes dark mode support and semantic HTML.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-6 text-center">Latest Discussions</h2>

    <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">

      <!-- Card 1 -->
      <article class="relative group bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg dark:hover:shadow-xl transition-all duration-300 overflow-hidden
                      transform hover:-translate-y-1 hover:scale-[1.01] active:scale-[0.99]">
        <div class="p-5 flex flex-col h-full">
          <div class="flex items-center mb-3">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-semibold text-gray-700 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-bold text-teal-700 dark:text-teal-400 mb-2 leading-tight group-hover:text-teal-600 dark:group-hover:text-teal-300 transition-colors duration-200">
            <a href="#" class="before:absolute before:inset-0 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 rounded-md">Exploring the future of web development</a>
          </h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-4 line-clamp-3">What new technologies are you excited about? Discuss the potential impacts of AI, WebAssembly, and more!</p>

          <div class="flex flex-wrap gap-2 mb-4 text-xs">
            <span class="px-2 py-1 bg-yellow-100 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-200 rounded-full">#Tech</span>
            <span class="px-2 py-1 bg-orange-100 dark:bg-orange-800 text-orange-800 dark:text-orange-200 rounded-full">#AI</span>
            <span class="px-2 py-1 bg-purple-100 dark:bg-purple-800 text-purple-800 dark:text-purple-200 rounded-full">#WebDev</span>
          </div>

          <div class="mt-auto flex items-center justify-between text-gray-500 dark:text-gray-400 text-sm">
            <div class="flex items-center">
              <svg class="w-4 h-4 mr-1 text-blue-500 dark:text-blue-400 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7s-8-3.134-8-7 3.582-7 8-7 8 3.134 8 7zM9 9a1 1 0 000 2h2a1 1 0 100-2H9z" clip-rule="evenodd"></path></svg>
              <span>15 Comments</span>
            </div>
            <div class="flex items-center">
              <svg class="w-4 h-4 mr-1 text-red-500 dark:text-red-400 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v1a1 1 0 11-2 0V4a1 1 0 10-2 0v1a1 1 0 11-2 0V4zm-1 0a1 1 0 000 2h.01a1 1 0 000-2H6zm7 0a1 1 0 000 2h.01a1 1 0 000-2H13zM6 10a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm-1 5a1 1 0 000 2h2a1 1 0 000-2H5zm7 0a1 1 0 000 2h2a1 1 0 000-2h-2z" clip-rule="evenodd"></path></svg>
              <span>6 Likes</span>
            </div>
          </div>
        </div>
      </article>

      <!-- Card 2 -->
      <article class="relative group bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg dark:hover:shadow-xl transition-all duration-300 overflow-hidden
                      transform hover:-translate-y-1 hover:scale-[1.01] active:scale-[0.99]">
        <div class="p-5 flex flex-col h-full">
          <div class="flex items-center mb-3">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/17.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-semibold text-gray-700 dark:text-gray-200">Jane Smith</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">5 hours ago</p>
            </div>
          </div>
          <h3 class="text-lg font-bold text-teal-700 dark:text-teal-400 mb-2 leading-tight group-hover:text-teal-600 dark:group-hover:text-teal-300 transition-colors duration-200">
            <a href="#" class="before:absolute before:inset-0 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 rounded-md">Best practices for responsive design</a>
          </h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-4 line-clamp-3">Share your favorite tips and tricks for building truly responsive and accessible web experiences across all devices.</p>

          <div class="flex flex-wrap gap-2 mb-4 text-xs">
            <span class="px-2 py-1 bg-purple-100 dark:bg-purple-800 text-purple-800 dark:text-purple-200 rounded-full">#Design</span>
            <span class="px-2 py-1 bg-cyan-100 dark:bg-cyan-800 text-cyan-800 dark:text-cyan-200 rounded-full">#Frontend</span>
            <span class="px-2 py-1 bg-yellow-100 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-200 rounded-full">#CSS</span>
          </div>

          <div class="mt-auto flex items-center justify-between text-gray-500 dark:text-gray-400 text-sm">
            <div class="flex items-center">
              <svg class="w-4 h-4 mr-1 text-blue-500 dark:text-blue-400 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7s-8-3.134-8-7 3.582-7 8-7 8 3.134 8 7zM9 9a1 1 0 000 2h2a1 1 0 100-2H9z" clip-rule="evenodd"></path></svg>
              <span>22 Comments</span>
            </div>
            <div class="flex items-center">
              <svg class="w-4 h-4 mr-1 text-red-500 dark:text-red-400 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v1a1 1 0 11-2 0V4a1 1 0 10-2 0v1a1 1 0 11-2 0V4zm-1 0a1 1 0 000 2h.01a1 1 0 000-2H6zm7 0a1 1 0 000 2h.01a1 1 0 000-2H13zM6 10a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm-1 5a1 1 0 000 2h2a1 1 0 000-2H5zm7 0a1 1 0 000 2h2a1 1 0 000-2h-2z" clip-rule="evenodd"></path></svg>
              <span>10 Likes</span>
            </div>
          </div>
        </div>
      </article>

      <!-- Card 3 -->
      <article class="relative group bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg dark:hover:shadow-xl transition-all duration-300 overflow-hidden
                      transform hover:-translate-y-1 hover:scale-[1.01] active:scale-[0.99]">
        <div class="p-5 flex flex-col h-full">
          <div class="flex items-center mb-3">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/lego/7.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-semibold text-gray-700 dark:text-gray-200">RetroFan_99</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">1 day ago</p>
            </div>
          </div>
          <h3 class="text-lg font-bold text-teal-700 dark:text-teal-400 mb-2 leading-tight group-hover:text-teal-600 dark:group-hover:text-teal-300 transition-colors duration-200">
            <a href="#" class="before:absolute before:inset-0 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 rounded-md">Nostalgia trip: Favorite 80s arcade games</a>
          </h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-4 line-clamp-3">Let's reminisce about the golden age of arcade gaming! What were your go-to machines and high scores?</p>

          <div class="flex flex-wrap gap-2 mb-4 text-xs">
            <span class="px-2 py-1 bg-yellow-100 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-200 rounded-full">#Retro</span>
            <span class="px-2 py-1 bg-orange-100 dark:bg-orange-800 text-orange-800 dark:text-orange-200 rounded-full">#Gaming</span>
            <span class="px-2 py-1 bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-200 rounded-full">#80s</span>
          </div>

          <div class="mt-auto flex items-center justify-between text-gray-500 dark:text-gray-400 text-sm">
            <div class="flex items-center">
              <svg class="w-4 h-4 mr-1 text-blue-500 dark:text-blue-400 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7s-8-3.134-8-7 3.582-7 8-7 8 3.134 8 7zM9 9a1 1 0 000 2h2a1 1 0 100-2H9z" clip-rule="evenodd"></path></svg>
              <span>30 Comments</span>
            </div>
            <div class="flex items-center">
              <svg class="w-4 h-4 mr-1 text-red-500 dark:text-red-400 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v1a1 1 0 11-2 0V4a1 1 0 10-2 0v1a1 1 0 11-2 0V4zm-1 0a1 1 0 000 2h.01a1 1 0 000-2H6zm7 0a1 1 0 000 2h.01a1 1 0 000-2H13zM6 10a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm-1 5a1 1 0 000 2h2a1 1 0 000-2H5zm7 0a1 1 0 000 2h2a1 1 0 000-2h-2z" clip-rule="evenodd"></path></svg>
              <span>20 Likes</span>
            </div>
          </div>
        </div>
      </article>

      <!-- Card 4 -->
      <article class="relative group bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg dark:hover:shadow-xl transition-all duration-300 overflow-hidden
                      transform hover:-translate-y-1 hover:scale-[1.01] active:scale-[0.99]">
        <div class="p-5 flex flex-col h-full">
          <div class="flex items-center mb-3">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-semibold text-gray-700 dark:text-gray-200">FoodExplorer</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">3 days ago</p>
            </div>
          </div>
          <h3 class="text-lg font-bold text-teal-700 dark:text-teal-400 mb-2 leading-tight group-hover:text-teal-600 dark:group-hover:text-teal-300 transition-colors duration-200">
            <a href="#" class="before:absolute before:inset-0 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 rounded-md">Top 5 comfort food recipes for fall</a>
          </h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-4 line-clamp-3">Share your most beloved, heartwarming recipes that are perfect for chilly autumn evenings. </p>

          <div class="flex flex-wrap gap-2 mb-4 text-xs">
            <span class="px-2 py-1 bg-cyan-100 dark:bg-cyan-800 text-cyan-800 dark:text-cyan-200 rounded-full">#Food</span>
            <span class="px-2 py-1 bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-200 rounded-full">#Cooking</span>
            <span class="px-2 py-1 bg-purple-100 dark:bg-purple-800 text-purple-800 dark:text-purple-200 rounded-full">#Recipes</span>
          </div>

          <div class="mt-auto flex items-center justify-between text-gray-500 dark:text-gray-400 text-sm">
            <div class="flex items-center">
              <svg class="w-4 h-4 mr-1 text-blue-500 dark:text-blue-400 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7s-8-3.134-8-7 3.582-7 8-7 8 3.134 8 7zM9 9a1 1 0 000 2h2a1 1 0 100-2H9z" clip-rule="evenodd"></path></svg>
              <span>18 Comments</span>
            </div>
            <div class="flex items-center">
              <svg class="w-4 h-4 mr-1 text-red-500 dark:text-red-400 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v1a1 1 0 11-2 0V4a1 1 0 10-2 0v1a1 1 0 11-2 0V4zm-1 0a1 1 0 000 2h.01a1 1 0 000-2H6zm7 0a1 1 0 000 2h.01a1 1 0 000-2H13zM6 10a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm-1 5a1 1 0 000 2h2a1 1 0 000-2H5zm7 0a1 1 0 000 2h2a1 1 0 000-2h-2z" clip-rule="evenodd"></path></svg>
              <span>12 Likes</span>
            </div>
          </div>
        </div>
      </article>

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

Product Comparison Component - Watercolor/Artistic

A complex, monochromatic product comparison component designed for industrial/manufacturing use, featuring a soft, watercolor/artistic aesthetic with dark mode support. Allows users to compare multiple products side-by-side.

Open Preview

                <div class="bg-gradient-to-br from-indigo-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 p-4 sm:p-6 lg:p-8 font-sans overflow-x-auto">
  <div class="max-w-6xl mx-auto py-8">
    <h2 class="text-4xl lg:text-5xl font-extrabold text-center text-indigo-900 dark:text-indigo-100 mb-8 sm:mb-12 tracking-tight" style="text-shadow: 2px 2px 4px rgba(0,0,0,0.1);">
      Industrial Product Comparison
    </h2>
    <p class="text-center text-lg text-indigo-700 dark:text-indigo-300 mb-10 sm:mb-16 max-w-2xl mx-auto leading-relaxed">
      Compare the features and specifications of our high-performance industrial equipment. Make an informed decision for your manufacturing needs.
    </p>

    <div class="w-full overflow-x-auto relative">
      <div class="flex space-x-6 pb-4 sm:pb-6 pr-4" style="min-width: fit-content;">
        <!-- Feature Column Header -->
        <div class="flex-shrink-0 w-64 min-w-[250px] bg-indigo-200/50 dark:bg-gray-700/50 rounded-lg p-6 flex flex-col justify-between shadow-lg border border-indigo-300 dark:border-gray-600 backdrop-blur-sm">
          <h3 class="text-2xl font-bold text-indigo-900 dark:text-indigo-100 mb-6">Features</h3>
          <ul class="space-y-4 text-indigo-800 dark:text-indigo-200 text-lg flex-grow">
            <li class="font-semibold py-2">Product Image</li>
            <li class="font-semibold py-2">Product Name</li>
            <li class="font-semibold py-2">Model Number</li>
            <li class="font-semibold py-2">Material Strength</li>
            <li class="font-semibold py-2">Operating Temperature Range</li>
            <li class="font-semibold py-2">Power Consumption (kW)</li>
            <li class="font-semibold py-2">Durability Rating</li>
            <li class="font-semibold py-2">Warranty (Years)</li>
            <li class="font-semibold py-2">Included Accessories</li>
            <li class="font-semibold py-2">Certification Standards</li>
            <li class="font-semibold py-2">Price</li>
          </ul>
          <div class="mt-8">
            <!-- Placeholder for alignment -->
          </div>
        </div>

        <!-- Product 1 -->
        <div class="flex-shrink-0 w-80 min-w-[320px] bg-white/70 dark:bg-gray-800/70 rounded-lg p-6 shadow-xl border border-indigo-400 dark:border-gray-600 backdrop-blur-md transform hover:scale-[1.01] transition-all duration-300 ease-in-out group">
          <div class="text-center mb-6">
            <img src="https://picsum.photos/300/200?random=1" alt="Industrial Machine Alpha" class="w-full h-40 object-cover rounded-md mb-4 shadow-md group-hover:shadow-lg transition-shadow duration-300 ease-in-out border border-indigo-200 dark:border-gray-700">
            <h3 class="text-2xl font-bold text-indigo-800 dark:text-indigo-100 mb-2">HydraFlex 3000i</h3>
            <p class="text-indigo-600 dark:text-indigo-300 text-sm">Model: HFX-3000i</p>
          </div>
          <ul class="space-y-4 text-indigo-700 dark:text-indigo-200 flex-grow text-lg">
            <li class="flex items-center py-2"><span class="w-1/2"></span><span class="w-1/2"></span></li>
            <li class="flex items-center py-2"><span class="w-1/2"></span><span class="w-1/2"></span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">HFX-3000i</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Titanium Alloy</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">-20°C to 150°C</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">15 kW</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Excellent (9.5/10)</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">5 Years</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Tool Kit, Manual </span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">ISO 9001, CE Certified</span></li>
            <li class="flex items-center py-2 mt-4 text-3xl font-bold text-indigo-900 dark:text-indigo-100"><span class="w-1/2"></span><span class="w-1/2">$12,500</span></li>
          </ul>
          <div class="mt-8 text-center">
            <button class="px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-4 focus:ring-indigo-500 focus:ring-opacity-50 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105">
              View Product
            </button>
          </div>
        </div>

        <!-- Product 2 -->
        <div class="flex-shrink-0 w-80 min-w-[320px] bg-white/70 dark:bg-gray-800/70 rounded-lg p-6 shadow-xl border border-indigo-400 dark:border-gray-600 backdrop-blur-md transform hover:scale-[1.01] transition-all duration-300 ease-in-out group">
          <div class="text-center mb-6">
            <img src="https://picsum.photos/300/200?random=2" alt="Industrial Machine Beta" class="w-full h-40 object-cover rounded-md mb-4 shadow-md group-hover:shadow-lg transition-shadow duration-300 ease-in-out border border-indigo-200 dark:border-gray-700">
            <h3 class="text-2xl font-bold text-indigo-800 dark:text-indigo-100 mb-2">MegaPress X100</h3>
            <p class="text-indigo-600 dark:text-indigo-300 text-sm">Model: MP-X100</p>
          </div>
          <ul class="space-y-4 text-indigo-700 dark:text-indigo-200 flex-grow text-lg">
            <li class="flex items-center py-2"><span class="w-1/2"></span><span class="w-1/2"></span></li>
            <li class="flex items-center py-2"><span class="w-1/2"></span><span class="w-1/2"></span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">MP-X100</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Reinforced Steel</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">0°C to 200°C</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">20 kW</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Superior (9.8/10)</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">7 Years</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Hydraulic Hoses, Filters</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">ASTM, RoHS Compliant</span></li>
            <li class="flex items-center py-2 mt-4 text-3xl font-bold text-indigo-900 dark:text-indigo-100"><span class="w-1/2"></span><span class="w-1/2">$18,000</span></li>
          </ul>
          <div class="mt-8 text-center">
            <button class="px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-4 focus:ring-indigo-500 focus:ring-opacity-50 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105">
              View Product
            </button>
          </div>
        </div>

        <!-- Product 3 (Optional extra product) -->
        <div class="flex-shrink-0 w-80 min-w-[320px] bg-white/70 dark:bg-gray-800/70 rounded-lg p-6 shadow-xl border border-indigo-400 dark:border-gray-600 backdrop-blur-md transform hover:scale-[1.01] transition-all duration-300 ease-in-out group">
          <div class="text-center mb-6">
            <img src="https://picsum.photos/300/200?random=3" alt="Industrial Machine Gamma" class="w-full h-40 object-cover rounded-md mb-4 shadow-md group-hover:shadow-lg transition-shadow duration-300 ease-in-out border border-indigo-200 dark:border-gray-700">
            <h3 class="text-2xl font-bold text-indigo-800 dark:text-indigo-100 mb-2">QuantumFabricator</h3>
            <p class="text-indigo-600 dark:text-indigo-300 text-sm">Model: QFX-500</p>
          </div>
          <ul class="space-y-4 text-indigo-700 dark:text-indigo-200 flex-grow text-lg">
            <li class="flex items-center py-2"><span class="w-1/2"></span><span class="w-1/2"></span></li>
            <li class="flex items-center py-2"><span class="w-1/2"></span><span class="w-1/2"></span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">QFX-500</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Carbon Fiber Composite</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">-5°C to 180°C</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">18 kW</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Excellent (9.2/10)</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">6 Years</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">Spare Parts Kit, Software</span></li>
            <li class="flex items-center py-2"><span class="w-1/2 font-semibold text-indigo-900 dark:text-indigo-100"></span> <span class="w-1/2">CE, UL Certified</span></li>
            <li class="flex items-center py-2 mt-4 text-3xl font-bold text-indigo-900 dark:text-indigo-100"><span class="w-1/2"></span><span class="w-1/2">$15,200</span></li>
          </ul>
          <div class="mt-8 text-center">
            <button class="px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-4 focus:ring-indigo-500 focus:ring-opacity-50 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105">
              View Product
            </button>
          </div>
        </div>

      </div>
    </div>

    <div class="mt-16 text-center">
      <p class="text-indigo-800 dark:text-indigo-200 text-lg sm:text-xl font-medium">
        Need assistance? Our experts are ready to help you choose the right solution.
      </p>
      <a href="#" class="inline-block mt-6 px-8 py-4 bg-indigo-700 text-white text-xl font-bold rounded-full shadow-lg hover:bg-indigo-800 focus:outline-none focus:ring-4 focus:ring-indigo-500 focus:ring-opacity-70 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105">
        Contact Sales
      </a>
    </div>
  </div>
</div>

Retro_Vintage_Audio_Player_Social_Media

A retro/vintage inspired audio player component for social media, featuring warm neutrals, responsive design, and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-800 dark:to-stone-900 min-h-screen flex items-center justify-center font-mono">
  <div class="w-full max-w-sm rounded-xl shadow-2xl overflow-hidden
              bg-gradient-to-br from-stone-50 to-stone-200
              dark:from-stone-700 dark:to-stone-900
              p-6 space-y-6 border border-stone-300 dark:border-stone-600
              relative transform transition-all duration-300 hover:scale-105">

    <!-- Top Section: Header & User Info -->
    <div class="flex items-center justify-between">
      <div class="flex items-center space-x-3">
        <img class="w-10 h-10 rounded-full border-2 border-stone-400 dark:border-stone-500 shadow-md"
             src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
        <div>
          <p class="text-sm font-bold text-stone-800 dark:text-stone-200">@SynthWaveSally</p>
          <p class="text-xs text-stone-600 dark:text-stone-400">Sharing a vibe...</p>
        </div>
      </div>
      <span class="text-stone-500 dark:text-stone-400 text-xs">3m ago</span>
    </div>

    <!-- Album Art & Track Info -->
    <div class="relative w-full aspect-square rounded-lg overflow-hidden shadow-lg border border-stone-300 dark:border-stone-600">
      <img class="w-full h-full object-cover" src="https://picsum.photos/400/400?grayscale&blur=2" alt="Album Art">
      <div class="absolute inset-0 bg-black bg-opacity-30 flex flex-col items-center justify-center p-4">
        <p class="text-xl font-extrabold text-white text-center drop-shadow-lg">Neon Dreams</p>
        <p class="text-sm text-stone-200 text-center mt-1 drop-shadow-md">The Retro Bandidos</p>
      </div>
    </div>

    <!-- Controls - Retro Buttons -->
    <div class="grid grid-cols-3 gap-3">
      <button aria-label="Previous Track" class="flex items-center justify-center p-3 rounded-full
                  bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300
                  shadow-md hover:shadow-lg transition-all duration-200
                  border border-stone-400 dark:border-stone-600
                  active:bg-stone-400 dark:active:bg-stone-600 group">
        <svg class="w-5 h-5 group-active:scale-90" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
      </button>
      <button aria-label="Play/Pause" class="flex items-center justify-center p-4 rounded-full
                  bg-amber-400 dark:bg-amber-600 text-amber-900 dark:text-amber-100
                  shadow-xl hover:shadow-2xl transition-all duration-200
                  border border-amber-500 dark:border-amber-700
                  active:bg-amber-500 dark:active:bg-amber-700 group relative -top-1">
        <svg class="w-7 h-7 group-active:scale-90" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
      </button>
      <button aria-label="Next Track" class="flex items-center justify-center p-3 rounded-full
                  bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300
                  shadow-md hover:shadow-lg transition-all duration-200
                  border border-stone-400 dark:border-stone-600
                  active:bg-stone-400 dark:active:bg-stone-600 group">
        <svg class="w-5 h-5 group-active:scale-90 scale-x-[-1]" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
      </button>
    </div>

    <!-- Progress Bar (Fake) -->
    <div class="w-full bg-stone-300 dark:bg-stone-700 rounded-full h-2.5 relative shadow-inner overflow-hidden">
      <div class="bg-amber-400 dark:bg-amber-500 h-2.5 rounded-full" style="width: 65%;"></div>
      <div class="absolute top-1/2 -mt-2 left-[65%] transform -translate-x-1/2 w-4 h-4 rounded-full bg-amber-600 dark:bg-amber-400 shadow-md border-2 border-stone-100 dark:border-stone-800"></div>
    </div>
    <div class="flex justify-between text-xs text-stone-600 dark:text-stone-400">
      <span>0:45</span>
      <span>3:10</span>
    </div>

    <!-- Action Buttons -->
    <div class="flex justify-around pt-2 border-t border-stone-300 dark:border-stone-700">
      <button aria-label="Like" class="flex items-center space-x-2 text-stone-600 dark:text-stone-400 hover:text-red-500 dark:hover:text-red-400">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path></svg>
        <span class="text-sm">1.2K</span>
      </button>
      <button aria-label="Comment" class="flex items-center space-x-2 text-stone-600 dark:text-stone-400 hover:text-blue-500 dark:hover:text-blue-400">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path></svg>
        <span class="text-sm">345</span>
      </button>
      <button aria-label="Share" class="flex items-center space-x-2 text-stone-600 dark:text-stone-400 hover:text-green-500 dark:hover:text-green-400">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18 16.08c-.76 0-1.44.3-1.96.79l-4.71-2.91c.07-.22.11-.45.11-.69s-.04-.47-.11-.69l4.71-2.91c.52.49 1.2.79 1.96.79 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.11.69l-4.71 2.91c-.52-.49-1.2-.79-1.96-.79-1.66 0-3 1.34-3 3s1.34 3 3 3c.76 0 1.44-.3 1.96-.79l4.71 2.91c-.07.22-.11.45-.11.69s.04.47.11.69l-4.71 2.91c-.52-.49-1.2-.79-1.96-.79-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3c0-.24-.04-.47-.11-.69l4.71-2.91c.52.49 1.2.79 1.96.79 1.66 0 3-1.34 3-3s-1.34-3-3-3z"></path></svg>
        <span class="text-sm">123</span>
      </button>
    </div>

    <!-- Vintage Speaker Grille Detail -->
    <div class="absolute bottom-0 left-0 right-0 h-4 bg-stone-300 dark:bg-stone-700 border-t border-stone-400 dark:border-stone-600
                flex justify-around items-center rounded-b-xl px-2">
      <div class="w-1.5 h-1.5 bg-stone-500 dark:bg-stone-500 rounded-full"></div>
      <div class="w-1.5 h-1.5 bg-stone-500 dark:bg-stone-500 rounded-full"></div>
      <div class="w-1.5 h-1.5 bg-stone-500 dark:bg-stone-500 rounded-full"></div>
      <div class="w-1.5 h-1.5 bg-stone-500 dark:bg-stone-500 rounded-full"></div>
      <div class="w-1.5 h-1.5 bg-stone-500 dark:bg-stone-500 rounded-full"></div>
      <div class="w-1.5 h-1.5 bg-stone-500 dark:bg-stone-500 rounded-full"></div>
    </div>

  </div>
</div>

Neumorphic Navigation Component

A simple, responsive navigation component with a neumorphic design style, using a purple/violet color scheme, suitable for a forum or community platform. Includes dark mode support.

Open Preview

                <nav class="p-4 bg-purple-200 dark:bg-purple-900 shadow-lg dark:shadow-purple-950 rounded-xl m-4 transition-all duration-300 ease-in-out">
  <div class="container mx-auto flex flex-col md:flex-row items-center justify-between">
    <div class="mb-4 md:mb-0">
      <a href="#" class="text-purple-800 dark:text-purple-200 text-3xl font-bold tracking-tight transform transition-transform duration-300 hover:scale-105">
        <span class="block relative leading-none">
          <span class="absolute inset-0 bg-gradient-to-br from-purple-400 to-purple-600 dark:from-purple-700 dark:to-purple-900 rounded-lg blur-sm opacity-70"></span>
          <span class="relative z-10 p-2 rounded-lg shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark text-white dark:text-purple-100">Forum Hub</span>
        </span>
      </a>
    </div>
    <div class="flex flex-wrap justify-center space-x-2 md:space-x-4">
      <a href="#" class="px-4 py-2 rounded-lg text-purple-700 dark:text-purple-300 font-medium transition-all duration-300 shadow-neumorphic dark:shadow-neumorphic-dark hover:shadow-neumorphic-pressed dark:hover:shadow-neumorphic-pressed-dark active:text-purple-900 dark:active:text-purple-500 flex items-center">
        <svg class="w-5 h-5 mr-1" 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>
        Home
      </a>
      <a href="#" class="px-4 py-2 rounded-lg text-purple-700 dark:text-purple-300 font-medium transition-all duration-300 shadow-neumorphic dark:shadow-neumorphic-dark hover:shadow-neumorphic-pressed dark:hover:shadow-neumorphic-pressed-dark active:text-purple-900 dark:active:text-purple-500 flex items-center">
        <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3 1h2v3H5V6zm4 0h2v3H9V6zm4 0h2v3h-2V6zM5 11h2v3H5v-3zm4 0h2v3H9v-3zm4 0h2v3h-2v-3z"></path></svg>
        Categories
      </a>
      <a href="#" class="px-4 py-2 rounded-lg text-purple-700 dark:text-purple-300 font-medium transition-all duration-300 shadow-neumorphic dark:shadow-neumorphic-dark hover:shadow-neumorphic-pressed dark:hover:shadow-neumorphic-pressed-dark active:text-purple-900 dark:active:text-purple-500 flex items-center">
        <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path><path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path></svg>
        Messages
      </a>
      <a href="#" class="px-4 py-2 rounded-lg text-purple-700 dark:text-purple-300 font-medium transition-all duration-300 shadow-neumorphic dark:shadow-neumorphic-dark hover:shadow-neumorphic-pressed dark:hover:shadow-neumorphic-pressed-dark active:text-purple-900 dark:active:text-purple-500 flex items-center">
        <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path></svg>
        Profile
      </a>
    </div>
  </div>
</nav>

<style>
  /* Neumorphic Shadows for Light Mode */
  .shadow-neumorphic {
    box-shadow: 6px 6px 12px #bca8e8, -6px -6px 12px #ffffff;
  }
  .shadow-neumorphic-pressed {
    box-shadow: inset 4px 4px 8px #bca8e8, inset -4px -4px 8px #ffffff;
  }
  .shadow-inner-neumorphic {
    box-shadow: inset 3px 3px 6px #8e7eb8, inset -3px -3px 6px #d8c2ff;
  }

  /* Neumorphic Shadows for Dark Mode */
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #4a1980, -6px -6px 12px #8e2cb7;
  }
  .dark .shadow-neumorphic-pressed-dark {
    box-shadow: inset 4px 4px 8px #4a1980, inset -4px -4px 8px #8e2cb7;
  }
  .dark .shadow-inner-neumorphic-dark {
    box-shadow: inset 3px 3px 6px #3a1566, inset -3px -3px 6px #5e1f9a;
  }
</style>

1 ... 94 95 96 97 98 ... 335