Search Components

All Components

Browse all available Tailwind CSS components

Organic_Nature_ProgressBar

A nature-inspired, retro-themed progress bar component for industrial and manufacturing applications, featuring flowing lines, muted colors, and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-stone-100 to-amber-100 dark:from-stone-800 dark:to-stone-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-white dark:bg-stone-700 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 ease-in-out hover:scale-[1.02] border-t-4 border-l-4 border-stone-200 dark:border-stone-600">
    <div class="p-6 sm:p-8 flex items-center justify-between border-b border-stone-200 dark:border-stone-600">
      <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 font-serif tracking-wide">Production Progress</h2>
      <span class="px-4 py-2 bg-gradient-to-tr from-orange-400 to-amber-500 text-white text-sm sm:text-base font-semibold rounded-full shadow-md transform hover:scale-105 transition-transform duration-200 ease-out">Batch #235</span>
    </div>
    <div class="p-6 sm:p-8 md:p-10">
      <div class="mb-6">
        <h3 class="text-lg sm:text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">Component Assembly</h3>
        <div class="w-full bg-gradient-to-r from-stone-300 to-stone-400 dark:from-stone-600 dark:to-stone-700 rounded-full h-8 sm:h-10 relative overflow-hidden shadow-inner">
          <div class="h-full bg-gradient-to-r from-teal-500 to-emerald-600 dark:from-teal-600 dark:to-emerald-700 rounded-full transition-all duration-500 ease-out" style="width: 75%;">
            <div class="absolute inset-0 flex items-center px-4 md:px-6 text-sm sm:text-base font-semibold text-white justify-between">
                <span>75% Complete</span>
                <span class="text-xs sm:text-sm">Stage 3 of 4</span>
            </div>
          </div>
          <div class="absolute inset-0 border-2 border-transparent rounded-full pointer-events-none" style="box-shadow: inset 0 0 10px rgba(0,0,0,0.1), inset 0 0 5px rgba(255,255,255,0.3);"></div>
          <svg class="absolute inset-0 w-full h-full" preserveAspectRatio="none" viewBox="0 0 100 100">
            <defs>
              <filter id="wavy-fill-1">
                <feTurbulence baseFrequency="0.05 0.1" numOctaves="2" result="turbulence" seed="10"/>
                <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="5" xChannelSelector="A" yChannelSelector="R"/>
              </filter>
            </defs>
            <rect class="fill-teal-500 dark:fill-teal-600" width="75%" height="100%" filter="url(#wavy-fill-1)" x="0" y="0"/>
          </svg>
        </div>
      </div>

      <div class="mb-6">
        <h3 class="text-lg sm:text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">Quality Assurance</h3>
        <div class="w-full bg-gradient-to-r from-stone-300 to-stone-400 dark:from-stone-600 dark:to-stone-700 rounded-full h-8 sm:h-10 relative overflow-hidden shadow-inner">
          <div class="h-full bg-gradient-to-r from-yellow-500 to-orange-500 dark:from-yellow-600 dark:to-orange-600 rounded-full transition-all duration-500 ease-out" style="width: 40%;">
            <div class="absolute inset-0 flex items-center px-4 md:px-6 text-sm sm:text-base font-semibold text-white justify-between">
                <span>40% Scanned</span>
                <span class="text-xs sm:text-sm">Remaining: 60%</span>
            </div>
          </div>
          <div class="absolute inset-0 border-2 border-transparent rounded-full pointer-events-none" style="box-shadow: inset 0 0 10px rgba(0,0,0,0.1), inset 0 0 5px rgba(255,255,255,0.3);"></div>
           <svg class="absolute inset-0 w-full h-full" preserveAspectRatio="none" viewBox="0 0 100 100">
            <defs>
              <filter id="wavy-fill-2">
                <feTurbulence baseFrequency="0.05 0.1" numOctaves="2" result="turbulence" seed="20"/>
                <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="5" xChannelSelector="A" yChannelSelector="R"/>
              </filter>
            </defs>
            <rect class="fill-yellow-500 dark:fill-yellow-600" width="40%" height="100%" filter="url(#wavy-fill-2)" x="0" y="0"/>
          </svg>
        </div>
      </div>

      <div>
        <h3 class="text-lg sm:text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">Final Packaging</h3>
        <div class="w-full bg-gradient-to-r from-stone-300 to-stone-400 dark:from-stone-600 dark:to-stone-700 rounded-full h-8 sm:h-10 relative overflow-hidden shadow-inner">
          <div class="h-full bg-gradient-to-r from-violet-500 to-purple-600 dark:from-violet-600 dark:to-purple-700 rounded-full transition-all duration-500 ease-out" style="width: 90%;">
            <div class="absolute inset-0 flex items-center px-4 md:px-6 text-sm sm:text-base font-semibold text-white justify-between">
                <span>90% Packed</span>
                <span class="text-xs sm:text-sm">Next: Shipping</span>
            </div>
          </div>
          <div class="absolute inset-0 border-2 border-transparent rounded-full pointer-events-none" style="box-shadow: inset 0 0 10px rgba(0,0,0,0.1), inset 0 0 5px rgba(255,255,255,0.3);"></div>
          <svg class="absolute inset-0 w-full h-full" preserveAspectRatio="none" viewBox="0 0 100 100">
            <defs>
              <filter id="wavy-fill-3">
                <feTurbulence baseFrequency="0.05 0.1" numOctaves="2" result="turbulence" seed="30"/>
                <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="5" xChannelSelector="A" yChannelSelector="R"/>
              </filter>
            </defs>
            <rect class="fill-violet-500 dark:fill-violet-600" width="90%" height="100%" filter="url(#wavy-fill-3)" x="0" y="0"/>
          </svg>
        </div>
      </div>
    </div>

    <div class="p-6 sm:p-8 text-center border-t border-stone-200 dark:border-stone-600 bg-stone-50 dark:bg-stone-800">
      <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base">Last updated: <span class="font-medium text-gray-700 dark:text-gray-200">2023-10-27 14:35 PST</span></p>
    </div>
  </div>
