Search Components

All Components

Browse all available Tailwind CSS components

Community Forum Component

A complex, paper/print-inspired community forum component for weather and climate discussions, using a complementary color scheme and full responsiveness with dark mode support.

Open Preview

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

  <!-- Outer 'Paper' Container -->
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden
              border border-gray-200 dark:border-gray-700
              flex flex-col lg:flex-row">

    <!-- Left Sidebar: Categories/Navigation -->
    <aside class="w-full lg:w-1/4 bg-blue-50 dark:bg-gray-700 p-6 border-b lg:border-b-0 lg:border-r
                   border-gray-200 dark:border-gray-600 flex-shrink-0">
      <h2 class="text-2xl font-bold mb-6 text-blue-800 dark:text-blue-300 tracking-wide">Forum Topics</h2>
      <ul class="space-y-3">
        <li><a href="#" class="block text-lg py-2 px-3 rounded-md transition-colors duration-200
                      font-semibold text-blue-700 dark:text-blue-400
                      hover:bg-blue-100 dark:hover:bg-gray-600
                      focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Latest Forecasts</a></li>
        <li><a href="#" class="block text-lg py-2 px-3 rounded-md transition-colors duration-200
                      text-gray-700 dark:text-gray-300
                      hover:bg-blue-100 dark:hover:bg-gray-600
                      focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Climate Change Discussion</a></li>
        <li><a href="#" class="block text-lg py-2 px-3 rounded-md transition-colors duration-200
                      text-gray-700 dark:text-gray-300
                      hover:bg-blue-100 dark:hover:bg-gray-600
                      focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Extreme Weather Events</a></li>
        <li><a href="#" class="block text-lg py-2 px-3 rounded-md transition-colors duration-200
                      text-gray-700 dark:text-gray-300
                      hover:bg-blue-100 dark:hover:bg-gray-600
                      focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Weather Photography</a></li>
        <li><a href="#" class="block text-lg py-2 px-3 rounded-md transition-colors duration-200
                      text-gray-700 dark:text-gray-300
                      hover:bg-blue-100 dark:hover:bg-gray-600
                      focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Science & Research</a></li>
        <li><a href="#" class="block text-lg py-2 px-3 rounded-md transition-colors duration-200
                      text-gray-700 dark:text-gray-300
                      hover:bg-blue-100 dark:hover:bg-gray-600
                      focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Regional Weather Watch</a></li>
      </ul>

      <div class="mt-8 pt-6 border-t border-gray-300 dark:border-gray-500">
        <h3 class="text-xl font-bold mb-4 text-blue-800 dark:text-blue-300">Popular Tags</h3>
        <div class="flex flex-wrap gap-2">
          <span class="bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-sm px-3 py-1 rounded-full">#Hurricane</span>
          <span class="bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-sm px-3 py-1 rounded-full">#ClimateModeling</span>
          <span class="bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-sm px-3 py-1 rounded-full">#ElNino</span>
          <span class="bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-sm px-3 py-1 rounded-full">#Drought</span>
          <span class="bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-sm px-3 py-1 rounded-full">#SolarPower</span>
        </div>
      </div>
    </aside>

    <!-- Main Content Area: Threads List -->
    <main class="flex-1 p-6 lg:p-8">
      <h1 class="text-3xl font-bold mb-8 text-indigo-900 dark:text-indigo-200 tracking-wide">Current Discussions</h1>

      <!-- Search and Sort -->
      <div class="flex flex-col sm:flex-row justify-between items-center mb-6 space-y-4 sm:space-y-0 sm:space-x-4">
        <div class="relative w-full sm:w-1/2 lg:w-1/3">
          <input type="text" placeholder="Search discussions..." class="w-full px-4 py-2 pr-10 rounded-md
                                           border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-blue-500
                                           bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 shadow-sm">
          <svg class="absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
        </div>
        <div class="flex w-full sm:w-auto space-x-4">
          <select class="px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-blue-500
                         bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 shadow-sm">
            <option>Sort by: Latest</option>
            <option>Sort by: Popular</option>
            <option>Sort by: Unanswered</option>
          </select>
          <button class="px-5 py-2 rounded-md bg-green-600 dark:bg-green-700 text-white font-semibold shadow-md
                          hover:bg-green-700 dark:hover:bg-green-800 transition-colors duration-200
                          focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
            New Thread
          </button>
        </div>
      </div>

      <!-- Thread List -->
      <div class="space-y-5">

        <!-- Thread Item 1 -->
        <article class="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg shadow-sm
                        border border-gray-200 dark:border-gray-600 hover:shadow-md transition-shadow duration-200">
          <div class="sm:flex sm:justify-between sm:items-start mb-3">
            <h3 class="text-xl font-bold text-indigo-800 dark:text-indigo-300 mb-2 sm:mb-0">
              <a href="#" class="hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-700">Impact of La Niña on Global Crop Yields This Year</a>
            </h3>
            <span class="text-sm text-gray-500 dark:text-gray-400 flex-shrink-0">2 days ago</span>
          </div>
          <p class="text-gray-700 dark:text-gray-300 mb-4 line-clamp-2">Discussing the latest climate models and their predictions for agricultural productivity based on La Niña's influence...</p>
          <div class="flex items-center text-sm text-gray-600 dark:text-gray-400">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-3 border border-gray-300 dark:border-gray-500">
            <span>Posted by <span class="font-medium text-blue-700 dark:text-blue-300">ClimateMaster</span></span>
            <span class="mx-3 text-gray-400 dark:text-gray-500">|</span>
            <span>15 Replies</span>
            <span class="ml-auto flex items-center">
              <svg class="w-5 h-5 mr-1 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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>
              32 Likes
            </span>
          </div>
        </article>

        <!-- Thread Item 2 -->
        <article class="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg shadow-sm
                        border border-gray-200 dark:border-gray-600 hover:shadow-md transition-shadow duration-200">
          <div class="sm:flex sm:justify-between sm:items-start mb-3">
            <h3 class="text-xl font-bold text-indigo-800 dark:text-indigo-300 mb-2 sm:mb-0">
              <a href="#" class="hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-700">How accurate are long-range hurricane season predictions?</a>
            </h3>
            <span class="text-sm text-gray-500 dark:text-gray-400 flex-shrink-0">1 week ago</span>
          </div>
          <p class="text-gray-700 dark:text-gray-300 mb-4 line-clamp-2">Exploring the methodologies behind seasonal hurricane forecasts and their historical reliability, with insights from meteorologists...</p>
          <div class="flex items-center text-sm text-gray-600 dark:text-gray-400">
            <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-3 border border-gray-300 dark:border-gray-500">
            <span>Posted by <span class="font-medium text-blue-700 dark:text-blue-300">StormChaser88</span></span>
            <span class="mx-3 text-gray-400 dark:text-gray-500">|</span>
            <span>8 Replies</span>
            <span class="ml-auto flex items-center">
              <svg class="w-5 h-5 mr-1 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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>
              21 Likes
            </span>
          </div>
        </article>

        <!-- Thread Item 3 -->
        <article class="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg shadow-sm
                        border border-gray-200 dark:border-gray-600 hover:shadow-md transition-shadow duration-200">
          <div class="sm:flex sm:justify-between sm:items-start mb-3">
            <h3 class="text-xl font-bold text-indigo-800 dark:text-indigo-300 mb-2 sm:mb-0">
              <a href="#" class="hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-700">Your local weather station setup - share tips!</a>
            </h3>
            <span class="text-sm text-gray-500 dark:text-gray-400 flex-shrink-0">1 month ago</span>
          </div>
          <p class="text-gray-700 dark:text-gray-300 mb-4 line-clamp-2">A thread for enthusiasts to share their personal weather station configurations, sensor recommendations, and data analysis software...</p>
          <div class="flex items-center text-sm text-gray-600 dark:text-gray-400">
            <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-3 border border-gray-300 dark:border-gray-500">
            <span>Posted by <span class="font-medium text-blue-700 dark:text-blue-300">WeatherGeek</span></span>
            <span class="mx-3 text-gray-400 dark:text-gray-500">|</span>
            <span>24 Replies</span>
            <span class="ml-auto flex items-center">
              <svg class="w-5 h-5 mr-1 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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>
              48 Likes
            </span>
          </div>
        </article>

      </div>

      <!-- Pagination -->
      <nav class="mt-8 flex justify-center" aria-label="Pagination">
        <ul class="flex items-center space-x-2">
          <li>
            <a href="#" class="px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 
                           bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 transition-colors duration-200 
                           hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
              <span class="sr-only">Previous</span>
              &laquo;
            </a>
          </li>
          <li>
            <a href="#" class="px-3 py-2 rounded-md border border-blue-500 dark:border-blue-600 
                           bg-blue-500 dark:bg-blue-600 text-white font-medium transition-colors duration-200 
                           hover:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
              1
            </a>
          </li>
          <li>
            <a href="#" class="px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 
                           bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 transition-colors duration-200 
                           hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
              2
            </a>
          </li>
          <li>
            <a href="#" class="px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 
                           bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 transition-colors duration-200 
                           hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
              3
            </a>
          </li>
          <li>
            <a href="#" class="px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 
                           bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 transition-colors duration-200 
                           hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
              <span class="sr-only">Next</span>
              &raquo;
            </a>
          </li>
        </ul>
      </nav>

    </main>

  </div>