</div>

Monospace Carousel Slider Component

A simple, clean, monospace-inspired carousel slider component for blog/content display, designed with an analogous color scheme and full responsiveness, including dark mode.

Open Preview

                <div class="relative w-full max-w-4xl mx-auto py-8 font-mono text-gray-800 dark:text-gray-200 bg-gray-50 dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden">
  <h2 class="text-2xl font-bold text-center mb-6 px-4 text-emerald-700 dark:text-emerald-300">[CODE] Latest Articles [/]</h2>

  <!-- Carousel Wrapper -->
  <div class="flex overflow-x-scroll snap-x snap-mandatory scrollbar-hide space-x-4 px-4 pb-4 md:scroll-auto md:overflow-x-hidden md:flex-wrap md:justify-center">
    <!-- Slice 1 -->
    <div class="flex-none w-64 md:w-80 lg:w-96 snap-center bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 border border-emerald-200 dark:border-emerald-600 transition-all duration-300 hover:shadow-xl">
      <img class="w-full h-32 md:h-40 object-cover rounded-md mb-3 border border-emerald-100 dark:border-emerald-700" src="https://picsum.photos/400/250?random=1" alt="Article Image 1">
      <div class="text-xs text-emerald-600 dark:text-emerald-400 mb-1">[TAG] WebDev [/]</div>
      <h3 class="text-lg font-semibold mb-2 text-emerald-800 dark:text-emerald-200">// From Dev to Deploy: A Journey</h3>
      <p class="text-sm text-gray-700 dark:text-gray-300 line-clamp-3">Exploring the intricate pipeline from writing the first line of code to seeing it live in production...</p>
      <button class="mt-4 text-sm font-semibold text-emerald-700 dark:text-emerald-300 hover:underline">
        > READ MORE
      </button>
    </div>

    <!-- Slice 2 -->
    <div class="flex-none w-64 md:w-80 lg:w-96 snap-center bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 border border-emerald-200 dark:border-emerald-600 transition-all duration-300 hover:shadow-xl">
      <img class="w-full h-32 md:h-40 object-cover rounded-md mb-3 border border-emerald-100 dark:border-emerald-700" src="https://picsum.photos/400/250?random=2" alt="Article Image 2">
      <div class="text-xs text-emerald-600 dark:text-emerald-400 mb-1">[TAG] AI & ML [/]</div>
      <h3 class="text-lg font-semibold mb-2 text-emerald-800 dark:text-emerald-200">// The Rise of Generative Models</h3>
      <p class="text-sm text-gray-700 dark:text-gray-300 line-clamp-3">Delving into the exciting world of AI's generative capabilities and their impact on creativity and industry...</p>
      <button class="mt-4 text-sm font-semibold text-emerald-700 dark:text-emerald-300 hover:underline">
        > READ MORE
      </button>
    </div>

    <!-- Slice 3 -->
    <div class="flex-none w-64 md:w-80 lg:w-96 snap-center bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 border border-emerald-200 dark:border-emerald-600 transition-all duration-300 hover:shadow-xl">
      <img class="w-full h-32 md:h-40 object-cover rounded-md mb-3 border border-emerald-100 dark:border-emerald-700" src="https://picsum.photos/400/250?random=3" alt="Article Image 3">
      <div class="text-xs text-emerald-600 dark:text-emerald-400 mb-1">[TAG] Cybersecurity [/]</div>
      <h3 class="text-lg font-semibold mb-2 text-emerald-800 dark:text-emerald-200">// Securing Your Digital Fortress</h3>
      <p class="text-sm text-gray-700 dark:text-gray-300 line-clamp-3">Best practices and essential tools for protecting your data and privacy in an increasingly connected world...</p>
      <button class="mt-4 text-sm font-semibold text-emerald-700 dark:text-emerald-300 hover:underline">
        > READ MORE
      </button>
    </div>

    <!-- Slice 4 (hidden on smaller screens, appears on md and up) -->
    <div class="hidden md:flex flex-none w-64 md:w-80 lg:w-96 snap-center bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 border border-emerald-200 dark:border-emerald-600 transition-all duration-300 hover:shadow-xl">
      <img class="w-full h-32 md:h-40 object-cover rounded-md mb-3 border border-emerald-100 dark:border-emerald-700" src="https://picsum.photos/400/250?random=4" alt="Article Image 4">
      <div class="text-xs text-emerald-600 dark:text-emerald-400 mb-1">[TAG] Cloud Computing [/]</div>
      <h3 class="text-lg font-semibold mb-2 text-emerald-800 dark:text-emerald-200">// Serverless Architectures Explored</h3>
      <p class="text-sm text-gray-700 dark:text-gray-300 line-clamp-3">A deep dive into the benefits and challenges of building applications without managing servers...</p>
      <button class="mt-4 text-sm font-semibold text-emerald-700 dark:text-emerald-300 hover:underline">
        > READ MORE
      </button>
    </div>
  </div>

  <!-- Scroll Indicator for mobile (optional visual flair) -->
  <div class="block md:hidden text-center text-xs text-gray-500 dark:text-gray-400 mt-4 px-4">
    &lt; SCROLL FOR MORE &gt;
  </div>

  <!-- Tailwind Typography plugin classes are used for line-clamp. If you don't have this plugin installed, 
       replace line-clamp-3 with fixed height and hidden overflow, e.g., 'h-16 overflow-hidden' -->

  <!-- To make the scrollbar-hide work, you need to install the Tailwind CSS Scrollbar Hiding Plugin: -->
  <!-- npm install tailwindcss-scrollbar-hide -->
  <!-- Then add it to your tailwind.config.js: -->
  <!-- plugins: [require('tailwindcss-scrollbar-hide')] -->
</div>

Cyberpunk Footer Component

A simple, responsive footer component with a futuristic cyberpunk aesthetic using purple/violet tones, suitable for technology/SaaS applications. Includes dark mode support.