</div>

Portfolio-Minimalist-Triadic-Complex-Footer

A complex, minimalist-style footer for a portfolio website, using a triadic color scheme. Includes navigation links, social media icons, copyright, and a call-to-action for contact, with full responsiveness and dark mode support.

Open Preview

                <footer class="bg-blue-50 dark:bg-gray-950 text-gray-800 dark:text-gray-100 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 lg:grid-cols-5 gap-8">
    
    <div class="col-span-full lg:col-span-1 flex flex-col items-center md:items-start mb-6 md:mb-0">
      <a href="#" class="text-2xl font-bold tracking-tight text-orange-600 dark:text-teal-400 mb-4">
        Your Portfolio
      </a>
      <p class="text-center md:text-left text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
        Showcasing creative work and innovative solutions.
      </p>
    </div>

    <div class="col-span-full md:col-span-1 lg:col-span-1">
      <h3 class="text-lg font-semibold text-orange-600 dark:text-teal-400 mb-4 text-center md:text-left">Quick Links</h3>
      <ul class="space-y-3 text-center md:text-left">
        <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">Home</a></li>
        <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">Projects</a></li>
        <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">Services</a></li>
        <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">About Me</a></li>
      </ul>
    </div>

    <div class="col-span-full md:col-span-1 lg:col-span-1">
      <h3 class="text-lg font-semibold text-orange-600 dark:text-teal-400 mb-4 text-center md:text-left">Resources</h3>
      <ul class="space-y-3 text-center md:text-left">
        <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">Blog</a></li>
        <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">Case Studies</a></li>
        <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">Client Testimonials</a></li>
        <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">FAQs</a></li>
      </ul>
    </div>

    <div class="col-span-full md:col-span-1 lg:col-span-1">
      <h3 class="text-lg font-semibold text-orange-600 dark:text-teal-400 mb-4 text-center md:text-left">Get in touch</h3>
      <div class="text-center md:text-left space-y-3">
        <p class="text-gray-700 dark:text-gray-300">123 Creative Studio, City, Country</p>
        <p class="text-gray-700 dark:text-gray-300">[email protected]</p>
        <p class="text-gray-700 dark:text-gray-300">+1 (555) 123-4567</p>
      </div>
    </div>

    <div class="col-span-full md:col-span-4 lg:col-span-1 flex flex-col items-center lg:items-end justify-between">
      <h3 class="text-lg font-semibold text-orange-600 dark:text-teal-400 mb-4">Socials</h3>
      <div class="flex space-x-6 mb-8 lg:mb-0">
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.502 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22C17.361 21.088 22 16.991 22 12z" clip-rule="evenodd" />
          </svg>
          <span class="sr-only">Facebook</span>
        </a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.002 3.797.048.85.04 1.488.165 1.802.272.937.333 1.404 1.093 1.487 2.305.047.508.09 1.109.09 3.003v.404c0 2.441-.001 2.784-.048 3.797-.04.85-.165 1.487-.272 1.802-.333.937-1.093 1.404-2.305 1.488-.508.047-1.109.09-3.003.09h-.404c-2.441 0-2.784-.001-3.797-.048-.85-.04-1.487-.165-1.802-.272-.937-.333-1.404-1.093-1.488-2.305-.047-.508-.09-1.109-.09-3.003v-.404c0-2.43.001-2.784.048-3.797.04-.85.165-1.488.272-1.802.333-.937 1.093-1.404 2.305-1.488.508-.047 1.109-.09 3.003-.09h.404ZM12 2.163c-3.178 0-3.578.013-4.858.077-.975.051-1.666.241-2.185.421-.504.179-.902.439-1.302.839-.399.4-.659.798-.839 1.302-.18.519-.37 1.21-.421 2.185-.064 1.28-.076 1.679-.076 4.858 0 3.178.013 3.577.076 4.858.051.975.241 1.667.421 2.186.179.504.439.902.839 1.302.4.399.798.659 1.302.839.519.18 1.21.37 2.185.421 1.28.064 1.679.076 4.858.076 3.178 0 3.577-.013 4.858-.076.975-.051 1.668-.241 2.186-.421.504-.179.902-.439 1.302-.839.399-.4.659-.798.839-1.302.18-.519.37-1.21.421-2.186.064-1.28.076-1.678.076-4.858 0-3.178-.013-3.578-.076-4.858-.051-.975-.241-1.666-.421-2.185-.179-.504-.439-.902-.839-1.302-.4-.399-.798-.659-1.302-.839-.519-.18-1.21-.37-2.186-.421C15.577 2.176 15.178 2.163 12 2.163Zm0 3.024c3.484 0 6.31 2.825 6.31 6.31 0 3.484-2.826 6.31-6.31 6.31-3.484 0-6.31-2.826-6.31-6.31 0-3.485 2.826-6.31 6.31-6.31Zm0 1.938c-2.486 0-4.5 2.014-4.5 4.5 0 2.485 2.014 4.5 4.5 4.5 2.485 0 4.5-2.015 4.5-4.5 0-2.486-2.015-4.5-4.5-4.5Zm6.55-.992a1.08 1.08 0 1 0 0 2.16 1.08 1.08 0 0 0 0-2.16Z" clip-rule="evenodd" />
          </svg>
          <span class="sr-only">Instagram</span>
        </a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M8.29 20.251c-.034.004-.067.006-.101.006C7.062 20.251 2 15.188 2 8.79C2 4.717 5.5.94 10.366 2.083c3.085.736 5.8 3.513 6.942 6.784L21.2 21.4c-.032.096-.064.192-.096.288L22 22.428V20h-4c-2.209 0-4-1.791-4-4V6h4V4H6v2H2c0 2.209 1.791 4 4 4h4v4h4v4h4Z" />
          </svg>
          <span class="sr-only">LinkedIn</span>
        </a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12 2C6.475 2 2 6.475 2 12c0 4.296 2.65 7.914 6.36 9.387.52.09.712-.224.712-.49v-1.72c-2.434.529-2.956-1.173-2.956-1.173-.424-1.077-1.034-1.36-1.034-1.36-.84-.576.064-.565.064-.565.93.065 1.417.95 1.417.95.824 1.41 2.156 1.004 2.684.767.085-.597.322-1.004.587-1.233-2.052-.232-4.212-1.026-4.212-4.577 0-1.008.358-1.83.945-2.472-.095-.232-.41-1.174.09-2.447 0 0 .77-.247 2.52.945.73-.204 1.5-.31 2.29-.31.79 0 1.56.106 2.29.31 1.75-1.192 2.52-.945 2.52-.945.5 1.273.187 2.215.093 2.447.587.642.945 1.464.945 2.472 0 3.56-2.164 4.343-4.223 4.57.34.293.645.867.645 1.758v2.59c0 .267.19.58.716.49C19.35 19.914 22 16.296 22 12c0-5.525-4.475-10-10-10Z" />
          </svg>
          <span class="sr-only">GitHub</span>
        </a>
      </div>
    </div>

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

Like/Reaction Buttons Component

A complex, minimalist set of reaction buttons for a music/audio platform, featuring vibrant colors, dark mode support, and full responsiveness.