Open Preview

                <footer class="bg-black text-gray-300 py-8 px-4 sm:px-6 lg:px-8 shadow-inner shadow-purple-900/50 dark:bg-gray-950">
  <div class="max-w-7xl mx-auto flex flex-col items-center justify-between md:flex-row">
    
    <!-- Logo/Brand Name (Left/Top) -->
    <div class="mb-4 md:mb-0 text-center md:text-left">
      <a href="#" class="text-2xl font-extrabold tracking-tight text-purple-400 hover:text-purple-300 transition duration-300 ease-in-out glow-text">
        SYNAPTIC.AI
      </a>
      <p class="text-xs text-purple-600 mt-1 dark:text-purple-500">Unlocking Future Potential</p>
    </div>

    <!-- Navigation Links (Center) -->
    <nav class="flex flex-wrap justify-center gap-x-6 gap-y-2 mb-4 md:mb-0">
      <a href="#" class="text-sm text-purple-400 hover:text-purple-300 transition duration-300 ease-in-out relative group">
        Products
        <span class="absolute inset-x-0 bottom-0 h-0.5 bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
      </a>
      <a href="#" class="text-sm text-purple-400 hover:text-purple-300 transition duration-300 ease-in-out relative group">
        Solutions
        <span class="absolute inset-x-0 bottom-0 h-0.5 bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
      </a>
      <a href="#" class="text-sm text-purple-400 hover:text-purple-300 transition duration-300 ease-in-out relative group">
        Pricing
        <span class="absolute inset-x-0 bottom-0 h-0.5 bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
      </a>
      <a href="#" class="text-sm text-purple-400 hover:text-purple-300 transition duration-300 ease-in-out relative group">
        Contact
        <span class="absolute inset-x-0 bottom-0 h-0.5 bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
      </a>
    </nav>

    <!-- Copyright (Right/Bottom) -->
    <div class="text-center md:text-right">
      <p class="text-xs text-purple-700 dark:text-purple-600">&copy; 2077 SYNAPTIC.AI. All rights reserved.</p>
    </div>
  </div>
</footer>

<style>
  /* This style block is for demonstration and not part of the standard Tailwind CSS utility approach.
     It's meant to achieve a 'neon glow' effect which is typically done with custom CSS 
     or by extending Tailwind's config with plugins. For pure utility classes, 
     consider alternatives like shadow-lg with a colored shadow.
     For this specific request, a minimal custom CSS for the 'glow' is used. */
  .glow-text {
    text-shadow: 0 0 5px rgba(192, 132, 252, 0.7),
                 0 0 10px rgba(192, 132, 252, 0.5),
                 0 0 15px rgba(192, 132, 252, 0.3);
  }
  .dark .glow-text {
    text-shadow: 0 0 5px rgba(168, 85, 247, 0.8),
                 0 0 10px rgba(168, 85, 247, 0.6),
                 0 0 15px rgba(168, 85, 247, 0.4);
  }
</style>

Password Reset Component - Glassmorphism Grayscale

A glassmorphism-themed password reset component with a grayscale color scheme, featuring frosted glass-like translucent input fields and buttons. Designed for responsiveness and includes dark mode support. Although the purpose is weather/climate, the password reset form itself is generic.

Open Preview

                <div class="min-h-screen flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 duration-300">
  <div class="w-full max-w-md p-8 rounded-xl shadow-2xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 border border-gray-200 border-opacity-30 dark:border-gray-700 dark:border-opacity-30 transform transition-all duration-500 ease-in-out hover:scale-105 hover:shadow-3xl">
    <h2 class="text-3xl font-extrabold text-center text-gray-800 dark:text-gray-100 mb-6 drop-shadow-md">Reset Password</h2>
    <p class="text-center text-gray-700 dark:text-gray-300 mb-8 max-w-sm mx-auto drop-shadow-sm">Enter your email address below and we'll send you a link to reset your password.</p>

    <form class="space-y-6">
      <div>
        <label for="email" class="sr-only">Email address</label>
        <input id="email" name="email" type="email" autocomplete="email" required class="block w-full px-5 py-3 rounded-lg text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 bg-white bg-opacity-50 dark:bg-gray-700 dark:bg-opacity-50 border border-gray-300 border-opacity-50 dark:border-gray-600 dark:border-opacity-50 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 focus:border-transparent transition-all duration-300 ease-in-out shadow-sm"
          placeholder="[email protected]">
      </div>

      <div>
        <button type="submit" class="w-full flex justify-center py-3 px-6 border border-transparent rounded-lg shadow-sm text-lg font-semibold text-white bg-gray-700 bg-opacity-80 dark:bg-gray-600 dark:bg-opacity-80 hover:bg-gray-800 hover:bg-opacity-90 dark:hover:bg-gray-700 dark:hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-900 transition-all duration-300 ease-in-out transform active:scale-95">
          Send Reset Link
        </button>
      </div>
    </form>

    <div class="mt-8 text-center">
      <p class="text-sm text-gray-600 dark:text-gray-400">
        Remember your password?
        <a href="#" class="font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 focus:rounded-sm">
          Log in
        </a>
      </p>
    </div>
  </div>
</div>

Industrial_Success_Message

A simple, industrial-style success message component with warm neutrals, designed for CRM/Business Tools, featuring raw material aesthetics and full responsiveness with dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-stone-100 dark:bg-stone-800 text-stone-800 dark:text-stone-200 font-sans">
  <div class="max-w-md mx-auto border-2 border-stone-300 dark:border-stone-600 rounded-md shadow-lg overflow-hidden bg-stone-50 dark:bg-stone-900 transition-colors duration-300">
    <div class="flex items-center p-4 bg-stone-200 dark:bg-stone-700 border-b border-stone-300 dark:border-stone-600">
      <svg class="w-8 h-8 text-green-600 dark:text-green-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
      <h2 class="text-lg sm:text-xl font-semibold text-stone-900 dark:text-stone-100">Success!</h2>
    </div>
    <div class="p-4 sm:p-5">
      <p class="text-sm sm:text-base mb-4 leading-relaxed">
        Your action has been processed successfully. The data has been securely saved and is now available in your records.
      </p>
      <div class="text-xs text-stone-600 dark:text-stone-400 border-t border-stone-200 dark:border-stone-700 pt-3 flex justify-between items-center">
        <span>Transaction ID: <span class="font-mono">#CRM78901</span></span>
        <time datetime="2023-10-27T10:30:00Z" class="block mt-1 sm:mt-0">Oct 27, 2023, 10:30 AM</time>
      </div>
    </div>
  </div>
</div>

Footer Navigation Component

Organic/nature-inspired footer navigation component for a marketplace, featuring flowing lines, analogous color scheme, multiple sections, and responsive design with dark mode support.

Open Preview

                <footer class="bg-gradient-to-r from-emerald-50 to-teal-50 dark:from-gray-950 dark:to-emerald-950 text-gray-800 dark:text-gray-200 py-12 md:py-16 overflow-hidden relative">
  <div class="absolute top-0 left-0 w-full h-full pointer-events-none opacity-20 dark:opacity-10">
    <svg class="w-full h-full" viewBox="0 0 1000 300" preserveAspectRatio="xMidYMid slice">
      <path fill="currentColor" d="M0,100 C150,200 350,0 500,100 S850,200 1000,100 L1000,300 L0,300 Z" />
    </svg>
  </div>
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 lg:gap-12">
      <div class="flex flex-col items-start lg:col-span-2">
        <a href="#" class="text-3xl font-bold text-teal-600 dark:text-emerald-400 mb-4 tracking-tight font-serif">
          NatureNest
        </a>
        <p class="text-sm leading-relaxed mb-6 max-w-sm">
          Discover unique treasures and artisan crafts from around the globe, with a focus on sustainable and handmade products.
        </p>
        <div class="flex space-x-4">
          <a href="#" class="text-teal-600 hover:text-teal-800 dark:text-emerald-400 dark:hover:text-emerald-600 transition-colors duration-200">
            <svg class="w-6 h-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.506 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.33V22H12c5.523 0 10-4.477 10-10z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" class="text-teal-600 hover:text-teal-800 dark:text-emerald-400 dark:hover:text-emerald-600 transition-colors duration-200">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.715.056 8.96 0 10.154.044 10.154.044s.927-.005 3.71-.161c2.83-.15 4.093-1.077 4.093-1.077s.9-.785 1.554-2.585c.654-1.8.654-2.33 1.134-4.885.48-2.555.444-4.07 0-5.59-1.2-4.032-4.757-5.504-4.757-5.504s-.897-.978-2.066-1.554c-1.169-.576-2.504-.576-2.617-.576-2.065 0-3.328.086-4.524.195-.081-.005-2.06-.017-3.715-.056C7.575-2.006 7.227-1.993 4.797-1.993c-2.43 0-2.784-.013-3.715-.056C-7.868-2.006-8.243-2.006-8.243-2.006s-.927.005-3.71.161c-2.83.15-4.093 1.077-4.093 1.077s-.9.785-1.554 2.585c-.654 1.8-.654 2.33-1.134 4.885-.48 2.555-.444 4.07 0 5.59 1.2 4.032 4.757 5.504 4.757 5.504s-.897.978-2.066 1.554c-1.169.576-2.504.576-2.617.576-2.065 0-3.328-.086-4.524-.195-.081.005-2.06.017-3.715.056C-.415 2.006.014 1.993 2.444 1.993c2.43 0 2.784.013 3.715.056C12.315 2 12.315 2 12.315 2z" />
            </svg>
          </a>
          <a href="#" class="text-teal-600 hover:text-teal-800 dark:text-emerald-400 dark:hover:text-emerald-600 transition-colors duration-200">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M8.29 20.31c-.1.08-.22.1-.34.1-.12 0-.25-.02-.37-.08a.98.98 0 01-.7-.7-.99.99 0 010-.7c.07-.12.18-.22.3-.28.1-.06.21-.09.32-.09.11 0 .22.03.32.09.12.06.22.15.29.28.08.1.1.22.1.34 0 .12-.02.25-.08.37a.9.9 0 01-.28.3c-.07.06-.18.1-.3.1zM5 12h14v-2H5v2zm0-4h14V6H5v2zm0 8h14v-2H5v2z" />
              <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.23 2.636 7.85 6.305 9.245-.583-.243-1.077-.492-1.52-.772A.99.99 0 016 20.89c0-.447.18-.86.495-1.155.074-.069 1.157-1.18 1.157-1.18a.99.99 0 01.707-.293h.001c.266 0 .52.105.707.293l1.165 1.164a.99.99 0 010 1.414.99.99 0 01-1.414 0l-.353-.354c-.195-.195-.512-.195-.707 0-.097.098-.152.227-.152.365v.001c0 .138.055.267.152.365a.99.99 0 01.366.152l.353.354a.99.99 0 010 1.414.99.99 0 01-1.414 0l-.353-.354c-.195-.195-.512-.195-.707 0-.097.098-.152.227-.152.365a.99.99 0 01.152.365l.353.354a.99.99 0 010 1.414.99.99 0 01-1.414 0l-.353-.354c-.195-.195-.512-.195-.707 0-.097.098-.152.227-.152.365v.001c0 .138.055.267.152.365a.99.99 0 01.366.152l.353.354c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707a.99.99 0 01-1.414 0c-.39-.39-1.023-.39-1.414 0a.99.99 0 010 1.414l.707.707a.99.99 0 010 1.414c-.39.39-1.023.39-1.414 0a.99.99 0 010-1.414l-.707-.707a.99.99 0 01-1.414 0c-.39-.39-1.023-.39-1.414 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c.195.195.512.195.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707zM12 21a9 9 0 100-18 9 9 0 000 18z" clip-rule="evenodd"/>
            </svg>
          </a>
        </div>
      </div>

      <div>
        <h3 class="text-lg font-semibold text-teal-700 dark:text-emerald-300 mb-5">Shop</h3>
        <ul class="space-y-4">
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Handmade Crafts</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Organic Produce</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Garden & Home</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Wellness & Beauty</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Seasonal Collections</a></li>
        </ul>
      </div>

      <div>
        <h3 class="text-lg font-semibold text-teal-700 dark:text-emerald-300 mb-5">Sell</h3>
        <ul class="space-y-4">
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Start Selling</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Shop Setup</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Vendor Tools</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Community Guidelines</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Partner Program</a></li>
        </ul>
      </div>

      <div>
        <h3 class="text-lg font-semibold text-teal-700 dark:text-emerald-300 mb-5">Help</h3>
        <ul class="space-y-4">
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Contact Us</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">FAQs</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Shipping & Returns</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Privacy Policy</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Terms of Service</a></li>
        </ul>
      </div>

      <div class="lg:col-span-1">
        <h3 class="text-lg font-semibold text-teal-700 dark:text-emerald-300 mb-5">Join Our Community</h3>
        <p class="text-sm text-gray-700 dark:text-gray-300 mb-4">Subscribe to our newsletter for exclusive offers and updates.</p>
        <form class="flex flex-col sm:flex-row gap-2">
          <input type="email" placeholder="Your email address" aria-label="Your email address" class="flex-grow px-4 py-2 rounded-lg bg-white dark:bg-gray-800 border border-teal-200 dark:border-emerald-700 focus:ring-2 focus:ring-teal-400 dark:focus:ring-emerald-500 outline-none text-gray-800 dark:text-gray-200 text-sm">
          <button type="submit" class="bg-teal-600 hover:bg-teal-700 dark:bg-emerald-600 dark:hover:bg-emerald-700 text-white font-medium py-2 px-4 rounded-lg shadow-md transition-colors duration-200 text-sm focus:outline-none focus:ring-2 focus:ring-teal-400 focus:ring-offset-2 dark:focus:ring-emerald-500 dark:focus:ring-offset-gray-950">
            Subscribe
          </button>
        </form>
        <div class="mt-8">
          <h4 class="text-md font-semibold text-teal-700 dark:text-emerald-300 mb-3">Latest from our blog</h4>
          <a href="#" class="flex items-center space-x-3 group">
            <img src="https://picsum.photos/60/60?random=1" alt="Blog post thumbnail" class="w-12 h-12 rounded-lg object-cover border-2 border-teal-300 dark:border-emerald-600 group-hover:scale-105 transition-transform duration-200">
            <div>
              <p class="text-sm font-medium text-gray-800 dark:text-gray-200 group-hover:text-teal-600 dark:group-hover:text-emerald-400 transition-colors duration-200">Crafting Sustainability: A Guide for Artisans</p>
              <span class="text-xs text-gray-500 dark:text-gray-400">Oct 26, 2023</span>
            </div>
          </a>
        </div>
      </div>
    </div>

    <div class="border-t border-teal-200 dark:border-emerald-800 pt-8 mt-12 text-center">
      <p class="text-sm text-gray-600 dark:text-gray-400">
        &copy; 2023 NatureNest. All rights reserved. Made with <span class="text-red-500" aria-label="Love">&#x2764;</span> for a better world.
      </p>
    </div>
  </div>