Open Preview

                <div class="flex flex-col items-center justify-center p-4 sm:p-6 md:p-8 bg-gradient-to-br from-purple-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 font-sans">

  <div class="flex flex-wrap items-center justify-center gap-3 sm:gap-4 p-3 sm:p-5 md:p-6 rounded-2xl shadow-xl bg-white/90 dark:bg-gray-800/90 backdrop-blur-sm border border-fuchsia-100 dark:border-gray-700 max-w-xl mx-auto">

    <!-- Heart Button -->
    <button class="flex items-center gap-2 px-4 py-2 rounded-full transition-all duration-300 ease-in-out
                   text-red-600 bg-red-50 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-white
                   dark:text-red-400 dark:bg-red-900 dark:bg-opacity-30 dark:hover:bg-red-900 dark:focus:ring-red-400 dark:focus:ring-offset-gray-800">
      <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none" 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"/>
      </svg>
      <span class="text-sm font-semibold hidden sm:inline">Liked</span>
      <span class="text-sm font-semibold">1.2K</span>
    </button>

    <!-- Fire Button -->
    <button class="flex items-center gap-2 px-4 py-2 rounded-full transition-all duration-300 ease-in-out
                   text-orange-600 bg-orange-50 hover:bg-orange-100 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-white
                   dark:text-orange-400 dark:bg-orange-900 dark:bg-opacity-30 dark:hover:bg-orange-900 dark:focus:ring-orange-400 dark:focus:ring-offset-gray-800">
      <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 2.69C10.74 1.76 9.07 1 7.5 1 4.42 1 2 3.42 2 6.5c0 2.21 1.25 4.14 3.12 5.17C7.45 13.9 12 18.5 12 18.5s4.55-4.6 6.88-6.83C20.75 10.64 22 8.71 22 6.5c0-3.08-2.42-5.5-5.5-5.5-1.57 0-3.24.76-4.5 1.76zM13.43 14L12 17.5l-1.43-3.5L7 11.5l3.5-1.43L12 7l1.43 3.07L17 11.5l-3.57 2.5z"/>
      </svg>
      <span class="text-sm font-semibold hidden sm:inline">Fiery</span>
      <span class="text-sm font-semibold">543</span>
    </button>

    <!-- Clap Button -->
    <button class="flex items-center gap-2 px-4 py-2 rounded-full transition-all duration-300 ease-in-out
                   text-teal-600 bg-teal-50 hover:bg-teal-100 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 focus:ring-offset-white
                   dark:text-teal-400 dark:bg-teal-900 dark:bg-opacity-30 dark:hover:bg-teal-900 dark:focus:ring-teal-400 dark:focus:ring-offset-gray-800">
      <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M18 10h-4V4h-4v6H6l6 6 6-6zM4 20h16v2H4z"/>
      </svg>
      <span class="text-sm font-semibold hidden sm:inline">Clap</span>
      <span class="text-sm font-semibold">891</span>
    </button>

    <!-- Headphone Button -->
    <button class="flex items-center gap-2 px-4 py-2 rounded-full transition-all duration-300 ease-in-out
                   text-blue-600 bg-blue-50 hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white
                   dark:text-blue-400 dark:bg-blue-900 dark:bg-opacity-30 dark:hover:bg-blue-900 dark:focus:ring-blue-400 dark:focus:ring-offset-gray-800">
      <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 1A7 7 0 005 8v6a7 7 0 0014 0V8a7 7 0 00-7-7zm0 2a5 5 0 015 5v6a5 5 0 01-10 0V8a5 5 0 015-5zm-5 8h-2v3h2v-3zm10 0h-2v3h2v-3zm-5 5a2 2 0 110 4 2 2 0 010-4z"/>
      </svg>
      <span class="text-sm font-semibold hidden sm:inline">Vibe</span>
      <span class="text-sm font-semibold">300</span>
    </button>

    <!-- Share Button -->
    <button class="flex items-center gap-2 px-4 py-2 rounded-full transition-all duration-300 ease-in-out
                   text-purple-600 bg-purple-50 hover:bg-purple-100 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-white
                   dark:text-purple-400 dark:bg-purple-900 dark:bg-opacity-30 dark:hover:bg-purple-900 dark:focus:ring-purple-400 dark:focus:ring-offset-gray-800">
      <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.52.48 1.2.77 1.96.77 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L6.04 9.11c-.52-.48-1.2-.77-1.96-.77-1.66 0-3 1.34-3 3s1.34 3 3 3c.76 0 1.44-.3 1.96-.77l7.05 4.11c-.05.23-.09.46-.09.7 0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3z"/>
      </svg>
      <span class="text-sm font-semibold hidden sm:inline">Share</span>
    </button>

  </div>

</div>

Paper/Print-inspired Booking Card

A simple, responsive booking/reservation card component with a paper/print-inspired design and earth-tone color scheme, featuring dark mode support. Suitable for displaying appointment slots or reservation details.

Open Preview

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

  <div class="max-w-sm mx-auto bg-white dark:bg-stone-800 rounded-lg shadow-md overflow-hidden transition-all duration-300 md:max-w-md lg:max-w-lg border border-stone-200 dark:border-stone-700 hover:shadow-lg dark:hover:shadow-stone-700/50">
    
    <!-- Paper-like Header -->
    <div class="relative bg-gradient-to-r from-stone-200 to-stone-300 dark:from-stone-700 dark:to-stone-700/80 p-4 border-b-2 border-stone-300 dark:border-stone-700/80 text-stone-800 dark:text-stone-100 print:text-black">
      <div class="absolute inset-0 bg-paper-texture opacity-20 dark:opacity-10 pointer-events-none"></div>
      <h3 class="text-xl font-serif tracking-wide">Appointment Slot</h3>
      <p class="text-sm text-stone-600 dark:text-stone-300 italic">Book your session now</p>
    </div>

    <!-- Content Area resembling printed text -->
    <div class="p-6 space-y-4 text-stone-700 dark:text-stone-300">
      
      <!-- Appointment Details -->
      <div class="flex items-center space-x-3">
        <svg class="w-6 h-6 flex-shrink-0 text-stone-600 dark:text-stone-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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>
        <div>
          <p class="text-lg font-medium">Wednesday, October 26, 2024</p>
          <p class="text-sm text-stone-600 dark:text-stone-400">Available All Day</p>
        </div>
      </div>

      <div class="flex items-center space-x-3">
        <svg class="w-6 h-6 flex-shrink-0 text-stone-600 dark:text-stone-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <div>
          <p class="text-lg font-medium">10:00 AM - 11:00 AM</p>
          <p class="text-sm text-stone-600 dark:text-stone-400">1 hour session</p>
        </div>
      </div>

      <div class="flex items-center space-x-3">
        <svg class="w-6 h-6 flex-shrink-0 text-stone-600 dark:text-stone-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
        </svg>
        <div>
          <p class="text-lg font-medium">Virtual Meeting (Zoom)</p>
          <p class="text-sm text-stone-600 dark:text-stone-400">Link will be sent after booking</p>
        </div>
      </div>

      <!-- Provider/Context Info (optional) -->
      <div class="pt-4 border-t border-dashed border-stone-300 dark:border-stone-600 flex items-center space-x-4">
        <img class="w-12 h-12 rounded-full object-cover border-2 border-stone-300 dark:border-stone-500" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Alice Johnson">
        <div>
          <p class="text-base font-semibold">With Dr. Alice Johnson</p>
          <p class="text-sm text-stone-600 dark:text-stone-400">Consultation Specialist</p>
        </div>
      </div>

    </div>

    <!-- Actions resembling perforation or torn paper edge -->
    <div class="p-6 flex justify-end bg-stone-50 dark:bg-stone-900 border-t border-stone-200 dark:border-stone-700">
      <button class="px-6 py-2 bg-emerald-700 text-white rounded-md hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800 transition-colors duration-200 shadow-sm text-sm font-medium tracking-wide dark:hover:bg-emerald-600">
        Book Now
      </button>
    </div>

  </div>
</div>

User Profiles Component

A simple, responsive user profile card for a marketplace, featuring an organic/nature-inspired design with corporate blue tones and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-900 dark:to-blue-950 min-h-screen flex items-center justify-center font-sans">
  <div class="max-w-xs w-full bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl border border-blue-200 dark:border-blue-700 relative">
    <!-- Organic Top Curve -->
    <div class="absolute inset-x-0 top-0 h-24 bg-gradient-to-br from-blue-300 to-blue-500 dark:from-blue-600 dark:to-blue-800 rounded-b-full transform scale-x-150 -translate-y-1/2 opacity-75"></div>

    <div class="relative pt-12 pb-6 px-6 text-center">
      <img class="w-24 h-24 rounded-full mx-auto mb-4 border-4 border-white dark:border-gray-800 shadow-md transform transition-transform duration-300 ease-in-out hover:scale-110" src="https://randomuser.me/api/portraits/women/42.jpg" alt="Profile Avatar">
      
      <h3 class="text-xl font-semibold text-blue-900 dark:text-gray-100 mb-1">Jane Doe</h3>
      <p class="text-sm text-blue-600 dark:text-blue-300 mb-4">Verified Vendor</p>
      
      <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed mb-4">
        Providing high-quality handcrafted goods to homes worldwide. Passionate about unique designs and customer satisfaction.
      </p>
      
      <div class="flex justify-center space-x-3 mb-6">
        <div class="flex items-center text-blue-700 dark:text-blue-400 text-sm">
          <svg class="w-4 h-4 mr-1 fill-current" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
          </svg>
          <span>120 Sales</span>
        </div>
        <div class="flex items-center text-blue-700 dark:text-blue-400 text-sm">
          <svg class="w-4 h-4 mr-1 fill-current" viewBox="0 0 20 20" fill="currentColor">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.175 0l-2.817 2.034c-.784.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.517c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" />
          </svg>
          <span>4.9 (88 Reviews)</span>
        </div>
      </div>

      <a href="#" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-full transition duration-300 ease-in-out transform hover:-translate-y-0.5 shadow-md shadow-blue-300 dark:shadow-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
        View Shop
      </a>
    </div>
  </div>
</div>

Memphis Sepia Dashboard

A dashboard component with a Memphis Design aesthetic, featuring bold geometric shapes and a warm sepia/brown color palette, suitable for business and corporate websites. Includes full responsiveness and dark mode support.