</footer>

Error Messages Component - Food/Restaurant

A complex, paper/print-inspired triadic themed error message component for food/restaurant websites, with dark mode support and full responsiveness. Features multiple interactive elements simulating a physical print-out.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 lg:p-10 bg-gradient-to-br from-yellow-50 to-orange-100 dark:from-gray-950 dark:to-gray-900 min-h-screen flex items-center justify-center font-serif">
  <div class="max-w-4xl w-full rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] dark:shadow-2xl dark:shadow-rose-950/50 bg-yellow-50 dark:bg-gray-800 text-gray-800 dark:text-gray-100 border border-gray-200 dark:border-gray-700 relative">
    <!-- Paper textured background with torn edges effect -->
    <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/lined-paper.png')] opacity-20 dark:opacity-5
    before:absolute before:inset-x-0 before:top-0 before:h-4 before:bg-gradient-to-b before:from-yellow-50 before:to-transparent before:dark:from-gray-800 before:dark:to-transparent
    after:absolute after:inset-x-0 after:bottom-0 after:h-4 after:bg-gradient-to-t after:from-yellow-50 after:to-transparent after:dark:from-gray-800 after:dark:to-transparent
    "></div>

    <!-- Header Section - simulating a ripped-off piece of paper -->
    <div class="relative bg-red-600 dark:bg-rose-900 text-white p-4 sm:p-5 text-center shadow-md border-b border-red-700 dark:border-rose-950 overflow-hidden
                before:content-[''] before:absolute before:-left-2 before:top-1/2 before:-translate-y-1/2 before:w-4 before:h-[calc(100%+40px)] before:bg-gradient-to-r before:from-red-700 before:to-transparent before:rotate-45 before:scale-y-150
                after:content-[''] after:absolute after:-right-2 after:top-1/2 after:-translate-y-1/2 after:w-4 after:h-[calc(100%+40px)] after:bg-gradient-to-l after:from-red-700 after:to-transparent after:-rotate-45 after:scale-y-150">
      <h1 class="text-2xl sm:text-3xl font-bold tracking-tight uppercase drop-shadow-md">Order Interrupted!</h1>
      <p class="text-sm sm:text-base opacity-90 mt-1">Something went wrong while preparing your delicious meal.</p>
    </div>

    <!-- Main Content Area - mimicking a crumpled note -->
    <div class="relative p-6 sm:p-8 md:p-10 z-10">
      <div class="bg-yellow-100 dark:bg-gray-700 p-6 rounded-md shadow-inner border border-yellow-200 dark:border-gray-600 relative overflow-hidden transform rotate-1 transition-transform duration-500 group-hover:rotate-0">
        <!-- Crumpled paper texture overlay -->
        <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/skulls.png')] opacity-5 dark:opacity-10 pointer-events-none"></div>

        <p class="text-lg sm:text-xl font-semibold mb-4 text-red-700 dark:text-red-300 flex items-center">
          <svg class="w-7 h-7 sm:w-8 sm:h-8 mr-3 animate-pulse" 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 16zm-1-12a1 1 0 10-2 0v4a1 1 0 102 0V6zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
          </svg>
          Error: Payment Processing Failed
        </p>
        <p class="mb-6 leading-relaxed">
          It seems there was a hiccup while processing your payment. Your order <span class="font-mono text-sm bg-yellow-200 dark:bg-gray-600 px-2 py-1 rounded">#FDS-202300483X</span> could not be completed.
        </p>

        <h3 class="text-xl font-bold mb-3 text-emerald-700 dark:text-emerald-400 border-b-2 border-dashed border-emerald-300 dark:border-emerald-600 pb-2 flex items-center">
          <svg class="w-6 h-6 mr-2" 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-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
          </svg>
          What you can do:
        </h3>
        <ul class="list-disc list-inside space-y-2 text-gray-700 dark:text-gray-200 ml-2">
          <li class="flex items-start">
            <span class="block w-2 h-2 rounded-full bg-emerald-500 mr-2 mt-1.5 flex-shrink-0"></span>
            <p><strong>Check your payment details:</strong> Please verify your card number, expiry date, and CVV. Ensure funds are available.</p>
          </li>
          <li class="flex items-start">
            <span class="block w-2 h-2 rounded-full bg-emerald-500 mr-2 mt-1.5 flex-shrink-0"></span>
            <p><strong>Try a different payment method:</strong> We accept other major credit cards, PayPal, and local payment options.</p>
          </li>
          <li class="flex items-start">
            <span class="block w-2 h-2 rounded-full bg-emerald-500 mr-2 mt-1.5 flex-shrink-0"></span>
            <p><strong>Review your internet connection:</strong> A stable connection helps prevent payment disruptions.</p>
          </li>
          <li class="flex items-start">
            <span class="block w-2 h-2 rounded-full bg-emerald-500 mr-2 mt-1.5 flex-shrink-0"></span>
            <p><strong>Clear browser cache:</strong> Sometimes old data can interfere with new transactions.</p>
          </li>
        </ul>
      </div>
    </div>

    <!-- Stack of "sticky notes" for common actions -->
    <div class="relative p-6 sm:p-8 pt-0 flex flex-col sm:flex-row justify-end space-y-4 sm:space-y-0 sm:space-x-4 z-10">
      <a href="#" class="relative bg-emerald-500 hover:bg-emerald-600 dark:bg-emerald-700 dark:hover:bg-emerald-800 text-white font-bold py-3 px-6 rounded-lg shadow-md transition-transform duration-200 transform -rotate-1 hover:rotate-0 hover:scale-105 active:scale-95 origin-bottom-left text-center overflow-hidden
                  before:absolute before:inset-0 before:bg-black before:opacity-10 before:mix-blend-multiply before:transition-all before:duration-300 before:scale-y-0 before:origin-top hover:before:scale-y-100
                  border border-emerald-600 dark:border-emerald-900
                  flex items-center justify-center">
        <span class="relative z-10">Retry Payment</span>
        <svg class="w-5 h-5 ml-2 relative z-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="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12V8m5.356-4H15v5m6 0h-5.356-2A8.001 8.001 0 0120 12v4m-4 0h-.582"></path>
        </svg>
      </a>

      <a href="#" class="relative bg-red-500 hover:bg-red-600 dark:bg-rose-700 dark:hover:bg-rose-800 text-white font-bold py-3 px-6 rounded-lg shadow-md transition-transform duration-200 transform rotate-2 hover:rotate-0 hover:scale-105 active:scale-95 origin-bottom-right text-center overflow-hidden
                  before:absolute before:inset-0 before:bg-black before:opacity-10 before:mix-blend-multiply before:transition-all before:duration-300 before:scale-y-0 before:origin-top hover:before:scale-y-100
                  border border-red-600 dark:border-rose-900
                  flex items-center justify-center">
        <span class="relative z-10">Go to Homepage</span>
        <svg class="w-5 h-5 ml-2 relative z-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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-9v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
        </svg>
      </a>
    </div>

    <!-- Tear-off portion (bottom) with support info, like a receipt -->
    <div class="relative bg-yellow-200 dark:bg-gray-900 text-gray-700 dark:text-gray-300 p-4 sm:p-5 text-center text-sm border-t border-dashed border-yellow-300 dark:border-gray-700 overflow-hidden
                before:content-[''] before:absolute before:-left-2 before:top-1/2 before:-translate-y-1/2 before:w-4 before:h-[calc(100%+40px)] before:bg-gradient-to-r before:from-yellow-300 before:to-transparent before:-rotate-45 before:scale-y-150
                after:content-[''] after:absolute after:-right-2 after:top-1/2 after:-translate-y-1/2 after:w-4 after:h-[calc(100%+40px)] after:bg-gradient-to-l after:from-yellow-300 after:to-transparent after:rotate-45 after:scale-y-150">
      <p class="mb-2">If the problem persists, please <a href="#" class="text-red-600 dark:text-red-400 hover:underline font-semibold">contact our support team</a> with your order number.</p>
      <p class="text-xs opacity-80">Support Hotline: +1 (555) 123-4567 | Email: [email protected]</p>
    </div>
  </div>