Open Preview

                <div class="min-h-screen bg-amber-50 dark:bg-stone-900 font-sans p-4 sm:p-8">
    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">

        <!-- Header Section -->
        <div class="md:col-span-3 lg:col-span-4 bg-amber-200 dark:bg-stone-700 p-6 rounded-xl shadow-lg border-2 border-stone-800 dark:border-amber-50 relative overflow-hidden">
            <div class="absolute top-0 left-0 w-32 h-32 bg-amber-400 dark:bg-amber-600 transform rotate-45 -translate-x-1/2 -translate-y-1/2"></div>
            <div class="absolute bottom-0 right-0 w-24 h-24 bg-stone-500 dark:bg-stone-800 transform -rotate-45 translate-x-1/3 translate-y-1/3"></div>
            <div class="relative z-10 flex flex-col sm:flex-row justify-between items-start sm:items-center">
                <div>
                    <h1 class="text-3xl sm:text-4xl font-extrabold text-stone-800 dark:text-amber-50 mb-2">Welcome, Marketing Team!</h1>
                    <p class="text-stone-700 dark:text-amber-100 text-lg">Here's your dashboard overview for today.</p>
                </div>
                <div class="mt-4 sm:mt-0">
                    <button class="px-6 py-3 bg-stone-800 dark:bg-amber-50 text-amber-50 dark:text-stone-800 rounded-full font-semibold shadow-md hover:bg-stone-700 dark:hover:bg-amber-100 transition duration-300 relative overflow-hidden group">
                        <span class="relative z-10">New Report</span>
                        <div class="absolute inset-0 bg-stone-900 dark:bg-amber-100 transform -skew-x-12 scale-0 group-hover:scale-100 transition-transform duration-300 origin-left"></div>
                    </button>
                </div>
            </div>
        </div>

        <!-- Card 1: Sales Overview -->
        <div class="bg-amber-300 dark:bg-stone-600 p-6 rounded-xl shadow-lg border-2 border-stone-800 dark:border-amber-50 relative overflow-hidden">
            <div class="absolute top-6 -right-8 w-24 h-24 bg-stone-500 dark:bg-amber-700 rounded-full"></div>
            <div class="absolute bottom-2 -left-6 w-32 h-16 bg-amber-400 dark:bg-stone-800 transform skew-y-6"></div>
            <div class="relative z-10">
                <h2 class="text-xl font-bold text-stone-800 dark:text-amber-50 mb-3">Total Sales</h2>
                <p class="text-4xl font-extrabold text-stone-900 dark:text-amber-100 mb-4">$12,450</p>
                <div class="flex items-center text-green-700 dark:text-green-300">
                    <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10.586 3H7a1 1 0 010-2h4a1 1 0 011 1v4a1 1 0 01-2 0V4.414l-5.293 5.293a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
                    <span class="font-medium">+5.2% last month</span>
                </div>
            </div>
        </div>

        <!-- Card 2: New Customers -->
        <div class="bg-stone-400 dark:bg-amber-700 p-6 rounded-xl shadow-lg border-2 border-stone-800 dark:border-amber-50 relative overflow-hidden">
            <div class="absolute top-0 left-0 w-24 h-24 bg-amber-500 dark:bg-stone-900 transform rotate-12 -translate-x-1/4 -translate-y-1/4"></div>
            <div class="absolute bottom-0 right-0 w-16 h-16 bg-stone-700 dark:bg-amber-500 rounded-full"></div>
            <div class="relative z-10">
                <h2 class="text-xl font-bold text-stone-800 dark:text-amber-50 mb-3">New Customers</h2>
                <p class="text-4xl font-extrabold text-stone-900 dark:text-amber-100 mb-4">289</p>
                <div class="flex items-center text-red-700 dark:text-red-300">
                    <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414L9.414 17H13a1 1 0 010 2H9a1 1 0 01-1-1v-4a1 1 0 012 0v1.586l5.293-5.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
                    <span class="font-medium">-1.5% last month</span>
                </div>
            </div>
        </div>

        <!-- Card 3: Website Traffic -->
        <div class="bg-stone-200 dark:bg-stone-800 p-6 rounded-xl shadow-lg border-2 border-stone-800 dark:border-amber-50 relative overflow-hidden">
            <div class="absolute top-4 right-4 w-12 h-12 bg-amber-400 dark:bg-amber-600 transform rotate-45"></div>
            <div class="absolute bottom-0 left-0 w-16 h-16 bg-stone-500 dark:bg-stone-700 rounded-br-full"></div>
            <div class="relative z-10">
                <h2 class="text-xl font-bold text-stone-800 dark:text-amber-50 mb-3">Website Traffic</h2>
                <p class="text-4xl font-extrabold text-stone-900 dark:text-amber-100 mb-4">78,123</p>
                <div class="flex items-center text-green-700 dark:text-green-300">
                    <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10.586 3H7a1 1 0 010-2h4a1 1 0 011 1v4a1 1 0 01-2 0V4.414l-5.293 5.293a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
                    <span class="font-medium">+8.7% last month</span>
                </div>
            </div>
        </div>

        <!-- Card 4: Average Order Value (smaller, for lg screens) -->
        <div class="hidden lg:block bg-amber-100 dark:bg-stone-700 p-6 rounded-xl shadow-lg border-2 border-stone-800 dark:border-amber-50 relative overflow-hidden">
            <div class="absolute top-0 left-0 w-20 h-20 bg-stone-400 dark:bg-amber-600 transform -rotate-45 translate-x-1/3 -translate-y-1/3"></div>
            <div class="absolute bottom-0 right-0 w-16 h-16 bg-amber-500 dark:bg-stone-900 transform rotate-45 translate-x-1/4 translate-y-1/4"></div>
            <div class="relative z-10">
                <h2 class="text-xl font-bold text-stone-800 dark:text-amber-50 mb-3">Average Order</h2>
                <p class="text-4xl font-extrabold text-stone-900 dark:text-amber-100 mb-4">$43.75</p>
                <div class="flex items-center text-green-700 dark:text-green-300">
                    <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10.586 3H7a1 1 0 010-2h4a1 1 0 011 1v4a1 1 0 01-2 0V4.414l-5.293 5.293a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
                    <span class="font-medium">+2.1% this month</span>
                </div>
            </div>
        </div>

        <!-- Large Card: Recent Activity -->
        <div class="md:col-span-2 bg-stone-300 dark:bg-stone-700 p-6 rounded-xl shadow-lg border-2 border-stone-800 dark:border-amber-50 relative overflow-hidden">
            <div class="absolute top-0 right-0 w-32 h-32 bg-amber-400 dark:bg-amber-600 transform rotate-12 translate-x-1/4 -translate-y-1/4"></div>
            <div class="relative z-10">
                <h2 class="text-2xl font-bold text-stone-800 dark:text-amber-50 mb-4">Recent Activity</h2>
                <ul class="space-y-4">
                    <li class="flex items-center bg-amber-50 dark:bg-stone-800 p-3 rounded-lg shadow-sm border border-stone-400 dark:border-amber-50">
                        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar">
                        <div>
                            <p class="text-stone-800 dark:text-amber-50"><span class="font-semibold">Jane Doe</span> purchased 'Product XYZ'</p>
                            <p class="text-sm text-stone-600 dark:text-amber-200">15 minutes ago</p>
                        </div>
                    </li>
                    <li class="flex items-center bg-amber-50 dark:bg-stone-800 p-3 rounded-lg shadow-sm border border-stone-400 dark:border-amber-50">
                        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar">
                        <div>
                            <p class="text-stone-800 dark:text-amber-50"><span class="font-semibold">John Smith</span> signed up for newsletter</p>
                            <p class="text-sm text-stone-600 dark:text-amber-200">1 hour ago</p>
                        </div>
                    </li>
                    <li class="flex items-center bg-amber-50 dark:bg-stone-800 p-3 rounded-lg shadow-sm border border-stone-400 dark:border-amber-50">
                        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/23.jpg" alt="Avatar">
                        <div>
                            <p class="text-stone-800 dark:text-amber-50"><span class="font-semibold">Emily White</span> reviewed 'Service ABC'</p>
                            <p class="text-sm text-stone-600 dark:text-amber-200">3 hours ago</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <!-- Large Card: Quick Links -->
        <div class="md:col-span-1 lg:col-span-2 bg-amber-200 dark:bg-stone-600 p-6 rounded-xl shadow-lg border-2 border-stone-800 dark:border-amber-50 relative overflow-hidden">
            <div class="absolute top-0 left-0 w-24 h-24 bg-stone-500 dark:bg-amber-700 transform skew-y-12 -translate-x-1/2"></div>
            <div class="absolute bottom-0 right-0 w-20 h-20 bg-amber-400 dark:bg-stone-800 rounded-tl-full"></div>
            <div class="relative z-10">
                <h2 class="text-2xl font-bold text-stone-800 dark:text-amber-50 mb-4">Quick Access</h2>
                <nav>
                    <ul class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <li class="group">
                            <a href="#" class="flex items-center p-4 bg-amber-300 dark:bg-stone-500 rounded-lg shadow-md hover:scale-105 transition duration-300 border-2 border-transparent group-hover:border-stone-800 dark:group-hover:border-amber-50">
                                <svg class="w-6 h-6 text-stone-800 dark:text-amber-50 mr-3" fill="currentColor" viewBox="0 0 20 20"><path d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 001.946.806L14.75 1.25M2 17.5V14h6v3.5l-2 2-2-2zM12 14v3.5l2 2 2-2V14h-4z"></path></svg>
                                <span class="font-semibold text-stone-800 dark:text-amber-50">Analytics</span>
                            </a>
                        </li>
                        <li class="group">
                            <a href="#" class="flex items-center p-4 bg-stone-400 dark:bg-amber-600 rounded-lg shadow-md hover:scale-105 transition duration-300 border-2 border-transparent group-hover:border-stone-800 dark:group-hover:border-amber-50">
                                <svg class="w-6 h-6 text-stone-800 dark:text-amber-50 mr-3" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path></svg>
                                <span class="font-semibold text-stone-800 dark:text-amber-50">Messages</span>
                            </a>
                        </li>
                        <li class="group">
                            <a href="#" class="flex items-center p-4 bg-amber-300 dark:bg-stone-500 rounded-lg shadow-md hover:scale-105 transition duration-300 border-2 border-transparent group-hover:border-stone-800 dark:group-hover:border-amber-50">
                                <svg class="w-6 h-6 text-stone-800 dark:text-amber-50 mr-3" fill="currentColor" viewBox="0 0 20 20"><path d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM11 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2h-2zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2h-2z"></path></svg>
                                <span class="font-semibold text-stone-800 dark:text-amber-50">Reports</span>
                            </a>
                        </li>
                        <li class="group">
                            <a href="#" class="flex items-center p-4 bg-stone-400 dark:bg-amber-600 rounded-lg shadow-md hover:scale-105 transition duration-300 border-2 border-transparent group-hover:border-stone-800 dark:group-hover:border-amber-50">
                                <svg class="w-6 h-6 text-stone-800 dark:text-amber-50 mr-3" fill="currentColor" viewBox="0 0 20 20"><path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zm-6 9A6 6 0 0012 9a6 6 0 00-6 6zM13 13.5a2.5 2.5 0 00-5 0M9 20a1 1 0 110-2h2a1 1 0 110 2H9z"></path></svg>
                                <span class="font-semibold text-stone-800 dark:text-amber-50">Settings</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>

    </div>