</div>

Community Forum Component - Retro Ocean Blue

A simple, responsive community forum component with a retro 80s/90s vibe, designed for job and career platforms. Features ocean blue color scheme and dark mode support.

Open Preview

                <div class="bg-gradient-to-br from-blue-300 to-sky-500 min-h-screen p-4 font-mono text-gray-800 dark:from-sky-900 dark:to-blue-950 dark:text-gray-200">
  <div class="max-w-2xl mx-auto bg-white rounded-lg shadow-xl overflow-hidden transform perspective-100 rotate-x-3 transition-transform duration-500 ease-in-out hover:rotate-x-0 dark:bg-gray-800">
    <div class="border-b-4 border-blue-600 px-6 py-4 flex items-center justify-between bg-blue-700 text-white dark:bg-blue-900 dark:border-blue-700">
      <h2 class="text-2xl font-bold tracking-wide uppercase drop-shadow-lg">\/\/ Career HQ Forum \/\/</h2>
      <span class="text-sm italic">established 1992</span>
    </div>
    <div class="px-6 py-4 border-b border-blue-200 dark:border-blue-700">
      <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/67.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-4 border-blue-400 object-cover shadow-md dark:border-blue-600">
        <div class="flex-1">
          <p class="text-blue-700 text-lg font-semibold dark:text-blue-300">New Post:</p>
          <input type="text" placeholder="Enter your topic title here..." class="w-full p-2 mt-1 border-2 border-blue-400 rounded-md bg-blue-50 text-blue-800 focus:outline-none focus:border-blue-600 dark:bg-blue-900 dark:border-blue-600 dark:text-blue-100">
        </div>
        <button class="px-5 py-2 bg-blue-600 text-white font-bold rounded-lg shadow-lg hover:bg-blue-700 transition-colors duration-200 transform hover:-translate-y-1 active:translate-y-0 active:shadow-md dark:bg-blue-700 dark:hover:bg-blue-800">
          POST <span class="hidden sm:inline">TOPIC</span>
        </button>
      </div>
    </div>
    <div class="p-6 space-y-6">
      <!-- Forum Thread 1 -->
      <div class="bg-blue-50 p-4 rounded-lg shadow-md border-l-4 border-blue-500 transform transition-transform duration-300 hover:scale-[1.01] dark:bg-blue-900 dark:border-blue-600">
        <div class="flex items-start mb-2">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-blue-300 dark:border-blue-500">
          <div>
            <p class="font-bold text-blue-800 dark:text-blue-200">JaneDoe87</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Posted: 10/26/23 14:35 MST</p>
          </div>
        </div>
        <h3 class="text-xl font-bold text-blue-700 mb-2 dark:text-blue-300">Seeking Advice: Transitioning from Marketing to Tech Sales!</h3>
        <p class="text-gray-700 dark:text-gray-300">Hey folks, I'm looking to pivot my career into tech sales. Any tips on resumes, interviews, or entry-level roles? What skills should I highlight?</p>
        <div class="mt-3 flex justify-between items-center text-sm">
          <span class="text-blue-600 dark:text-blue-400">Replies: 12</span>
          <a href="#" class="text-blue-600 hover:underline dark:text-blue-400 dark:hover:text-blue-200">[ View Thread ]</a>
        </div>
      </div>

      <!-- Forum Thread 2 -->
      <div class="bg-blue-50 p-4 rounded-lg shadow-md border-l-4 border-blue-500 transform transition-transform duration-300 hover:scale-[1.01] dark:bg-blue-900 dark:border-blue-600">
        <div class="flex items-start mb-2">
          <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-blue-300 dark:border-blue-500">
          <div>
            <p class="font-bold text-blue-800 dark:text-blue-200">CodeMaestro</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Posted: 10/26/23 11:01 MST</p>
          </div>
        </div>
        <h3 class="text-xl font-bold text-blue-700 mb-2 dark:text-blue-300">Frontend Devs: Best Practices for Responsive Design?</h3>
        <p class="text-gray-700 dark:text-gray-300">What are your go-to strategies for ensuring truly responsive designs? Any specific frameworks or CSS methodologies you prefer?</p>
        <div class="mt-3 flex justify-between items-center text-sm">
          <span class="text-blue-600 dark:text-blue-400">Replies: 28</span>
          <a href="#" class="text-blue-600 hover:underline dark:text-blue-400 dark:hover:text-blue-200">[ View Thread ]</a>
        </div>
      </div>

      <!-- Forum Thread 3 -->
      <div class="bg-blue-50 p-4 rounded-lg shadow-md border-l-4 border-blue-500 transform transition-transform duration-300 hover:scale-[1.01] dark:bg-blue-900 dark:border-blue-600">
        <div class="flex items-start mb-2">
          <img src="https://randomuser.me/api/portraits/women/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-blue-300 dark:border-blue-500">
          <div>
            <p class="font-bold text-blue-800 dark:text-blue-200">ResumeGuru</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Posted: 10/25/23 09:10 MST</p>
          </div>
        </div>
        <h3 class="text-xl font-bold text-blue-700 mb-2 dark:text-blue-300">Tips for Acing Your Next Video Interview</h3>
        <p class="text-gray-700 dark:text-gray-300">With more remote roles, video interviews are standard. Share your best advice for setup, lighting, virtual backgrounds, and common pitfalls!</p>
        <div class="mt-3 flex justify-between items-center text-sm">
          <span class="text-blue-600 dark:text-blue-400">Replies: 9</span>
          <a href="#" class="text-blue-600 hover:underline dark:text-blue-400 dark:hover:text-blue-200">[ View Thread ]</a>
        </div>
      </div>
    </div>
    <div class="border-t-4 border-blue-600 px-6 py-4 flex items-center justify-between text-xs text-gray-600 bg-blue-700 text-white dark:bg-blue-900 dark:border-blue-700 dark:text-gray-300">
      <p>&copy; 2023 CareerHQ - All Rights Reserved</p>
      <p>Forum Version 4.2 Beta</p>
    </div>
  </div>
</div>

Art Deco Session Timeout Alert

A stylish and responsive session timeout alert component with Art Deco inspired design, featuring geometric patterns, warm neutrals, and dark mode support, suitable for entertainment platforms.

Open Preview

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-70 dark:bg-black dark:bg-opacity-80 font-serif">
  <div class="relative w-full max-w-md mx-auto overflow-hidden text-center bg-gradient-to-br from-amber-50 to-orange-100 dark:from-stone-900 dark:to-stone-800 rounded-lg shadow-xl border-4 border-amber-300 dark:border-amber-700 transform transition-all duration-300 ease-in-out hover:scale-[1.01]">
    <!-- Art Deco Top Border Pattern -->
    <div class="absolute top-0 left-0 right-0 h-6 bg-gradient-to-r from-amber-400 to-yellow-500 dark:from-stone-700 dark:to-stone-600 flex items-center justify-center overflow-hidden">
      <div class="flex w-full justify-around">
        <svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform -rotate-45" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
        <svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform -rotate-45" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
        <svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform -rotate-45" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
        <svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform -rotate-45 hidden sm:block" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
        <svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform -rotate-45 hidden md:block" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
      </div>
    </div>

    <div class="p-8 pb-6 pt-12 relative">
      <h2 class="text-3xl sm:text-4xl font-bold mb-4 text-amber-900 dark:text-amber-200 tracking-wide leading-tight drop-shadow-md">
        Session Expiring Soon!
      </h2>
      <p class="text-lg sm:text-xl text-stone-700 dark:text-stone-300 mb-6 leading-relaxed">
        Your session will end in <strong class="text-amber-800 dark:text-amber-400">2:00</strong>.
        Do you want to continue watching?
      </p>

      <!-- Geometric Separator -->
      <div class="w-full h-px bg-amber-300 dark:bg-stone-700 my-6 relative">
        <div class="absolute -top-2 left-1/2 -translate-x-1/2 w-4 h-4 bg-amber-400 dark:bg-stone-600 transform rotate-45 border border-amber-500 dark:border-stone-500"></div>
      </div>

      <div class="flex flex-col sm:flex-row justify-center gap-4">
        <button class="px-8 py-3 rounded-full bg-amber-500 hover:bg-amber-600 text-white font-semibold text-lg shadow-lg 
                       transition duration-300 ease-in-out transform hover:scale-105 
                       dark:bg-amber-600 dark:hover:bg-amber-700 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-800">
          Continue Session
        </button>
        <button class="px-8 py-3 rounded-full border-2 border-amber-500 hover:border-amber-600 text-amber-700 font-semibold text-lg shadow-lg 
                       transition duration-300 ease-in-out transform hover:scale-105 
                       dark:border-stone-500 dark:text-stone-200 dark:hover:border-stone-400 dark:hover:text-stone-100 dark:bg-transparent focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-800">
          Log Out
        </button>
      </div>
    </div>

    <!-- Art Deco Bottom Border Pattern -->
    <div class="absolute bottom-0 left-0 right-0 h-6 bg-gradient-to-r from-yellow-500 to-amber-400 dark:from-stone-600 dark:to-stone-700 flex items-center justify-center overflow-hidden">
      <div class="flex w-full justify-around">
        <svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform rotate-45" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
        <svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform rotate-45" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
        <svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform rotate-45" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
        <svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform rotate-45 hidden sm:block" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
        <svg class="h-4 w-4 text-amber-900 dark:text-stone-300 transform rotate-45 hidden md:block" fill="currentColor" viewBox="0 0 20 20"><path d="M10 0L0 10L10 20L20 10L10 0Z"/></svg>
      </div>
    </div>
  </div>