</div>

Brutalist E-commerce Mega Menu

A complex, brutalist-style mega menu for e-commerce, featuring high contrast and professional blue tones. Fully responsive with dark mode support.

Open Preview

                <nav class="bg-blue-950 dark:bg-zinc-900 border-b-8 border-yellow-400 dark:border-yellow-600 font-mono relative z-50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-20 items-center">
      <div class="flex items-center">
        <a href="#" class="text-yellow-400 dark:text-yellow-600 text-3xl font-extrabold tracking-tighter uppercase border-r-4 border-yellow-400 dark:border-yellow-600 pr-4">BRUTAL<span class="block text-blue-300 dark:text-blue-500 text-sm normal-case font-normal leading-none -mt-1">Store</span></a>
      </div>
      <div class="hidden md:flex items-center space-x-12">
        <div x-data="{ open: false }" class="relative group">
          <button @click="open = !open" @mouseleave="open = false" class="text-blue-200 dark:text-blue-400 hover:text-white dark:hover:text-white uppercase font-bold text-lg tracking-wider transition duration-150 ease-in-out py-2 border-b-4 border-transparent hover:border-blue-400 dark:hover:border-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-blue-600 focus:ring-opacity-70">Categories</button>
          <div x-show="open" @click.outside="open = false" x-transition:enter="transition ease-out duration-300 transform" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-200 transform" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-2" class="absolute left-0 mt-4 w-[900px] bg-blue-900 dark:bg-zinc-800 border-8 border-yellow-400 dark:border-yellow-600 shadow-2xl origin-top-left p-8 grid grid-cols-4 gap-8 text-white brutal-mega-menu" style="display: none;">
            <div>
              <h3 class="text-yellow-400 dark:text-yellow-600 uppercase font-extrabold text-xl mb-4 border-b-4 border-blue-400 dark:border-blue-600 pb-2">Electronics</h3>
              <ul class="space-y-2">
                <li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Smartphones</a></li>
                <li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Laptops</a></li>
                <li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Cameras</a></li>
                <li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Gaming Consoles</a></li>
                <li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Wearables</a></li>
              </ul>
            </div>
            <div>
              <h3 class="text-yellow-400 dark:text-yellow-600 uppercase font-extrabold text-xl mb-4 border-b-4 border-blue-400 dark:border-blue-600 pb-2">Apparel</h3>
              <ul class="space-y-2">
                <li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Men's</a></li>
                <li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Women's</a></li>
                <li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Kids'</a></li>
                <li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Accessories</a></li>
                <li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Footwear</a></li>
              </ul>
            </div>
            <div>
              <h3 class="text-yellow-400 dark:text-yellow-600 uppercase font-extrabold text-xl mb-4 border-b-4 border-blue-400 dark:border-blue-600 pb-2">Home & Kitchen</h3>
              <ul class="space-y-2">
                <li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Furniture</a></li>
                <li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Decor</a></li>
                <li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Cookware</a></li>
                <li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Appliances</a></li>
                <li><a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white text-lg transition-colors duration-200">Bedding</a></li>
              </ul>
            </div>
            <div class="flex flex-col justify-between">
              <div class="bg-blue-700 dark:bg-zinc-700 p-4 border-4 border-blue-400 dark:border-blue-600 shadow-lg">
                <img src="https://picsum.photos/300/200?random=1" alt="Featured Product" class="w-full h-32 object-cover object-center border-4 border-yellow-400 dark:border-yellow-600 mb-4 brutal-image">
                <h4 class="text-yellow-400 dark:text-yellow-600 text-lg font-bold mb-2">Weekly Deals!</h4>
                <p class="text-blue-100 dark:text-blue-300 text-sm mb-4">Don't miss out on our limited time offers. New discounts added every Monday!</p>
                <a href="#" class="inline-block px-4 py-2 bg-yellow-400 dark:bg-yellow-600 text-blue-950 dark:text-zinc-900 font-bold uppercase text-sm hover:bg-yellow-500 dark:hover:bg-yellow-700 transition-colors duration-200 border-2 border-transparent hover:border-blue-950 dark:hover:border-zinc-900 brutal-button">Shop Now</a>
              </div>
            </div>
          </div>
        </div>
        <a href="#" class="text-blue-200 dark:text-blue-400 hover:text-white dark:hover:text-white uppercase font-bold text-lg tracking-wider transition duration-150 ease-in-out py-2 border-b-4 border-transparent hover:border-blue-400 dark:hover:border-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-blue-600 focus:ring-opacity-70">New Arrivals</a>
        <a href="#" class="text-blue-200 dark:text-blue-400 hover:text-white dark:hover:text-white uppercase font-bold text-lg tracking-wider transition duration-150 ease-in-out py-2 border-b-4 border-transparent hover:border-blue-400 dark:hover:border-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-blue-600 focus:ring-opacity-70">Sale</a>
        <a href="#" class="text-blue-200 dark:text-blue-400 hover:text-white dark:hover:text-white uppercase font-bold text-lg tracking-wider transition duration-150 ease-in-out py-2 border-b-4 border-transparent hover:border-blue-400 dark:hover:border-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-blue-600 focus:ring-opacity-70">Contact</a>
      </div>
      <div class="flex items-center space-x-6">
        <button class="relative text-blue-200 dark:text-blue-400 hover:text-white dark:hover:text-white focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-blue-600 focus:ring-opacity-70 transition duration-150 ease-in-out">
          <svg class="h-7 w-7" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H4A2 2 0 002 10v4a2 2 0 002 2h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2V6a4 4 0 00-4-4zm3 8V6a3 3 0 10-6 0v4h6z" clip-rule="evenodd"></path>
          </svg>
          <span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-blue-950 dark:text-zinc-900 transform translate-x-1/2 -translate-y-1/2 bg-yellow-400 dark:bg-yellow-600 rounded-full border-2 border-blue-950 dark:border-zinc-900">3</span>
        </button>
        <button class="text-blue-200 dark:text-blue-400 hover:text-white dark:hover:text-white focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-blue-600 focus:ring-opacity-70 transition duration-150 ease-in-out">
          <img class="h-9 w-9 rounded-full border-4 border-blue-400 dark:border-blue-600 brutal-image" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
        </button>
        <button type="button" class="md:hidden inline-flex items-center justify-center p-2 rounded-md text-blue-200 dark:text-blue-400 hover:text-white dark:hover:text-white hover:bg-blue-800 dark:hover:bg-zinc-700 focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-blue-600 focus:ring-opacity-70 transition duration-150 ease-in-out" aria-controls="mobile-menu" aria-expanded="false" x-data="{ open: false }" @click="open = !open">
          <span class="sr-only">Open main menu</span>
          <svg x-show="!open" class="block h-8 w-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <svg x-show="open" class="hidden h-8 w-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <div class="md:hidden" id="mobile-menu" x-data="{ open: false }">
      <div x-show="open" x-transition:enter="transition ease-out duration-300 transform" x-transition:enter-start="opacity-0 scale-y-95" x-transition:enter-end="opacity-100 scale-y-100" x-transition:leave="transition ease-in duration-200 transform" x-transition:leave-start="opacity-100 scale-y-100" x-transition:leave-end="opacity-0 scale-y-95" class="px-4 pt-2 pb-6 space-y-4 font-mono bg-blue-900 dark:bg-zinc-800 border-t-4 border-yellow-400 dark:border-yellow-600 brutal-mobile-menu" style="display: none;">
          <div x-data="{ subOpen: false }" class="relative">
              <button @click="subOpen = !subOpen" class="block uppercase font-bold text-lg text-blue-200 dark:text-blue-400 hover:text-white dark:hover:text-white w-full text-left py-2 border-b-2 border-blue-800 dark:border-zinc-700 brutal-mobile-item focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-blue-600 focus:ring-opacity-70 flex justify-between items-center">
                  Categories
                  <svg class="h-5 w-5 transform" :class="{'rotate-180': subOpen}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                      <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                  </svg>
              </button>
              <div x-show="subOpen" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform -translate-y-2" x-transition:enter-end="opacity-100 transform translate-y-0" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 transform translate-y-0" x-transition:leave-end="opacity-0 transform -translate-y-2" class="pl-4 pr-2 pt-2 space-y-2 bg-blue-800 dark:bg-zinc-700 border-l-4 border-yellow-400 dark:border-yellow-600" style="display: none;">
                  <a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white uppercase text-md py-1 border-b border-blue-700 dark:border-zinc-600 last:border-0 brutal-mobile-sub-item">Electronics</a>
                  <a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white uppercase text-md py-1 border-b border-blue-700 dark:border-zinc-600 last:border-0 brutal-mobile-sub-item">Apparel</a>
                  <a href="#" class="block text-blue-300 dark:text-blue-400 hover:text-white dark:hover:text-white uppercase text-md py-1 border-b border-blue-700 dark:border-zinc-600 last:border-0 brutal-mobile-sub-item">Home & Kitchen</a>
              </div>
          </div>
          <a href="#" class="block uppercase font-bold text-lg text-blue-200 dark:text-blue-400 hover:text-white dark:hover:text-white py-2 brutal-mobile-item border-b-2 border-blue-800 dark:border-zinc-700 focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-blue-600 focus:ring-opacity-70">New Arrivals</a>
          <a href="#" class="block uppercase font-bold text-lg text-blue-200 dark:text-blue-400 hover:text-white dark:hover:text-white py-2 brutal-mobile-item border-b-2 border-blue-800 dark:border-zinc-700 focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-blue-600 focus:ring-opacity-70">Sale</a>
          <a href="#" class="block uppercase font-bold text-lg text-blue-200 dark:text-blue-400 hover:text-white dark:hover:text-white py-2 brutal-mobile-item focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-blue-600 focus:ring-opacity-70">Contact</a>
      </div>
  </div>