</div>

Memphis_Gaming_Notification_Simple_Forest_Green

A simple, responsive gaming notification component with a Memphis design influence using a forest green color palette, including dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-green-50 to-emerald-100 dark:from-gray-900 dark:to-gray-800 min-h-screen flex items-center justify-center font-sans">
  <div class="relative w-full max-w-sm sm:max-w-md bg-gradient-to-br from-emerald-100 to-green-200 dark:from-emerald-900 dark:to-green-950 p-6 rounded-2xl shadow-xl overflow-hidden border-4 border-green-700 dark:border-emerald-600">

    <!-- Decorative Memphis Shapes -->
    <div class="absolute -top-8 -left-8 w-24 h-24 bg-green-500 dark:bg-emerald-700 transform rotate-45 rounded-lg opacity-70"></div>
    <div class="absolute -bottom-10 -right-10 w-28 h-28 bg-emerald-500 dark:bg-green-700 rounded-full opacity-60"></div>
    <div class="absolute top-1/4 -right-6 w-16 h-4 bg-green-600 dark:bg-emerald-600 transform -rotate-12"></div>
    <div class="absolute bottom-1/3 -left-4 w-12 h-12 bg-emerald-600 dark:bg-green-600 rounded-lg transform rotate-25 opacity-80"></div>

    <div class="relative z-10">
      <div class="flex items-center mb-4">
        <div class="flex-shrink-0 relative">
          <img class="h-12 w-12 rounded-full ring-4 ring-green-600 dark:ring-emerald-500" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
          <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full bg-red-500 ring-2 ring-emerald-100 dark:ring-emerald-900"></span>
        </div>
        <div class="ml-4">
          <p class="text-lg font-bold text-green-900 dark:text-emerald-100">New Activity!</p>
          <p class="text-sm text-green-700 dark:text-emerald-200">Yesterday at 5:30 PM</p>
        </div>
      </div>

      <p class="text-green-800 dark:text-emerald-200 text-base mb-6 leading-relaxed">
        <span class="font-semibold text-green-900 dark:text-emerald-50">PlayerOne</span> just achieved "Dragon Slayer" achievement! 🎉
      </p>

      <div class="flex justify-end">
        <button class="px-5 py-2 bg-green-700 hover:bg-green-800 dark:bg-emerald-700 dark:hover:bg-emerald-800 text-white font-bold rounded-xl shadow-lg transform transition-transform duration-200 ease-in-out active:scale-95 border-2 border-green-800 dark:border-emerald-900">
          View Details
        </button>
      </div>
    </div>
  </div>
</div>

1 ... 74 75 76 77 78 ... 335

Search Components

Categories

All Components