</nav>

<!-- Alpine.js is required for x-show and x-data directives -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

Industrial_Sports_Dashboard

A moderate complexity dashboard component for sports/fitness applications with an industrial design style, featuring earth tones and responsive layout with dark mode support. Displays key metrics, recent activities, and team/individual performance.

Open Preview

                <div class="min-h-screen bg-stone-100 text-stone-800 p-4 sm:p-6 lg:p-8 dark:bg-stone-900 dark:text-stone-200">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">

    <!-- Main Content Area -->
    <div class="md:col-span-2 lg:col-span-3 space-y-6">

      <!-- Header Section -->
      <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700">
        <div>
          <h1 class="text-3xl sm:text-4xl font-extrabold text-stone-900 dark:text-stone-100 mb-2">Team Performance Overview</h1>
          <p class="text-lg text-stone-600 dark:text-stone-400">Tracking collective progress and individual achievements.</p>
        </div>
        <div class="mt-4 sm:mt-0 flex items-center space-x-2">
          <button class="flex items-center px-4 py-2 bg-stone-700 text-white rounded-md hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 dark:bg-stone-600 dark:hover:bg-stone-700">
            <svg class="w-5 h-5 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="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path></svg>
            Export Report
          </button>
          <button class="px-4 py-2 bg-amber-600 text-white rounded-md hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:bg-amber-700 dark:hover:bg-amber-800">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            New Activity
          </button>
        </div>
      </div>

      <!-- Key Metrics Section -->
      <section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700 flex flex-col items-center justify-center text-center">
          <p class="text-sm text-stone-500 dark:text-stone-400 uppercase font-semibold mb-2">Total Workouts</p>
          <p class="text-5xl font-extrabold text-stone-900 dark:text-stone-100">1,234</p>
          <p class="text-xs text-green-600 dark:text-green-400 mt-2">+12% this month</p>
        </div>
        <div class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700 flex flex-col items-center justify-center text-center">
          <p class="text-sm text-stone-500 dark:text-stone-400 uppercase font-semibold mb-2">Avg. Intensity</p>
          <p class="text-5xl font-extrabold text-stone-900 dark:text-stone-100">8.5</p>
          <p class="text-xs text-yellow-600 dark:text-yellow-400 mt-2">Stable</p>
        </div>
        <div class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700 flex flex-col items-center justify-center text-center">
          <p class="text-sm text-stone-500 dark:text-stone-400 uppercase font-semibold mb-2">Team Stamina Score</p>
          <p class="text-5xl font-extrabold text-stone-900 dark:text-stone-100">92%</p>
          <p class="text-xs text-red-600 dark:text-red-400 mt-2">-2% since last week</p>
        </div>
      </section>

      <!-- Recent Activities Table -->
      <section class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700">
        <h2 class="text-2xl font-bold text-stone-900 dark:text-stone-100 mb-4">Recent Activities</h2>
        <div class="overflow-x-auto">
          <table class="min-w-full divide-y divide-stone-300 dark:divide-stone-700">
            <thead class="bg-stone-300 dark:bg-stone-700">
              <tr>
                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-stone-600 dark:text-stone-300 uppercase tracking-wider">Activity</th>
                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-stone-600 dark:text-stone-300 uppercase tracking-wider">Date</th>
                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-stone-600 dark:text-stone-300 uppercase tracking-wider">Duration</th>
                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-stone-600 dark:text-stone-300 uppercase tracking-wider">Participants</th>
                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-stone-600 dark:text-stone-300 uppercase tracking-wider">Status</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-stone-200 dark:divide-stone-700">
              <tr>
                <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-stone-900 dark:text-stone-100">Strength Training</td>
                <td class="px-4 py-4 whitespace-nowrap text-sm text-stone-600 dark:text-stone-400">2023-11-20</td>
                <td class="px-4 py-4 whitespace-nowrap text-sm text-stone-600 dark:text-stone-400">1h 30m</td>
                <td class="px-4 py-4 whitespace-nowrap text-sm text-stone-600 dark:text-stone-400">8 players</td>
                <td class="px-4 py-4 whitespace-nowrap">
                  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-200 text-green-800 dark:bg-green-700 dark:text-green-100">Completed</span>
                </td>
              </tr>
              <tr>
                <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-stone-900 dark:text-stone-100">Sprint Drills</td>
                <td class="px-4 py-4 whitespace-nowrap text-sm text-stone-600 dark:text-stone-400">2023-11-19</td>
                <td class="px-4 py-4 whitespace-nowrap text-sm text-stone-600 dark:text-stone-400">0h 45m</td>
                <td class="px-4 py-4 whitespace-nowrap text-sm text-stone-600 dark:text-stone-400">5 players</td>
                <td class="px-4 py-4 whitespace-nowrap">
                  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-200 text-green-800 dark:bg-green-700 dark:text-green-100">Completed</span>
                </td>
              </tr>
               <tr>
                <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-stone-900 dark:text-stone-100">Team Strategy Meeting</td>
                <td class="px-4 py-4 whitespace-nowrap text-sm text-stone-600 dark:text-stone-400">2023-11-18</td>
                <td class="px-4 py-4 whitespace-nowrap text-sm text-stone-600 dark:text-stone-400">2h 00m</td>
                <td class="px-4 py-4 whitespace-nowrap text-sm text-stone-600 dark:text-stone-400">Full Team</td>
                <td class="px-4 py-4 whitespace-nowrap">
                  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-amber-200 text-amber-800 dark:bg-amber-700 dark:text-amber-100">Scheduled</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>

      <!-- Performance Graphs Section -->
      <section class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700">
        <h2 class="text-2xl font-bold text-stone-900 dark:text-stone-100 mb-4">Weekly Training Volume</h2>
        <img src="https://picsum.photos/800/300?random=1" alt="Placeholder graph for training volume" class="w-full h-auto rounded-md object-cover border border-stone-300 dark:border-stone-700">
        <p class="text-sm text-stone-600 dark:text-stone-400 mt-3">Represents total hours logged by the team each week.</p>
      </section>

    </div>

    <!-- Sidebar / Secondary Content Area -->
    <aside class="space-y-6">

      <!-- Player Spotlight Card -->
      <section class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700">
        <h2 class="text-xl font-bold text-stone-900 dark:text-stone-100 mb-4">Player Spotlight</h2>
        <div class="flex flex-col items-center">
          <img class="w-24 h-24 rounded-full object-cover border-4 border-stone-400 dark:border-stone-600 mb-4" src="https://randomuser.me/api/portraits/men/52.jpg" alt="Player Avatar">
          <h3 class="text-xl font-semibold text-stone-900 dark:text-stone-100 mb-1">Alex 'The Rocket' Smith</h3>
          <p class="text-sm text-stone-600 dark:text-stone-400 mb-3">Position: Forward</p>
          <div class="flex items-center space-x-2 text-sm text-stone-700 dark:text-stone-300">
            <svg class="w-4 h-4 text-amber-600 dark:text-amber-500" 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-8.707l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13a1 1 0 102 0V9.414l1.293 1.293a1 1 0 001.414-1.414z" clip-rule="evenodd"></path></svg>
            <span>Recent Best: 15.2 km in latest run</span>
          </div>
        </div>
      </section>

      <!-- Upcoming Events -->
      <section class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700">
        <h2 class="text-xl font-bold text-stone-900 dark:text-stone-100 mb-4">Upcoming Events</h2>
        <ul class="space-y-4">
          <li class="flex items-start">
            <div class="flex-shrink-0 bg-amber-600 text-white rounded-full h-8 w-8 flex items-center justify-center text-sm font-bold">
              Nov<br>25
            </div>
            <div class="ml-3">
              <p class="font-semibold text-stone-900 dark:text-stone-100">Match vs. City Titans</p>
              <p class="text-sm text-stone-600 dark:text-stone-400">Arena Stadium, 7:00 PM</p>
            </div>
          </li>
          <li class="flex items-start">
            <div class="flex-shrink-0 bg-amber-600 text-white rounded-full h-8 w-8 flex items-center justify-center text-sm font-bold">
              Dec<br>01
            </div>
            <div class="ml-3">
              <p class="font-semibold text-stone-900 dark:text-stone-100">Team Health Check-up</p>
              <p class="text-sm text-stone-600 dark:text-stone-400">Medical Center, 9:00 AM</p>
            </div>
          </li>
           <li class="flex items-start">
            <div class="flex-shrink-0 bg-amber-600 text-white rounded-full h-8 w-8 flex items-center justify-center text-sm font-bold">
              Dec<br>05
            </div>
            <div class="ml-3">
              <p class="font-semibold text-stone-900 dark:text-stone-100">Off-season Training Begins</p>
              <p class="text-sm text-stone-600 dark:text-stone-400">Training Ground</p>
            </div>
          </li>
        </ul>
      </section>

      <!-- Quick Links -->
      <section class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700">
        <h2 class="text-xl font-bold text-stone-900 dark:text-stone-100 mb-4">Quick Links</h2>
        <ul class="space-y-3">
          <li>
            <a href="#" class="flex items-center text-stone-700 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200">
              <svg class="w-5 h-5 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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
              Full Player Roster
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center text-stone-700 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200">
              <svg class="w-5 h-5 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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8V9m0 3v2m0 3.5V19M8.293 17.293A4 4 0 0118 10a4 4 0 01-11.707-2.707m-4.593 2.593c-.783.783-1.217 1.488-1.498 2.07-.15.318-.256.576-.328.783a.75.75 0 00-.001.077c.435.093.593.18.665.234a.75.75 0 00.323.076.75.75 0 00.12-.016c.395-.121.737-.306 1.05-.558c.28-.216.52-.469.72-.733.2-.264.36-.532.48-.795a.75.75 0 00.08-.168.75.75 0 00.04-1.072z"></path></svg>
              Injury Reports
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center text-stone-700 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200">
              <svg class="w-5 h-5 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="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              Performance History
            </a>
          </li>
        </ul>
      </section>

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

Neumorphic Follow Button Component

A complex, neumorphic-styled follow button component with sunset/warm tones, designed for real estate platforms. It features responsive design and dark mode support, making elements appear to extrude from the background using subtle shadows.

Open Preview

                <div class="p-6 md:p-10 bg-orange-100 dark:bg-zinc-800 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-sm rounded-3xl p-6 shadow-xl relative
    bg-gradient-to-br from-orange-200 to-amber-100 
    dark:from-zinc-700 dark:to-zinc-900 
    dark:shadow-zinc-950/80 shadow-orange-300/60
    
    "> 
    <!-- Neumorphic Card Base -->
    <div class="relative z-10">
      <div class="flex items-center justify-between mb-6">
        <div class="flex items-center space-x-4">
          <img class="w-16 h-16 rounded-full 
            border-2 border-orange-300 dark:border-zinc-600 
            shadow-lg shadow-orange-300/40 dark:shadow-zinc-950/60 
            object-cover" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Agent Avatar">
          <div>
            <h3 class="text-xl font-semibold text-orange-900 dark:text-orange-200">Evelyn Sharp</h3>
            <p class="text-sm text-orange-700 dark:text-zinc-400">Senior Agent</p>
          </div>
        </div>
        <!-- More Info Button -->
        <a href="#" class="
          px-4 py-2 rounded-xl text-sm font-medium 
          bg-gradient-to-br from-orange-300 to-amber-200 
          dark:from-zinc-600 dark:to-zinc-800 
          text-orange-900 dark:text-orange-200 
          shadow-inner shadow-orange-400/60 dark:shadow-zinc-900/60 
          hover:from-orange-400 hover:to-orange-300 
          dark:hover:from-zinc-700 dark:hover:to-zinc-600 
          transform transition-transform duration-300 hover:scale-105 
          active:shadow-none active:scale-95
          sm: block md:inline-block">
          More Info
        </a>
      </div>

      <p class="text-orange-800 dark:text-zinc-300 mb-6 text-sm leading-relaxed">
        Specializing in luxury residential properties in metropolitan areas. Over 10 years of experience helping clients find their dream homes.
      </p>

      <!-- Key Stats / Properties -->
      <div class="grid grid-cols-2 gap-4 mb-8">
        <div class="
          p-4 rounded-xl text-center 
          bg-gradient-to-br from-orange-100 to-amber-50 
          dark:from-zinc-700 dark:to-zinc-900 
          shadow-md shadow-orange-200/50 dark:shadow-zinc-950/50 
          border border-orange-200/50 dark:border-zinc-800/50
          ">
          <p class="text-lg font-bold text-orange-900 dark:text-orange-200">150+</p>
          <p class="text-sm text-orange-700 dark:text-zinc-400">Properties Sold</p>
        </div>
        <div class="
          p-4 rounded-xl text-center 
          bg-gradient-to-br from-orange-100 to-amber-50 
          dark:from-zinc-700 dark:to-zinc-900 
          shadow-md shadow-orange-200/50 dark:shadow-zinc-950/50 
          border border-orange-200/50 dark:border-zinc-800/50
          ">
          <p class="text-lg font-bold text-orange-900 dark:text-orange-200">4.9</p>
          <p class="text-sm text-orange-700 dark:text-zinc-400">Rating</p>
        </div>
      </div>

      <!-- Follow Button -->
      <button class="
        w-full py-4 rounded-2xl text-lg font-bold 
        bg-gradient-to-br from-orange-400 to-amber-300 
        dark:from-amber-600 dark:to-orange-500 
        text-orange-950 dark:text-zinc-950 
        shadow-lg shadow-orange-500/60 dark:shadow-amber-900/60 
        hover:from-orange-500 hover:to-orange-400 
        dark:hover:from-amber-700 dark:hover:to-orange-600 
        transform transition-transform duration-300 
        focus:outline-none focus:ring-2 focus:ring-orange-300 focus:ring-offset-2 focus:ring-offset-orange-100 
        dark:focus:ring-amber-500 dark:focus:ring-offset-amber-900 
        active:shadow-none active:scale-98
        flex items-center justify-center space-x-2
        ">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 1 014 4v6a4 4 01-4 4H8a4 4 01-4-4v-6a4 4 014-4h4z" />
        </svg>
        <span>Follow Agent</span>
      </button>

      <!-- Contact Options -->
      <div class="flex justify-around mt-8">
        <button class="
          p-4 rounded-full 
          bg-gradient-to-br from-orange-200 to-amber-100 
          dark:from-zinc-700 dark:to-zinc-900 
          text-orange-700 dark:text-orange-200 
          shadow-md shadow-orange-300/50 dark:shadow-zinc-950/50 
          hover:from-orange-300 hover:to-orange-200 
          dark:hover:from-zinc-800 dark:hover:to-zinc-700 
          transform transition-transform duration-300 hover:scale-110 
          active:shadow-none active:scale-95
          focus:outline-none focus:ring-2 focus:ring-orange-300 focus:ring-offset-2 focus:ring-offset-orange-100 
          dark:focus:ring-amber-500 dark:focus:ring-offset-amber-900
          ">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 011.854-1.995A2 2 018 2h8a2 2 011.819 1.056l-3.328 10.655a2 2 01-1.077 1.077L13 18.066V20h-2v-1.934L7.509 15.7A2 2 016.438 14.623L3.181 4.944A2 2 013 5z" />
          </svg>
        </button>
        <button class="
          p-4 rounded-full 
          bg-gradient-to-br from-orange-200 to-amber-100 
          dark:from-zinc-700 dark:to-zinc-900 
          text-orange-700 dark:text-orange-200 
          shadow-md shadow-orange-300/50 dark:shadow-zinc-950/50 
          hover:from-orange-300 hover:to-orange-200 
          dark:hover:from-zinc-800 dark:hover:to-zinc-700 
          transform transition-transform duration-300 hover:scale-110 
          active:shadow-none active:scale-95
          focus:outline-none focus:ring-2 focus:ring-orange-300 focus:ring-offset-2 focus:ring-offset-orange-100 
          dark:focus:ring-amber-500 dark:focus:ring-offset-amber-900
          ">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 01-4.255-1.106L4 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
          </svg>
        </button>
        <button class="
          p-4 rounded-full 
          bg-gradient-to-br from-orange-200 to-amber-100 
          dark:from-zinc-700 dark:to-zinc-900 
          text-orange-700 dark:text-orange-200 
          shadow-md shadow-orange-300/50 dark:shadow-zinc-950/50 
          hover:from-orange-300 hover:to-orange-200 
          dark:hover:from-zinc-800 dark:hover:to-zinc-700 
          transform transition-transform duration-300 hover:scale-110 
          active:shadow-none active:scale-95
          focus:outline-none focus:ring-2 focus:ring-orange-300 focus:ring-offset-2 focus:ring-offset-orange-100 
          dark:focus:ring-amber-500 dark:focus:ring-offset-amber-900
          ">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 010.591 1.409L2.5 12l.529.071c.783.111 1.547.452 2.18.98L7.058 15.65h.001a4.522 4.522 004.582 0l2.35-1.921c.633-.528 1.397-.869 2.18-.98l.529-.071L18.5 5a2 2 00-1.802-1.802zM15 11a3 3 01-3 3s-3-3-3-3" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

3D Hamburger Menu Component

A responsive hamburger menu component with a 3D aesthetic, warm neutral color scheme, and dark mode support, suitable for entertainment and media platforms. Features a subtle 3D hover effect.

Open Preview

                <div class="flex items-center justify-center p-4 bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-800 dark:to-stone-900 min-h-screen">
  <div class="relative flex flex-col items-end gap-2 p-4 rounded-xl shadow-xl bg-stone-50 dark:bg-stone-700 transition-all duration-300 transform perspective-1000 group">
    <!-- Accessible Checkbox for toggling the menu -->
    <input type="checkbox" id="menu-toggle" class="peer sr-only group-hover:block">

    <!-- Hamburger Icon -->
    <label for="menu-toggle" class="relative z-20 w-8 h-6 flex flex-col justify-between cursor-pointer transition-transform duration-300 ease-in-out group-hover:scale-110 group-hover:rotate-6 perspective-1000">
      <span class="block w-full h-1 bg-stone-700 dark:bg-stone-300 rounded-full transition-all duration-300 ease-out origin-left peer-checked:rotate-45 peer-checked:translate-y-2.5 peer-checked:w-7 shadow-sm dark:shadow-stone-900/50"></span>
      <span class="block w-full h-1 bg-stone-700 dark:bg-stone-300 rounded-full transition-all duration-300 ease-out peer-checked:opacity-0 shadow-sm dark:shadow-stone-900/50"></span>
      <span class="block w-full h-1 bg-stone-700 dark:bg-stone-300 rounded-full transition-all duration-300 ease-out origin-left peer-checked:-rotate-45 peer-checked:-translate-y-2.5 peer-checked:w-7 shadow-sm dark:shadow-stone-900/50"></span>
    </label>

    <!-- Menu Items Container -->
    <nav class="absolute top-0 right-0 w-64 md:w-72 lg:w-80 h-full p-4 pt-16 bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-700 dark:to-stone-800 rounded-xl shadow-2xl origin-right transition-transform duration-500 ease-in-out transform scale-x-0 peer-checked:scale-x-100 peer-checked:translate-x-0 rotate-y-0 peer-checked:rotate-y-5 flex flex-col gap-3 opacity-0 peer-checked:opacity-100 pointer-events-none peer-checked:pointer-events-auto hover:z-30 group-focus-within:scale-x-100 group-focus-within:translate-x-0 group-focus-within:opacity-100 group-focus-within:pointer-events-auto">
      <ul class="flex flex-col gap-y-3">
        <li>
          <a href="#" class="block px-4 py-2 text-stone-800 dark:text-stone-100 hover:text-amber-700 dark:hover:text-amber-300 text-lg md:text-xl font-semibold rounded-lg transition-all duration-200 transform hover:translate-x-2 bg-stone-100/50 dark:bg-stone-600/50 hover:shadow-lg dark:hover:shadow-stone-950/70 hover:relative hover:z-10 group-hover:hover:shadow-2xl">
            Home
          </a>
        </li>
        <li>
          <a href="#" class="block px-4 py-2 text-stone-800 dark:text-stone-100 hover:text-amber-700 dark:hover:text-amber-300 text-lg md:text-xl font-semibold rounded-lg transition-all duration-200 transform hover:translate-x-2 bg-stone-100/50 dark:bg-stone-600/50 hover:shadow-lg dark:hover:shadow-stone-950/70 hover:relative hover:z-10 group-hover:hover:shadow-2xl">
            Movies
          </a>
        </li>
        <li>
          <a href="#" class="block px-4 py-2 text-stone-800 dark:text-stone-100 hover:text-amber-700 dark:hover:text-amber-300 text-lg md:text-xl font-semibold rounded-lg transition-all duration-200 transform hover:translate-x-2 bg-stone-100/50 dark:bg-stone-600/50 hover:shadow-lg dark:hover:shadow-stone-950/70 hover:relative hover:z-10 group-hover:hover:shadow-2xl">
            TV Shows
          </a>
        </li>
        <li>
          <a href="#" class="block px-4 py-2 text-stone-800 dark:text-stone-100 hover:text-amber-700 dark:hover:text-amber-300 text-lg md:text-xl font-semibold rounded-lg transition-all duration-200 transform hover:translate-x-2 bg-stone-100/50 dark:bg-stone-600/50 hover:shadow-lg dark:hover:shadow-stone-950/70 hover:relative hover:z-10 group-hover:hover:shadow-2xl">
            Categories
          </a>
        </li>
        <li>
          <a href="#" class="block px-4 py-2 text-stone-800 dark:text-stone-100 hover:text-amber-700 dark:hover:text-amber-300 text-lg md:text-xl font-semibold rounded-lg transition-all duration-200 transform hover:translate-x-2 bg-stone-100/50 dark:bg-stone-600/50 hover:shadow-lg dark:hover:shadow-stone-950/70 hover:relative hover:z-10 group-hover:hover:shadow-2xl">
            My List
          </a>
        </li>
        <li>
          <a href="#" class="block px-4 py-2 text-stone-800 dark:text-stone-100 hover:text-amber-700 dark:hover:text-amber-300 text-lg md:text-xl font-semibold rounded-lg transition-all duration-200 transform hover:translate-x-2 bg-stone-100/50 dark:bg-stone-600/50 hover:shadow-lg dark:hover:shadow-stone-950/70 hover:relative hover:z-10 group-hover:hover:shadow-2xl">
            Settings
          </a>
        </li>
      </ul>
    </nav>
  </div>
</div>

<style>
  /* CSS for 3D perspective and transformations */
  .perspective-1000 {
    perspective: 1000px;
  }

  .rotate-y-0 {
    transform: rotateY(0deg);
  }

  .peer-checked\:rotate-y-5 {
    transform: rotateY(-5deg);
  }

  /* Add a subtle 3D tilt on hover for the entire component for more depth */
  .group:hover {
    transform: rotateX(2deg) rotateY(2deg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  }

  .dark .group:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  }

  /* Ensure no scrollbar appears if perspective causes slight overflow */
  body { overflow-x: hidden; }
</style>

1 ... 90 91 92 93 94 ... 335