Search Components

All Components

Browse all available Tailwind CSS components

Watercolor/Artistic Tag Cloud Component

A complex, responsive tag cloud component with a watercolor/artistic design style and pastel color scheme, suitable for forum/community platforms. Supports dark mode.

Open Preview

                <div class="font-sans p-4 sm:p-8 md:p-12 bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-900 dark:to-stone-950 min-h-screen flex items-center justify-center">
  <div class="w-full max-w-4xl bg-white dark:bg-stone-800 rounded-3xl shadow-xl overflow-hidden transform hover:scale-[1.01] transition-all duration-300 ease-in-out
    border border-solid border-purple-100 dark:border-stone-700
    bg-[url('https://www.transparenttextures.com/patterns/watercolor.png')] dark:bg-[url('https://www.transparenttextures.com/patterns/dark-mosaic.png')] bg-blend-multiply dark:bg-blend-overlay
    relative px-6 py-8 sm:px-10 sm:py-12 md:px-14 md:py-16
  ">
    <div class="absolute inset-0 bg-gradient-to-br from-pink-50/70 via-purple-50/70 to-blue-50/70 dark:from-stone-900/70 dark:via-gray-900/70 dark:to-slate-900/70 rounded-3xl -z-10"></div>
    
    <h2 class="text-4xl sm:text-5xl md:text-6xl font-extrabold text-pink-600 dark:text-pink-300 mb-6 sm:mb-8 md:mb-10 text-center relative
      before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:-translate-x-1/2 before:w-16 before:h-2 before:bg-purple-300 before:dark:bg-purple-700 before:rounded-full before:-mb-2 before:opacity-70
    ">
      <span class="relative z-10">Community Hot Topics</span>
    </h2>

    <p class="text-lg sm:text-xl text-purple-700 dark:text-purple-200 mb-8 sm:mb-10 md:mb-12 text-center max-w-2xl mx-auto opacity-90 leading-relaxed">
      Explore the most discussed and trending topics in our vibrant community. Click on a tag to dive deeper!
    </p>

    <div class="flex flex-wrap items-center justify-center gap-3 sm:gap-4 md:gap-5 mb-8 sm:mb-10 md:mb-12">
      <!-- Input and Search -->
      <div class="relative w-full max-w-md">
        <input type="text" placeholder="Search tags..." class="w-full pl-12 pr-4 py-3 rounded-full border-2 border-purple-200 dark:border-stone-600 bg-purple-50 dark:bg-stone-700 text-purple-800 dark:text-white placeholder-purple-400 dark:placeholder-stone-400
          focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-600 transition-all duration-200 shadow-inner dark:shadow-none
        ">
        <svg class="absolute left-4 top-1/2 -translate-y-1/2 w-6 h-6 text-purple-400 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>
      
      <!-- Filter/Sort Buttons (example) -->
      <div class="flex flex-wrap justify-center gap-2">
        <button class="px-5 py-2 rounded-full text-sm font-semibold border-2 border-pink-300 dark:border-pink-700 bg-pink-100 dark:bg-pink-900 text-pink-700 dark:text-pink-300
          hover:bg-pink-200 hover:text-pink-800 dark:hover:bg-pink-800 dark:hover:text-pink-200 transition-all duration-200 shadow-md
        ">Trending</button>
        <button class="px-5 py-2 rounded-full text-sm font-semibold border-2 border-blue-300 dark:border-blue-700 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300
          hover:bg-blue-200 hover:text-blue-800 dark:hover:bg-blue-800 dark:hover:text-blue-200 transition-all duration-200 shadow-md
        ">Newest</button>
      </div>
    </div>

    <div class="flex flex-wrap justify-center gap-3 sm:gap-4 md:gap-5 ">
      <!-- Tags -->
      
      <!-- Tag 1 -->
      <a href="#" class="group flex items-center bg-gradient-to-br from-pink-200 to-purple-200 dark:from-pink-800 dark:to-purple-800 rounded-full px-5 py-2 sm:px-6 sm:py-2.5 shadow-lg border border-pink-300 dark:border-pink-600
        text-pink-900 light:text-purple-800 dark:text-white dark:hover:text-purple-100 font-bold text-lg sm:text-xl transform hover:scale-105 transition-all duration-250 ease-in-out overflow-hidden relative
        before:content-[''] before:absolute before:inset-0 before:bg-white/30 dark:before:bg-black/30 before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-250
      ">
        #Community
        <span class="ml-2 text-sm sm:text-base opacity-80 text-purple-800 dark:text-purple-300">(2.5K)</span>
      </a>

      <!-- Tag 2 -->
      <a href="#" class="group flex items-center bg-gradient-to-br from-blue-200 to-green-200 dark:from-blue-800 dark:to-green-800 rounded-full px-5 py-2 sm:px-6 sm:py-2.5 shadow-lg border border-blue-300 dark:border-blue-600
        text-blue-900 dark:text-white dark:hover:text-blue-100 font-semibold text-base sm:text-lg transform hover:scale-105 transition-all duration-250 ease-in-out overflow-hidden relative
        before:content-[''] before:absolute before:inset-0 before:bg-white/30 dark:before:bg-black/30 before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-250
      ">
        #Discussions
        <span class="ml-2 text-sm sm:text-base opacity-80 text-green-800 dark:text-green-300">(1.8K)</span>
      </a>

      <!-- Tag 3 -->
      <a href="#" class="group flex items-center bg-gradient-to-br from-purple-200 to-pink-200 dark:from-purple-800 dark:to-pink-800 rounded-full px-5 py-2 sm:px-6 sm:py-2.5 shadow-lg border border-purple-300 dark:border-purple-600
        text-purple-900 dark:text-white dark:hover:text-purple-100 font-bold text-lg sm:text-xl transform hover:scale-105 transition-all duration-250 ease-in-out overflow-hidden relative
        before:content-[''] before:absolute before:inset-0 before:bg-white/30 dark:before:bg-black/30 before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-250
      ">
        #Announcements
        <span class="ml-2 text-sm sm:text-base opacity-80 text-pink-800 dark:text-pink-300">(987)</span>
      </a>
      
      <!-- Tag 4 -->
      <a href="#" class="group flex items-center bg-gradient-to-br from-yellow-100 to-orange-100 dark:from-yellow-700 dark:to-orange-700 rounded-full px-4 py-1.5 sm:px-5 sm:py-2 shadow-md border border-yellow-200 dark:border-yellow-600
        text-orange-800 dark:text-white dark:hover:text-yellow-100 font-medium text-base sm:text-lg transform hover:scale-105 transition-all duration-250 ease-in-out overflow-hidden relative
        before:content-[''] before:absolute before:inset-0 before:bg-white/30 dark:before:bg-black/30 before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-250
      ">
        #Suggestions
        <span class="ml-2 text-xs sm:text-sm opacity-80 text-orange-700 dark:text-orange-300">(721)</span>
      </a>

      <!-- Tag 5 -->
      <a href="#" class="group flex items-center bg-gradient-to-br from-indigo-100 to-purple-100 dark:from-indigo-700 dark:to-purple-700 rounded-full px-4 py-1.5 sm:px-5 sm:py-2 shadow-md border border-indigo-200 dark:border-indigo-600
        text-indigo-800 dark:text-white dark:hover:text-indigo-100 font-medium text-base sm:text-lg transform hover:scale-105 transition-all duration-250 ease-in-out overflow-hidden relative
        before:content-[''] before:absolute before:inset-0 before:bg-white/30 dark:before:bg-black/30 before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-250
      ">
        #TechSupport
        <span class="ml-2 text-xs sm:text-sm opacity-80 text-purple-700 dark:text-purple-300">(645)</span>
      </a>

      <!-- Tag 6 -->
      <a href="#" class="group flex items-center bg-gradient-to-br from-teal-100 to-cyan-100 dark:from-teal-700 dark:to-cyan-700 rounded-full px-4 py-1.5 sm:px-5 sm:py-2 shadow-md border border-teal-200 dark:border-teal-600
        text-teal-800 dark:text-white dark:hover:text-teal-100 font-medium text-base sm:text-lg transform hover:scale-105 transition-all duration-250 ease-in-out overflow-hidden relative
        before:content-[''] before:absolute before:inset-0 before:bg-white/30 dark:before:bg-black/30 before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-250
      ">
        #Feedback
        <span class="ml-2 text-xs sm:text-sm opacity-80 text-cyan-800 dark:text-cyan-300">(512)</span>
      </a>

      <!-- Tag 7 -->
      <a href="#" class="group flex items-center bg-gradient-to-br from-rose-100 to-fuchsia-100 dark:from-rose-700 dark:to-fuchsia-700 rounded-full px-4 py-1.5 sm:px-5 sm:py-2 shadow-md border border-rose-200 dark:border-rose-600
        text-rose-800 dark:text-white dark:hover:text-fuchsia-100 font-medium text-base sm:text-lg transform hover:scale-105 transition-all duration-250 ease-in-out overflow-hidden relative
        before:content-[''] before:absolute before:inset-0 before:bg-white/30 dark:before:bg-black/30 before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-250
      ">
        #Events
        <span class="ml-2 text-xs sm:text-sm opacity-80 text-fuchsia-800 dark:text-rose-300">(341)</span>
      </a>

      <!-- Tag 8 -->
      <a href="#" class="group flex items-center bg-gradient-to-br from-lime-100 to-emerald-100 dark:from-lime-700 dark:to-emerald-700 rounded-full px-4 py-1.5 sm:px-5 sm:py-2 shadow-md border border-lime-200 dark:border-lime-600
        text-emerald-800 dark:text-white dark:hover:text-lime-100 font-medium text-base sm:text-lg transform hover:scale-105 transition-all duration-250 ease-in-out overflow-hidden relative
        before:content-[''] before:absolute before:inset-0 before:bg-white/30 dark:before:bg-black/30 before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-250
      ">
        #Tutorials
        <span class="ml-2 text-xs sm:text-sm opacity-80 text-lime-800 dark:text-emerald-300">(289)</span>
      </a>

      <!-- Tag 9 -->
      <a href="#" class="group flex items-center bg-gradient-to-br from-sky-100 to-blue-100 dark:from-sky-700 dark:to-blue-700 rounded-full px-4 py-1.5 sm:px-5 sm:py-2 shadow-md border border-sky-200 dark:border-sky-600
        text-sky-800 dark:text-white dark:hover:text-blue-100 font-medium text-base sm:text-lg transform hover:scale-105 transition-all duration-250 ease-in-out overflow-hidden relative
        before:content-[''] before:absolute before:inset-0 before:bg-white/30 dark:before:bg-black/30 before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-250
      ">
        #Guides
        <span class="ml-2 text-xs sm:text-sm opacity-80 text-blue-800 dark:text-sky-300">(210)</span>
      </a>

      <!-- Tag 10 -->
      <a href="#" class="group flex items-center bg-gradient-to-br from-violet-100 to-indigo-100 dark:from-violet-700 dark:to-indigo-700 rounded-full px-4 py-1.5 sm:px-5 sm:py-2 shadow-md border border-violet-200 dark:border-violet-600
        text-indigo-800 dark:text-white dark:hover:text-violet-100 font-medium text-base sm:text-lg transform hover:scale-105 transition-all duration-250 ease-in-out overflow-hidden relative
        before:content-[''] before:absolute before:inset-0 before:bg-white/30 dark:before:bg-black/30 before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-250
      ">
        #Challenges
        <span class="ml-2 text-xs sm:text-sm opacity-80 text-violet-800 dark:text-indigo-300">(155)</span>
      </a>

    </div>

    <div class="mt-10 sm:mt-12 md:mt-16 text-center">
      <p class="text-sm text-purple-600 dark:text-purple-300 opacity-90">Don't see your topic? <a href="#" class="font-bold underline highlight-link hover:text-pink-700 dark:hover:text-pink-400 transition-colors duration-200">Start a new discussion!</a></p>
    </div>

  </div>
</div>

Login/Signup Component

A simple and responsive login/signup form designed for manufacturing/industrial companies, featuring a monochrome palette with a bright accent color, gradient transitions, and dark mode support.

Open Preview

                <div class="min-h-screen flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
  <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-xl w-full max-w-md border border-gray-200 dark:border-gray-700 transition-colors duration-300 overflow-hidden relative">
    <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-indigo-300 via-purple-300 to-pink-300 opacity-20 dark:from-indigo-600 dark:via-purple-600 dark:to-pink-600 dark:opacity-10 pointer-events-none transition-all duration-500 blur-sm"></div>
    <div class="relative z-10">
      <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-6 text-center transition-colors duration-300">
        Welcome Back
      </h2>
      <form class="space-y-6">
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 transition-colors duration-300">
            Email Address
          </label>
          <input type="email" id="email" name="email" autocomplete="email" required class="appearance-none block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:text-white dark:border-gray-600 transition-colors duration-300">
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 transition-colors duration-300">
            Password
          </label>
          <input type="password" id="password" name="password" autocomplete="current-password" required class="appearance-none block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:text-white dark:border-gray-600 transition-colors duration-300">
        </div>

        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded dark:border-gray-600 dark:bg-gray-700">
            <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300 transition-colors duration-300">
              Remember me
            </label>
          </div>

          <div class="text-sm">
            <a href="#" class="font-medium text-purple-600 hover:text-purple-500 dark:text-purple-400 dark:hover:text-purple-300 transition-colors duration-300">
              Forgot your password?
            </a>
          </div>
        </div>

        <div>
          <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-semibold text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 dark:bg-purple-700 dark:hover:bg-purple-600 transition-all duration-300 transform hover:scale-105 active:scale-95
          relative overflow-hidden group">
            <span class="relative z-10">Sign In</span>
            <span class="absolute inset-0 bg-gradient-to-r from-purple-500 to-pink-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 mix-blend-screen"></span>
          </button>
        </div>
      </form>

      <p class="mt-8 text-center text-sm text-gray-600 dark:text-gray-400 transition-colors duration-300">
        Don't have an account?
        <a href="#" class="font-medium text-purple-600 hover:text-purple-500 dark:text-purple-400 dark:hover:text-purple-300 transition-colors duration-300">
          Sign up now
        </a>
      </p>
    </div>
  </div>
</div>

Price Display Component

A simple, responsive price display component for real estate listings, featuring earth tone colors and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-stone-100 dark:bg-stone-900 text-stone-800 dark:text-stone-200 font-sans antialiased">
  <div class="max-w-xs mx-auto bg-white dark:bg-stone-800 shadow-lg rounded-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.02]">
    <div class="p-4 sm:p-5 flex flex-col items-center">
      <p class="text-sm uppercase tracking-wider font-semibold text-stone-600 dark:text-stone-400 mb-1">Starting From</p>
      <div class="flex items-baseline mb-4">
        <span class="text-2xl sm:text-3xl font-bold text-green-700 dark:text-green-500 mr-1">$</span>
        <span class="text-4xl sm:text-5xl font-extrabold text-stone-900 dark:text-stone-100 lining-nums tabular-nums">450,000</span>
      </div>
      <p class="text-sm text-stone-500 dark:text-stone-400 text-center leading-relaxed">
        Estimated Price per unit
      </p>
    </div>
    <div class="border-t border-stone-200 dark:border-stone-700 p-4 sm:p-5 text-center bg-stone-50 dark:bg-stone-700">
      <a href="#" class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:bg-green-700 dark:hover:bg-green-800 dark:focus:ring-green-600 transform transition-transform duration-200 hover:-translate-y-0.5">
        Learn More
        <svg class="ml-2 -mr-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
          <path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
        </svg>
      </a>
    </div>
  </div>
</div>

User Profiles Component

A responsive user profiles component for non-profit/charity organizations, featuring a luxury/premium design with professional blue tones, dark mode support, and sophisticated typography.

Open Preview

                <section class="py-12 bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 transition-colors duration-300">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-12">
      <h2 class="text-4xl font-extrabold tracking-tight text-blue-800 dark:text-blue-400 sm:text-5xl">
        Meet Our Dedicated Team
      </h2>
      <p class="mt-4 text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
        Our passionate individuals are committed to making a difference. Learn more about the people behind our mission.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Profile Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-blue-600 dark:border-blue-500">
        <div class="p-6">
          <div class="flex flex-col items-center">
            <img class="h-32 w-32 rounded-full object-cover mb-4 ring-4 ring-blue-200 dark:ring-blue-700" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Alice Johnson">
            <h3 class="text-2xl font-semibold text-blue-700 dark:text-blue-300">Alice Johnson</h3>
            <p class="text-md text-gray-500 dark:text-gray-400 font-medium mb-3">Executive Director</p>
            <p class="text-center text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
              Alice leads our organization with a vision for positive change, driving initiatives and partnerships.
            </p>
          </div>
          <div class="mt-6 flex justify-center space-x-4">
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="LinkedIn">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.535-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
              </svg>
            </a>
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="Email">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M.05 3.197L12 10.999 23.95 3.197zM0 4.609v14.075c0 1.284 1.041 2.325 2.325 2.325h19.35c1.284 0 2.325-1.041 2.325-2.325V4.609L12 12.607 0 4.609z"/>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Profile Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-blue-600 dark:border-blue-500">
        <div class="p-6">
          <div class="flex flex-col items-center">
            <img class="h-32 w-32 rounded-full object-cover mb-4 ring-4 ring-blue-200 dark:ring-blue-700" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Mark Stevens">
            <h3 class="text-2xl font-semibold text-blue-700 dark:text-blue-300">Mark Stevens</h3>
            <p class="text-md text-gray-500 dark:text-gray-400 font-medium mb-3">Head of Programs</p>
            <p class="text-center text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
              Mark designs and implements our core programs, ensuring maximum impact on the communities we serve.
            </p>
          </div>
          <div class="mt-6 flex justify-center space-x-4">
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="LinkedIn">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.535-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
              </svg>
            </a>
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="Email">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M.05 3.197L12 10.999 23.95 3.197zM0 4.609v14.075c0 1.284 1.041 2.325 2.325 2.325h19.35c1.284 0 2.325-1.041 2.325-2.325V4.609L12 12.607 0 4.609z"/>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Profile Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-blue-600 dark:border-blue-500">
        <div class="p-6">
          <div class="flex flex-col items-center">
            <img class="h-32 w-32 rounded-full object-cover mb-4 ring-4 ring-blue-200 dark:ring-blue-700" src="https://randomuser.me/api/portraits/women/78.jpg" alt="Sarah Kim">
            <h3 class="text-2xl font-semibold text-blue-700 dark:text-blue-300">Sarah Kim</h3>
            <p class="text-md text-gray-500 dark:text-gray-400 font-medium mb-3">Community Outreach Manager</p>
            <p class="text-center text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
              Sarah connects us with communities, building relationships and understanding local needs for effective support.
            </p>
          </div>
          <div class="mt-6 flex justify-center space-x-4">
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="LinkedIn">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.535-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
              </svg>
            </a>
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="Email">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M.05 3.197L12 10.999 23.95 3.197zM0 4.609v14.075c0 1.284 1.041 2.325 2.325 2.325h19.35c1.284 0 2.325-1.041 2.325-2.325V4.609L12 12.607 0 4.609z"/>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Profile Card 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-blue-600 dark:border-blue-500">
        <div class="p-6">
          <div class="flex flex-col items-center">
            <img class="h-32 w-32 rounded-full object-cover mb-4 ring-4 ring-blue-200 dark:ring-blue-700" src="https://randomuser.me/api/portraits/men/50.jpg" alt="David Lee">
            <h3 class="text-2xl font-semibold text-blue-700 dark:text-blue-300">David Lee</h3>
            <p class="text-md text-gray-500 dark:text-gray-400 font-medium mb-3">Volunteer Coordinator</p>
            <p class="text-center text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
              David manages our amazing volunteers, ensuring they are well-supported and effectively deployed.
            </p>
          </div>
          <div class="mt-6 flex justify-center space-x-4">
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="LinkedIn">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.535-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
              </svg>
            </a>
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="Email">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M.05 3.197L12 10.999 23.95 3.197zM0 4.609v14.075c0 1.284 1.041 2.325 2.325 2.325h19.35c1.284 0 2.325-1.041 2.325-2.325V4.609L12 12.607 0 4.609z"/>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Profile Card 5 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-blue-600 dark:border-blue-500">
        <div class="p-6">
          <div class="flex flex-col items-center">
            <img class="h-32 w-32 rounded-full object-cover mb-4 ring-4 ring-blue-200 dark:ring-blue-700" src="https://randomuser.me/api/portraits/women/62.jpg" alt="Emily White">
            <h3 class="text-2xl font-semibold text-blue-700 dark:text-blue-300">Emily White</h3>
            <p class="text-md text-gray-500 dark:text-gray-400 font-medium mb-3">Events & Fundraising Manager</p>
            <p class="text-center text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
              Emily orchestrates our fundraising events, engaging donors and raising vital funds for our causes.
            </p>
          </div>
          <div class="mt-6 flex justify-center space-x-4">
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="LinkedIn">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.535-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
              </svg>
            </a>
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="Email">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M.05 3.197L12 10.999 23.95 3.197zM0 4.609v14.075c0 1.284 1.041 2.325 2.325 2.325h19.35c1.284 0 2.325-1.041 2.325-2.325V4.609L12 12.607 0 4.609z"/>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Profile Card 6 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-blue-600 dark:border-blue-500">
        <div class="p-6">
          <div class="flex flex-col items-center">
            <img class="h-32 w-32 rounded-full object-cover mb-4 ring-4 ring-blue-200 dark:ring-blue-700" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Michael Brown">
            <h3 class="text-2xl font-semibold text-blue-700 dark:text-blue-300">Michael Brown</h3>
            <p class="text-md text-gray-500 dark:text-gray-400 font-medium mb-3">Communications Specialist</p>
            <p class="text-center text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
              Michael shares our story with the world, crafting compelling narratives and engaging content.
            </p>
          </div>
          <div class="mt-6 flex justify-center space-x-4">
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="LinkedIn">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.535-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
              </svg>
            </a>
            <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200" aria-label="Email">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M.05 3.197L12 10.999 23.95 3.197zM0 4.609v14.075c0 1.284 1.041 2.325 2.325 2.325h19.35c1.284 0 2.325-1.041 2.325-2.325V4.609L12 12.607 0 4.609z"/>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Functional Components Component

A complex, responsive dashboard component with a monospace/developer aesthetic, using cool neutrals. Features data visualization elements, terminal-like sections, and dark mode support.

Open Preview

                <div class="font-mono min-h-screen bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200 p-4 transition-colors duration-300">

  <!-- Header -->
  <header class="flex flex-col md:flex-row items-center justify-between p-4 mb-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <h1 class="text-2xl md:text-3xl font-bold text-blue-700 dark:text-blue-400 mb-2 md:mb-0">SYSTEM_DASHBOARD:/&gt;</h1>
    <div class="flex items-center space-x-4">
      <span class="text-sm text-gray-600 dark:text-gray-400">STATUS: <span class="text-green-500 dark:text-green-400">ONLINE</span></span>
      <button class="p-2 rounded-md bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v2.102a1 1 0 01-.817.986l-3.238.162a1 1 0 00-.785.647L5.787 9.87a1 1 0 01-.194.275l-2.091 2.215a1 1 0 00-.071 1.488l2.946 3.682A1 1 0 008.3 18h7.42a1 1 0 00.999-.817l-.84-7.557a1 1 0 00-.916-.957L13 8.358V5.5c0-.682-.315-1.32-.862-1.745l-3.468-2.67c-.201-.155-.444-.24-.698-.24z" clip-rule="evenodd"></path>
        </svg>
      </button>
      <img class="w-8 h-8 rounded-full border-2 border-blue-500 dark:border-blue-400" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
    </div>
  </header>

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

    <!-- Left Column (Status & Logs) -->
    <div class="lg:col-span-2 space-y-6">

      <!-- System Overview Card -->
      <section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <h2 class="text-xl font-semibold mb-4 text-blue-600 dark:text-blue-300">SYSTEM OVERVIEW://</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
          <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md">
            <p><span class="text-gray-600 dark:text-gray-400">CPU_LOAD:</span> <span class="font-bold text-orange-500 dark:text-orange-400">67%</span></p>
            <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2 mt-2">
              <div class="bg-orange-500 h-2 rounded-full" style="width: 67%;"></div>
            </div>
          </div>
          <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md">
            <p><span class="text-gray-600 dark:text-gray-400">MEM_USAGE:</span> <span class="font-bold text-yellow-500 dark:text-yellow-400">45% (8GB/16GB)</span></p>
            <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2 mt-2">
              <div class="bg-yellow-500 h-2 rounded-full" style="width: 45%;"></div>
            </div>
          </div>
          <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md">
            <p><span class="text-gray-600 dark:text-gray-400">DISK_IO:</span> <span class="font-bold text-purple-500 dark:text-purple-400">120MB/s</span></p>
            <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2 mt-2">
              <div class="bg-purple-500 h-2 rounded-full" style="width: 70%;"></div>
            </div>
          </div>
          <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md">
            <p><span class="text-gray-600 dark:text-gray-400">NETWORK_LATENCY:</span> <span class="font-bold text-green-500 dark:text-green-400">18ms</span></p>
            <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2 mt-2">
              <div class="bg-green-500 h-2 rounded-full" style="width: 90%;"></div>
            </div>
          </div>
        </div>
      </section>

      <!-- Recent Activity / Command Log -->
      <section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <h2 class="text-xl font-semibold mb-4 text-blue-600 dark:text-blue-300">COMMAND_LOG://</h2>
        <div class="bg-gray-900 dark:bg-black text-gray-100 p-4 rounded-lg overflow-y-auto h-64 text-sm relative">
          <span class="absolute top-2 left-2 text-green-400 text-xs">>$ _</span>
          <pre class="whitespace-pre-wrap mt-4">
            <span class="text-gray-400">[0x1A2B]</span> <span class="text-green-400">SUCCESS</span>: Initializing core modules...
            <span class="text-gray-400">[0x3C4D]</span> <span class="text-yellow-400">WARN</span>: Data integrity check running, 0.5% errors detected.
            <span class="text-gray-400">[0x5E6F]</span> <span class="text-green-400">SUCCESS</span>: System update applied. Reboot required.
            <span class="text-gray-400">[0x7081]</span> <span class="text-red-400">ERROR</span>: Service 'AuthModule' failed to start on port 8080. Port in use.
            <span class="text-gray-400">[0x92A3]</span> <span class="text-green-400">SUCCESS</span>: User 'admin' logged in from 192.168.1.100.
            <span class="text-gray-400">[0xB4C5]</span> <span class="text-yellow-400">WARN</span>: High network traffic detected from external source. Blocked.
            <span class="text-gray-400">[0xD6E7]</span> <span class="text-green-400">SUCCESS</span>: Database backup initiated. Progress: 75%.
            <span class="text-gray-400">[0xF8G9]</span> <span class="text-blue-400">INFO</span>: Sensor array 'Alpha' reporting normal parameters.
            <span class="text-gray-400">[0x10H1]</span> <span class="text-red-400">ERROR</span>: Critical temperature detected in 'ServerRack-3'. Initiating shutdown.
            <span class="text-gray-400">[0x22I3]</span> <span class="text-green-400">SUCCESS</span>: Log rotation completed successfully.
            <span class="text-gray-400">[0x44J5]</span> <span class="text-yellow-400">WARN</span>: Disk space low on '/dev/sda1'. 10GB remaining.
            <span class="text-gray-400">[0x66K7]</span> <span class="text-green-400">SUCCESS</span>: Scheduled task 'DataPurge' executed.
          </pre>
        </div>
      </section>

    </div>

    <!-- Right Column (Components & Controls) -->
    <div class="space-y-6">

      <!-- Active Components Card -->
      <section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <h2 class="text-xl font-semibold mb-4 text-blue-600 dark:text-blue-300">ACTIVE_COMPONENTS://</h2>
        <ul class="space-y-3">
          <li class="flex items-center space-x-2 text-sm">
            <span class="text-green-500 dark:text-green-400">&#x2714;</span>
            <span>NETWORK_MONITOR_v2.1</span>
            <span class="ml-auto text-gray-500 dark:text-gray-400">PID: 1024</span>
          </li>
          <li class="flex items-center space-x-2 text-sm">
            <span class="text-green-500 dark:text-green-400">&#x2714;</span>
            <span>DATABASE_ENGINE_SQL_9</span>
            <span class="ml-auto text-gray-500 dark:text-gray-400">PID: 1025</span>
          </li>
          <li class="flex items-center space-x-2 text-sm">
            <span class="text-yellow-500 dark:text-yellow-400">&#x2714;</span>
            <span>SECURE_SHELL_DAEMON_SSH</span>
            <span class="ml-auto text-gray-500 dark:text-gray-400">PID: 1026</span>
          </li>
          <li class="flex items-center space-x-2 text-sm">
            <span class="text-red-500 dark:text-red-400">&#x2716;</span>
            <span>PAYMENT_GATEWAY_API_PHP</span>
            <span class="ml-auto text-gray-500 dark:text-gray-400">PID: <span class="text-red-500 dark:text-red-400">STOPPED</span></span>
          </li>
          <li class="flex items-center space-x-2 text-sm">
            <span class="text-green-500 dark:text-green-400">&#x2714;</span>
            <span>LOG_AGGREGATOR_v1.5</span>
            <span class="ml-auto text-gray-500 dark:text-gray-400">PID: 1028</span>
          </li>
        </ul>
        <button class="mt-4 w-full p-2 bg-blue-600 dark:bg-blue-500 text-white rounded-md hover:bg-blue-700 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm">VIEW ALL PROCESSES</button>
      </section>

      <!-- Quick Actions Card -->
      <section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <h2 class="text-xl font-semibold mb-4 text-blue-600 dark:text-blue-300">QUICK_ACTIONS://</h2>
        <div class="grid grid-cols-2 gap-3">
          <button class="p-3 bg-blue-100 dark:bg-blue-900 border border-blue-200 dark:border-blue-700 text-blue-800 dark:text-blue-200 rounded-md hover:bg-blue-200 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm">
            <svg class="w-5 h-5 mx-auto mb-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.102a2 2 0 03.487 1.343L9.5 10l-1.5 5.25a1 1 0 00.324 1.013l.836.671L10 18h2v-2.102a2 2 0 00-.487-1.343L8.5 10l1.5-5.25a1 1 0 00-.324-1.013l-.836-.671L10 2H8z" clip-rule="evenodd"></path></svg>
            REBOOT_SYSTEM
          </button>
          <button class="p-3 bg-red-100 dark:bg-red-900 border border-red-200 dark:border-red-700 text-red-800 dark:text-red-200 rounded-md hover:bg-red-200 dark:hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-red-500 text-sm">
            <svg class="w-5 h-5 mx-auto mb-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></svg>
            HALT_SERVICE
          </button>
          <button class="p-3 bg-green-100 dark:bg-green-900 border border-green-200 dark:border-green-700 text-green-800 dark:text-green-200 rounded-md hover:bg-green-200 dark:hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-green-500 text-sm">
            <svg class="w-5 h-5 mx-auto mb-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd"></path></svg>
            ADD_NEW_TASK
          </button>
          <button class="p-3 bg-yellow-100 dark:bg-yellow-900 border border-yellow-200 dark:border-yellow-700 text-yellow-800 dark:text-yellow-200 rounded-md hover:bg-yellow-200 dark:hover:bg-yellow-800 focus:outline-none focus:ring-2 focus:ring-yellow-500 text-sm">
            <svg class="w-5 h-5 mx-auto mb-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"></path><path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd"></path></svg>
            EDIT_CONFIG
          </button>
        </div>
      </section>

      <!-- System Performance Chart Placeholder -->
      <section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <h2 class="text-xl font-semibold mb-4 text-blue-600 dark:text-blue-300">PERFORMANCE_TREND://</h2>
        <div class="bg-gray-200 dark:bg-gray-700 h-48 rounded-md flex items-center justify-center text-gray-500 dark:text-gray-400 text-sm">
          [GRAPH_PLACEHOLDER: Data Visualization Here]
          <img class="w-full h-full object-cover rounded-md" src="https://picsum.photos/400/250?random=1" alt="Placeholder chart">
        </div>
      </section>

    </div>

  </div>

  <!-- Footer -->
  <footer class="text-center mt-8 text-gray-500 dark:text-gray-400 text-xs">
    SYSTEM_DASHBOARD_v1.0 &copy; 2023 // All rights reserved. &gt;_
  </footer>

</div>

ArtDeco_EarthTones_Cards_Technology_SaaS

A simple, responsive cards component for Technology/SaaS applications, inspired by Art Deco geometric patterns and a natural earth tones color scheme. Includes dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-900 dark:to-stone-950 min-h-screen flex items-center justify-center font-serif">
  <div class="container mx-auto px-4 py-8 sm:py-12 md:py-16">
    <h2 class="text-center text-3xl sm:text-4xl md:text-5xl font-extrabold text-stone-800 dark:text-stone-100 mb-6 sm:mb-8 md:mb-12 tracking-wide">
      <span class="block">Our <span class="text-amber-700 dark:text-amber-500">SaaS</span> Offerings</span>
    </h2>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-10">

      <!-- Card 1: Core Analytics -->
      <div class="group bg-stone-50 dark:bg-stone-800 rounded-lg overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 ease-in-out transform hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-amber-500/30 border-2 border-stone-200 dark:border-stone-700 relative">
        <div class="absolute inset-0 bg-gradient-to-br from-amber-100/30 via-stone-100/30 to-zinc-100/30 dark:from-amber-900/20 dark:via-stone-900/20 dark:to-zinc-900/20 rounded-lg opacity-0 transition-opacity duration-300 group-hover:opacity-100" style="clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 80% 100%, 0% 100%);"></div>
        <div class="relative p-6 sm:p-8 z-10">
          <img class="w-16 h-16 mb-4 sm:mb-6 mx-auto" src="https://picsum.photos/id/25/64/64" alt="Analytics Icon">
          <h3 class="text-2xl sm:text-3xl font-bold text-amber-800 dark:text-amber-500 mb-3 text-center tracking-wider">Core Analytics</h3>
          <p class="text-stone-700 dark:text-stone-300 text-base sm:text-lg leading-relaxed mb-6 text-center">
            Gain profound insights with our advanced, real-time data analytics. Understand patterns, predict trends.
          </p>
          <ul class="space-y-3 mb-6">
            <li class="flex items-center text-stone-600 dark:text-stone-400">
              <svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              Intuitive Dashboards
            </li>
            <li class="flex items-center text-stone-600 dark:text-stone-400">
              <svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              Real-time Processing
            </li>
            <li class="flex items-center text-stone-600 dark:text-stone-400">
              <svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              Customizable Reports
            </li>
          </ul>
          <button class="block w-full py-3 px-6 rounded-md bg-amber-700 text-stone-50 font-semibold text-lg uppercase tracking-wider shadow-md hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:bg-amber-600 dark:hover:bg-amber-700 dark:focus:ring-amber-400 transition-colors duration-300">
            Learn More
          </button>
        </div>
      </div>

      <!-- Card 2: Secure Cloud Storage -->
      <div class="group bg-stone-50 dark:bg-stone-800 rounded-lg overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 ease-in-out transform hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-amber-500/30 border-2 border-stone-200 dark:border-stone-700 relative">
        <div class="absolute inset-0 bg-gradient-to-br from-amber-100/30 via-stone-100/30 to-zinc-100/30 dark:from-amber-900/20 dark:via-stone-900/20 dark:to-zinc-900/20 rounded-lg opacity-0 transition-opacity duration-300 group-hover:opacity-100" style="clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 80% 100%, 0% 100%);"></div>
        <div class="relative p-6 sm:p-8 z-10">
          <img class="w-16 h-16 mb-4 sm:mb-6 mx-auto" src="https://picsum.photos/id/29/64/64" alt="Storage Icon">
          <h3 class="text-2xl sm:text-3xl font-bold text-amber-800 dark:text-amber-500 mb-3 text-center tracking-wider">Secure Cloud Storage</h3>
          <p class="text-stone-700 dark:text-stone-300 text-base sm:text-lg leading-relaxed mb-6 text-center">
            Keep your data safe with our robust, encrypted cloud storage solutions.
          </p>
          <ul class="space-y-3 mb-6">
            <li class="flex items-center text-stone-600 dark:text-stone-400">
              <svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              End-to-End Encryption
            </li>
            <li class="flex items-center text-stone-600 dark:text-stone-400">
              <svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              Automated Backups
            </li>
            <li class="flex items-center text-stone-600 dark:text-stone-400">
              <svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              Access Controls
            </li>
          </ul>
          <button class="block w-full py-3 px-6 rounded-md bg-amber-700 text-stone-50 font-semibold text-lg uppercase tracking-wider shadow-md hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:bg-amber-600 dark:hover:bg-amber-700 dark:focus:ring-amber-400 transition-colors duration-300">
            Explore Features
          </button>
        </div>
      </div>

      <!-- Card 3: Collaborative Workspace -->
      <div class="group bg-stone-50 dark:bg-stone-800 rounded-lg overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 ease-in-out transform hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-amber-500/30 border-2 border-stone-200 dark:border-stone-700 relative">
        <div class="absolute inset-0 bg-gradient-to-br from-amber-100/30 via-stone-100/30 to-zinc-100/30 dark:from-amber-900/20 dark:via-stone-900/20 dark:to-zinc-900/20 rounded-lg opacity-0 transition-opacity duration-300 group-hover:opacity-100" style="clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 80% 100%, 0% 100%);"></div>
        <div class="relative p-6 sm:p-8 z-10">
          <img class="w-16 h-16 mb-4 sm:mb-6 mx-auto" src="https://picsum.photos/id/35/64/64" alt="Collaboration Icon">
          <h3 class="text-2xl sm:text-3xl font-bold text-amber-800 dark:text-amber-500 mb-3 text-center tracking-wider">Collaborate Seamlessly</h3>
          <p class="text-stone-700 dark:text-stone-300 text-base sm:text-lg leading-relaxed mb-6 text-center">
            Empower your team with a shared, dynamic workspace for optimal productivity.
          </p>
          <ul class="space-y-3 mb-6">
            <li class="flex items-center text-stone-600 dark:text-stone-400">
              <svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              Live Document Editing
            </li>
            <li class="flex items-center text-stone-600 dark:text-stone-400">
              <svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              Integrated Communication
            </li>
            <li class="flex items-center text-stone-600 dark:text-stone-400">
              <svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              Task Management
            </li>
          </ul>
          <button class="block w-full py-3 px-6 rounded-md bg-amber-700 text-stone-50 font-semibold text-lg uppercase tracking-wider shadow-md hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:bg-amber-600 dark:hover:bg-amber-700 dark:focus:ring-amber-400 transition-colors duration-300">
            Start Collaborating
          </button>
        </div>
      </div>

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

Accordion Component

An interactive accordion component for food/restaurant websites, featuring candy/sweet color gradients, smooth transitions, and dark mode support. Designed to be responsive with a rich interface.

Open Preview

                <div class="max-w-4xl mx-auto p-4 sm:p-6 lg:p-8 rounded-xl bg-gradient-to-br from-purple-100 via-pink-100 to-lime-100 dark:from-purple-900 dark:via-pink-900 dark:to-lime-900 shadow-2xl overflow-hidden">
  <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-center mb-8 bg-clip-text text-transparent bg-gradient-to-r from-pink-500 via-purple-500 to-lime-500 dark:from-pink-300 dark:via-purple-300 dark:to-lime-300 transition-colors duration-500 ease-in-out">
    Sweet & Savory FAQs
  </h2>

  <div class="space-y-4">
    <!-- Accordion Item 1 -->
    <div class="group bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 ease-in-out overflow-hidden">
      <input type="checkbox" id="accordion-1" class="hidden peer" />
      <label for="accordion-1" class="flex items-center justify-between p-4 sm:p-5 lg:p-6 cursor-pointer transform hover:scale-[1.01] transition-transform duration-300 ease-in-out bg-gradient-to-r from-pink-200 to-purple-200 dark:from-pink-700 dark:to-purple-700 dark:text-white rounded-lg group-hover:from-pink-300 group-hover:to-purple-300 dark:group-hover:from-pink-600 dark:group-hover:to-purple-600">
        <div class="flex items-center">
          <span class="text-2xl mr-3 text-pink-700 dark:text-pink-300 group-hover:scale-110 transition-transform duration-300">🍰</span>
          <h3 class="text-lg sm:text-xl font-semibold text-pink-700 dark:text-pink-200 group-hover:text-pink-800 dark:group-hover:text-pink-100 transition-colors duration-300">
            What are your delivery hours?
          </h3>
        </div>
        <svg class="w-6 h-6 text-pink-700 dark:text-pink-200 transform peer-checked:rotate-180 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </label>
      <div class="peer-checked:max-h-96 max-h-0 overflow-hidden transition-all duration-500 ease-in-out bg-purple-50 dark:bg-gray-900 border-t-2 border-pink-100 dark:border-pink-800">
        <div class="p-4 sm:p-5 lg:p-6 text-gray-700 dark:text-gray-300 leading-relaxed">
          <p class="mb-3">We deliver delicious treats from <strong>9 AM to 10 PM, everyday!</strong> Whether it's for breakfast, lunch, or a late-night craving, we've got you covered.</p>
          <div class="flex items-center space-x-3 text-sm text-gray-500 dark:text-gray-400">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Delivery Personnel" class="w-8 h-8 rounded-full border-2 border-pink-300 dark:border-pink-600">
            <span>Estimated delivery time is usually 30-45 minutes.</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Accordion Item 2 -->
    <div class="group bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 ease-in-out overflow-hidden">
      <input type="checkbox" id="accordion-2" class="hidden peer" />
      <label for="accordion-2" class="flex items-center justify-between p-4 sm:p-5 lg:p-6 cursor-pointer transform hover:scale-[1.01] transition-transform duration-300 ease-in-out bg-gradient-to-r from-lime-200 to-green-200 dark:from-lime-700 dark:to-green-700 dark:text-white rounded-lg group-hover:from-lime-300 group-hover:to-green-300 dark:group-hover:from-lime-600 dark:group-hover:to-green-600">
        <div class="flex items-center">
          <span class="text-2xl mr-3 text-lime-700 dark:text-lime-300 group-hover:scale-110 transition-transform duration-300">🌱</span>
          <h3 class="text-lg sm:text-xl font-semibold text-lime-700 dark:text-lime-200 group-hover:text-lime-800 dark:group-hover:text-lime-100 transition-colors duration-300">
            Do you offer vegan or gluten-free options?
          </h3>
        </div>
        <svg class="w-6 h-6 text-lime-700 dark:text-lime-200 transform peer-checked:rotate-180 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </label>
      <div class="peer-checked:max-h-96 max-h-0 overflow-hidden transition-all duration-500 ease-in-out bg-green-50 dark:bg-gray-900 border-t-2 border-lime-100 dark:border-lime-800">
        <div class="p-4 sm:p-5 lg:p-6 text-gray-700 dark:text-gray-300 leading-relaxed">
          <p class="mb-3">Absolutely! We have a dedicated section for our delicious <strong>vegan and gluten-free items.</strong> Look for the special dietary icons next to the menu items.</p>
          <ul class="list-disc list-inside text-sm space-y-1">
            <li>Allergens are clearly marked.</li>
            <li>Customization options are available upon request.</li>
          </ul>
          <div class="mt-4 p-3 rounded-lg bg-lime-100 dark:bg-lime-800 flex items-center space-x-3">
            <img src="https://picsum.photos/60/60?random=1" alt="Vegan Dish" class="w-12 h-12 rounded-lg object-cover shadow border-2 border-lime-300 dark:border-lime-600">
            <p class="text-lime-800 dark:text-lime-200 text-sm font-medium">Try our new 'Green Goddess' smoothie!</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Accordion Item 3 -->
    <div class="group bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 ease-in-out overflow-hidden">
      <input type="checkbox" id="accordion-3" class="hidden peer" />
      <label for="accordion-3" class="flex items-center justify-between p-4 sm:p-5 lg:p-6 cursor-pointer transform hover:scale-[1.01] transition-transform duration-300 ease-in-out bg-gradient-to-r from-blue-200 to-purple-200 dark:from-blue-700 dark:to-purple-700 dark:text-white rounded-lg group-hover:from-blue-300 group-hover:to-purple-300 dark:group-hover:from-blue-600 dark:group-hover:to-purple-600">
        <div class="flex items-center">
          <span class="text-2xl mr-3 text-blue-700 dark:text-blue-300 group-hover:scale-110 transition-transform duration-300">💳</span>
          <h3 class="text-lg sm:text-xl font-semibold text-blue-700 dark:text-blue-200 group-hover:text-blue-800 dark:group-hover:text-blue-100 transition-colors duration-300">
            What payment methods do you accept?
          </h3>
        </div>
        <svg class="w-6 h-6 text-blue-700 dark:text-blue-200 transform peer-checked:rotate-180 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </label>
      <div class="peer-checked:max-h-96 max-h-0 overflow-hidden transition-all duration-500 ease-in-out bg-purple-50 dark:bg-gray-900 border-t-2 border-blue-100 dark:border-blue-800">
        <div class="p-4 sm:p-5 lg:p-6 text-gray-700 dark:text-gray-300 leading-relaxed">
          <p class="mb-3">We accept a wide range of payment options for your convenience, including:</p>
          <ul class="list-disc list-inside space-y-1 text-sm">
            <li><strong>Credit/Debit Cards:</strong> Visa, MasterCard, American Express</li>
            <li><strong>Digital Wallets:</strong> Apple Pay, Google Pay</li>
            <li><strong>Online Payment Systems:</strong> PayPal</li>
          </ul>
          <div class="mt-4 flex items-center space-x-4">
            <img src="https://picsum.photos/50/30?random=2" alt="Visa Logo" class="h-6 object-contain">
            <img src="https://picsum.photos/50/30?random=3" alt="MasterCard Logo" class="h-6 object-contain">
            <img src="https://picsum.photos/50/30?random=4" alt="PayPal Logo" class="h-6 object-contain">
          </div>
        </div>
      </div>
    </div>

    <!-- Accordion Item 4 -->
    <div class="group bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 ease-in-out overflow-hidden">
      <input type="checkbox" id="accordion-4" class="hidden peer" />
      <label for="accordion-4" class="flex items-center justify-between p-4 sm:p-5 lg:p-6 cursor-pointer transform hover:scale-[1.01] transition-transform duration-300 ease-in-out bg-gradient-to-r from-red-200 to-pink-200 dark:from-red-700 dark:to-pink-700 dark:text-white rounded-lg group-hover:from-red-300 group-hover:to-pink-300 dark:group-hover:from-red-600 dark:group-hover:to-pink-600">
        <div class="flex items-center">
          <span class="text-2xl mr-3 text-red-700 dark:text-red-300 group-hover:scale-110 transition-transform duration-300">⭐️</span>
          <h3 class="text-lg sm:text-xl font-semibold text-red-700 dark:text-red-200 group-hover:text-red-800 dark:group-hover:text-red-100 transition-colors duration-300">
            How can I leave a review or give feedback?
          </h3>
        </div>
        <svg class="w-6 h-6 text-red-700 dark:text-red-200 transform peer-checked:rotate-180 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
      </label>
      <div class="peer-checked:max-h-96 max-h-0 overflow-hidden transition-all duration-500 ease-in-out bg-pink-50 dark:bg-gray-900 border-t-2 border-red-100 dark:border-red-800">
        <div class="p-4 sm:p-5 lg:p-6 text-gray-700 dark:text-gray-300 leading-relaxed">
          <p class="mb-3">Your feedback is incredibly valuable to us! You can leave a review directly on our website under the 'My Orders' section after your delivery.</p>
          <p class="mb-3">Alternatively, feel free to use our dedicated feedback form or contact our customer support team.</p>
          <a href="#" class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-red-500 to-pink-500 text-white font-semibold rounded-full shadow-lg hover:from-red-600 hover:to-pink-600 transition-all duration-300 ease-in-out transform hover:scale-105">
            <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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Submit Feedback
          </a>
        </div>
      </div>
    </div>

  </div>
</div>

A simple, responsive infographic component for cryptocurrency/blockchain applications with a dark mode UI and forest/green color palette. Displays key metrics like total transactions, daily volume, and active users.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-900 dark:bg-gray-950 text-emerald-100 font-sans">
  <div class="max-w-7xl mx-auto py-8 sm:py-12 md:py-16 px-4 sm:px-6 lg:px-8 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-xl border border-emerald-700 dark:border-emerald-900">
    <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-center text-emerald-100 mb-8 sm:mb-12 leading-tight">
      Blockchain Network Overview
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
      <!-- Metric Card 1: Total Transactions -->
      <div class="flex flex-col items-center p-6 rounded-lg bg-gray-700 dark:bg-gray-800 shadow-lg border border-emerald-600 dark:border-emerald-800 transform transition duration-300 hover:scale-105 hover:shadow-2xl">
        <div class="text-5xl sm:text-6xl font-bold text-emerald-400 mb-3">
          <svg class="w-16 h-16 sm:w-20 sm:h-20 text-emerald-500 mb-4" 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.75 17L12 21.75M12 21.75V19.5M12 21.75L14.25 17M17.25 10.5V7.5C17.25 6.94772 16.8023 6.5 16.25 6.5H7.75C7.19772 6.5 6.75 6.94772 6.75 7.5V10.5M17.25 10.5H6.75M17.25 10.5V13.5C17.25 14.0523 16.8023 14.5 16.25 14.5H7.75C7.19772 14.5 6.75 14.0523 6.75 13.5V10.5M17.25 10.5H19.5C20.0523 10.5 20.5 10.0523 20.5 9.5V8.25M6.75 10.5H4.5C3.94772 10.5 3.5 10.0523 3.5 9.5V8.25M12.5 17.5H11.5C10.9477 17.5 10.5 17.0523 10.5 16.5V15.5C10.5 14.9477 10.9477 14.5 11.5 14.5H12.5C13.0523 14.5 13.5 14.9477 13.5 15.5V16.5C13.5 17.0523 13.0523 17.5 12.5 17.5Z"></path>
          </svg>
          240M+
        </div>
        <p class="text-lg sm:text-xl font-semibold text-emerald-200 text-center uppercase tracking-wide">Total Transactions</p>
        <p class="text-sm text-gray-400 mt-2">Since Inception</p>
      </div>

      <!-- Metric Card 2: Daily Transaction Volume -->
      <div class="flex flex-col items-center p-6 rounded-lg bg-gray-700 dark:bg-gray-800 shadow-lg border border-emerald-600 dark:border-emerald-800 transform transition duration-300 hover:scale-105 hover:shadow-2xl">
        <div class="text-5xl sm:text-6xl font-bold text-emerald-400 mb-3">
          <svg class="w-16 h-16 sm:w-20 sm:h-20 text-emerald-500 mb-4" 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 9l-4 4m0 0l-4-4m4 4V3m5 0h-1.5a2.5 2.5 0 01-2.5-2.5V3m5 0a2.5 2.5 0 012.5 2.5V3m0 0h1.5a2.5 2.5 0 012.5 2.5V9m-11 5V3m0 0L8.5 7.5M8.5 7.5L5 9m3.5-1.5L5 9m0 0l-4 4m4-4l-4 4m0 0L3 17m-2 2l-1 1m0 0V21m0 0L3 19m-2-2l-1 1m0 0a2 2 0 00-2-2V9m0 0l-4-4m-4 4L7 9m-4 4l-4-4m-4 4l-4 4M5 9l-4 4m0 0l-4 4M21 21v-4m0 4l-4-4m4 4l4-4"></path>

          
          
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 3m0 0l3-3m-3 3V3M21 6l-3 3m0 0l-3-3m3 3V3M3 18l3-3m0 0l3 3m-3-3v3M21 18l-3-3m0 0l-3 3m3-3v3"></path>
          </svg>
          $1.5B+
        </div>
        <p class="text-lg sm:text-xl font-semibold text-emerald-200 text-center uppercase tracking-wide">Daily Volume</p>
        <p class="text-sm text-gray-400 mt-2">Last 24 Hours</p>
      </div>

      <!-- Metric Card 3: Active Wallets -->
      <div class="flex flex-col items-center p-6 rounded-lg bg-gray-700 dark:bg-gray-800 shadow-lg border border-emerald-600 dark:border-emerald-800 transform transition duration-300 hover:scale-105 hover:shadow-2xl">
        <div class="text-5xl sm:text-6xl font-bold text-emerald-400 mb-3">
          <svg class="w-16 h-16 sm:w-20 sm:h-20 text-emerald-500 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2m20 0h-2M13 18v-1a6.002 6.002 0 00-4-5.659V7a6 6 0 0112 0v3.341M4 14h6m-6 0h6m-6 0v6m6-6v6m-3 6h6m-6 0h6m-6 0h6m-6 0v6m6-6v6"></path>
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354V6m0 0V4.354m0 1.646V4.354m0 0H9m3 0H15m0 0H12m0 0V4.354m0 0V6m0-1.646l-4.707 4.707C6.67 10.492 6 11.666 6 13c0 2.761 2.239 5 5 5h2c2.761 0 5-2.239 5-5 0-1.334-.67-2.508-1.707-3.293L12 4.354zM12 4.354V12m0 0V4.354m0 1.646V4.354m0 0H9m3 0H15m0 0H12m0 0V4.354m0 0V6m0-1.646l-4.707 4.707C6.67 10.492 6 11.666 6 13c0 2.761 2.239 5 5 5h2c2.761 0 5-2.239 5-5 0-1.334-.67-2.508-1.707-3.293L12 4.354z"></path>
          </svg>
          500K+
        </div>
        <p class="text-lg sm:text-xl font-semibold text-emerald-200 text-center uppercase tracking-wide">Active Users</p>
        <p class="text-sm text-gray-400 mt-2">Weekly Unique</p>
      </div>
    </div>

    <div class="mt-12 text-center">
      <p class="text-md sm:text-lg text-emerald-300 font-medium">
        <span class="block">"Securing the future, one block at a time."</span>
        <span class="block text-sm text-gray-400 mt-2">Data updated every 5 minutes.</span>
      </p>
    </div>
  </div>
</div>

Product Comparison Component

A responsive product comparison component with warm neutral colors and subtle neon/glow effects, designed for educational platforms. Includes dark mode support and semantic HTML.

Open Preview

                <div class="font-sans bg-amber-50 dark:bg-zinc-900 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-center text-4xl font-extrabold text-amber-900 dark:text-amber-100 mb-4 tracking-tight leading-none drop-shadow-sm transition-colors duration-300">
      Compare Learning Plans
    </h2>
    <p class="text-center text-lg text-amber-700 dark:text-amber-300 mb-12 max-w-2xl mx-auto leading-relaxed opacity-90 transition-colors duration-300">
      Find the perfect learning path that fits your budget and educational goals with a detailed side-by-side comparison.
    </p>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Plan 1: Basic -->
      <div class="relative flex flex-col bg-white dark:bg-zinc-800 rounded-3xl shadow-xl overflow-hidden group transition-all duration-300 transform hover:scale-105 hover:shadow-2xl">
        <div class="p-8 bg-gradient-to-br from-amber-100 to-amber-50 dark:from-zinc-700 dark:to-zinc-800 transition-colors duration-300 rounded-t-3xl border-b border-amber-200 dark:border-zinc-700">
          <h3 class="text-2xl font-bold text-amber-900 dark:text-amber-100 mb-2 drop-shadow-md">Starter</h3>
          <p class="text-amber-700 dark:text-amber-300">Get started with fundamental concepts.</p>
          <div class="mt-4 flex items-baseline">
            <p class="text-5xl font-extrabold text-amber-900 dark:text-amber-100 transition-colors duration-300">$19</p>
            <p class="ml-1 text-xl font-medium text-amber-600 dark:text-amber-400">/month</p>
          </div>
        </div>
        <ul role="list" class="flex-1 px-6 py-8 space-y-4 text-amber-800 dark:text-amber-200">
          <li class="flex items-center">
            <svg class="h-6 w-6 text-amber-500 dark:text-amber-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <span>50+ Basic Courses</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 text-amber-500 dark:text-amber-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <span>Access to Community Forum</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 text-amber-500 dark:text-amber-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <span>Email Support</span>
          </li>
          <li class="flex items-center text-amber-400 dark:text-amber-600 opacity-60">
            <svg class="h-6 w-6 text-amber-400 dark:text-amber-600 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
            </svg>
            <span>No Certificates</span>
          </li>
          <li class="flex items-center text-amber-400 dark:text-amber-600 opacity-60">
            <svg class="h-6 w-6 text-amber-400 dark:text-amber-600 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
            </svg>
            <span>No 1-on-1 Mentorship</span>
          </li>
        </ul>
        <div class="mt-auto p-6 lg:p-8 bg-gray-50 dark:bg-zinc-700/50 rounded-b-3xl">
          <a href="#" class="block w-full py-3 px-6 text-center rounded-xl bg-amber-600 dark:bg-amber-500 text-white font-semibold text-lg shadow-md hover:bg-amber-700 dark:hover:bg-amber-600 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 transition-all duration-300 transform hover:-translate-y-0.5 glow-button">
            Choose Starter
          </a>
        </div>
      </div>

      <!-- Plan 2: Pro (Recommended) -->
      <div class="relative flex flex-col bg-white dark:bg-zinc-800 rounded-3xl shadow-xl overflow-hidden group transition-all duration-300 transform hover:scale-105 hover:shadow-2xl border-2 border-amber-500 dark:border-amber-400">
        <div class="absolute -top-3 -right-3 bg-amber-500 dark:bg-amber-400 text-white dark:text-zinc-900 px-4 py-1 rounded-full text-sm font-semibold rotate-3 shadow-lg glow-badge">
          Recommended
        </div>
        <div class="p-8 bg-gradient-to-br from-amber-200 to-amber-100 dark:from-zinc-600 dark:to-zinc-700 transition-colors duration-300 rounded-t-3xl border-b border-amber-300 dark:border-zinc-600">
          <h3 class="text-2xl font-bold text-amber-900 dark:text-amber-100 mb-2 drop-shadow-md">Pro</h3>
          <p class="text-amber-700 dark:text-amber-300">Deep dive into advanced topics and projects.</p>
          <div class="mt-4 flex items-baseline">
            <p class="text-5xl font-extrabold text-amber-900 dark:text-amber-100 transition-colors duration-300">$49</p>
            <p class="ml-1 text-xl font-medium text-amber-600 dark:text-amber-400">/month</p>
          </div>
        </div>
        <ul role="list" class="flex-1 px-6 py-8 space-y-4 text-amber-800 dark:text-amber-200">
          <li class="flex items-center">
            <svg class="h-6 w-6 text-amber-500 dark:text-amber-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <span>All Starter features</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 text-amber-500 dark:text-amber-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <span>200+ Advanced Courses</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 text-amber-500 dark:text-amber-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <span>Premium Support (24/7)</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 text-amber-500 dark:text-amber-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <span>Course Completion Certificates</span>
          </li>
           <li class="flex items-center text-amber-400 dark:text-amber-600 opacity-60">
            <svg class="h-6 w-6 text-amber-400 dark:text-amber-600 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
            </svg>
            <span>No 1-on-1 Mentorship</span>
          </li>
        </ul>
        <div class="mt-auto p-6 lg:p-8 bg-gray-50 dark:bg-zinc-700/50 rounded-b-3xl">
          <a href="#" class="block w-full py-3 px-6 text-center rounded-xl bg-amber-600 dark:bg-amber-500 text-white font-semibold text-lg shadow-md hover:bg-amber-700 dark:hover:bg-amber-600 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 transition-all duration-300 transform hover:-translate-y-0.5 glow-button">
            Choose Pro
          </a>
        </div>
      </div>

      <!-- Plan 3: Enterprise -->
      <div class="relative flex flex-col bg-white dark:bg-zinc-800 rounded-3xl shadow-xl overflow-hidden group transition-all duration-300 transform hover:scale-105 hover:shadow-2xl">
        <div class="p-8 bg-gradient-to-br from-amber-100 to-amber-50 dark:from-zinc-700 dark:to-zinc-800 transition-colors duration-300 rounded-t-3xl border-b border-amber-200 dark:border-zinc-700">
          <h3 class="text-2xl font-bold text-amber-900 dark:text-amber-100 mb-2 drop-shadow-md">Enterprise</h3>
          <p class="text-amber-700 dark:text-amber-300">Custom solutions for teams and organizations.</p>
          <div class="mt-4 flex items-baseline">
            <p class="text-4xl font-extrabold text-amber-900 dark:text-amber-100 transition-colors duration-300">Custom</p>
            <p class="ml-1 text-xl font-medium text-amber-600 dark:text-amber-400">/solution</p>
          </div>
        </div>
        <ul role="list" class="flex-1 px-6 py-8 space-y-4 text-amber-800 dark:text-amber-200">
          <li class="flex items-center">
            <svg class="h-6 w-6 text-amber-500 dark:text-amber-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <span>All Pro features</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 text-amber-500 dark:text-amber-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <span>Unlimited Courses & Projects</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 text-amber-500 dark:text-amber-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <span>Dedicated Account Manager</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 text-amber-500 dark:text-amber-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <span>Custom SSO Integration</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 text-amber-500 dark:text-amber-400 mr-2 flex-shrink-0" filling="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <span>1-on-1 Mentorship Sessions</span>
          </li>
        </ul>
        <div class="mt-auto p-6 lg:p-8 bg-gray-50 dark:bg-zinc-700/50 rounded-b-3xl">
          <a href="#" class="block w-full py-3 px-6 text-center rounded-xl bg-amber-600 dark:bg-amber-500 text-white font-semibold text-lg shadow-md hover:bg-amber-700 dark:hover:bg-amber-600 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 transition-all duration-300 transform hover:-translate-y-0.5 glow-button">
            Contact Sales
          </a>
        </div>
      </div>
    </div>

     <!-- Custom Styling for Glow Effects (add this to a <style> tag or CSS file if not using CDN for this) -->
    <style>
      @keyframes pulse-glow {
        0% { box-shadow: 0 0 0px rgba(251, 191, 36, 0.4); }
        50% { box-shadow: 0 0 15px rgba(251, 191, 36, 0.7), 0 0 20px rgba(251, 191, 36, 0.5); }
        100% { box-shadow: 0 0 0px rgba(251, 191, 36, 0.4); }
      }
      .glow-button:hover {
        animation: pulse-glow 1.5s infinite;
      }
      .glow-badge {
        box-shadow: 0 0 5px rgba(251, 191, 36, 0.6);
      }
      .dark .glow-badge {
         box-shadow: 0 0 5px rgba(251, 191, 36, 0.6);
      }
    </style>
  </div>
</div>

Industrial_Purple_Comments_Section

A complex, responsive comments section component with an industrial design aesthetic and a purple/violet color scheme, suitable for blogs or content consumption. Features exposed elements, raw material feel, and dark mode support.

Open Preview

                <section class="font-sans bg-gray-50 dark:bg-gray-950 py-12 px-4 shadow-inner dark:shadow-purple-950 border-t border-purple-200 dark:border-purple-800">
  <div class="max-w-4xl mx-auto rounded-lg overflow-hidden bg-white dark:bg-gray-900 border-2 border-purple-300 dark:border-purple-700 shadow-xl dark:shadow-2xl dark:shadow-purple-900/50 relative">
    <!-- Top exposed 'metal' plate effect -->
    <div class="absolute top-0 left-0 right-0 h-4 bg-gradient-to-b from-purple-200/50 dark:from-purple-900/50 to-transparent dark:to-transparent border-b border-purple-300 dark:border-purple-800 -z-0 pointer-events-none"></div>
    <div class="absolute bottom-0 left-0 right-0 h-4 bg-gradient-to-t from-purple-200/50 dark:from-purple-900/50 to-transparent dark:to-transparent border-t border-purple-300 dark:border-purple-800 -z-0 pointer-events-none"></div>

    <div class="p-6 sm:p-8 relative z-10">
      <h2 class="text-3xl font-bold text-gray-800 dark:text-purple-300 mb-6 border-b-2 border-purple-400 dark:border-purple-600 pb-3 flex items-center justify-between">
        Comments
        <span class="text-sm text-gray-600 dark:text-purple-400 font-normal"> (5)</span>
      </h2>

      <!-- New Comment Section -->
      <div class="mb-10 p-5 bg-gray-100 dark:bg-gray-800 rounded-lg border border-purple-200 dark:border-purple-700 shadow-inner dark:shadow-purple-900/30">
        <h3 class="text-xl font-semibold text-gray-700 dark:text-purple-400 mb-4">Leave a Comment</h3>
        <textarea
          class="w-full p-4 mb-4 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 rounded-md border border-purple-300 dark:border-purple-600 focus:ring-2 focus:ring-purple-500 focus:outline-none transition-all duration-300 shadow-sm dark:shadow-purple-900/20 resize-y"
          rows="4"
          placeholder="Share your thoughts..."
        ></textarea>
        <div class="flex flex-col sm:flex-row gap-4 mb-4">
          <input
            type="text"
            class="flex-1 p-3 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 rounded-md border border-purple-300 dark:border-purple-600 focus:ring-2 focus:ring-purple-500 focus:outline-none transition-all duration-300 shadow-sm dark:shadow-purple-900/20"
            placeholder="Your Name"
          />
          <input
            type="email"
            class="flex-1 p-3 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 rounded-md border border-purple-300 dark:border-purple-600 focus:ring-2 focus:ring-purple-500 focus:outline-none transition-all duration-300 shadow-sm dark:shadow-purple-900/20"
            placeholder="Your Email (private)"
          />
        </div>
        <button class="w-full sm:w-auto px-6 py-3 bg-purple-600 hover:bg-purple-700 text-white font-semibold rounded-md shadow-lg dark:shadow-purple-800/50 transform hover:-translate-y-0.5 transition-all duration-300 border-b-2 border-purple-800 dark:border-purple-950 inline-flex items-center justify-center">
          Post Comment
          <svg class="ml-2 -mr-1 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        </button>
      </div>

      <!-- Comments List -->
      <div class="space-y-8">
        <!-- Comment 1 -->
        <div class="flex flex-col sm:flex-row p-6 bg-gray-50 dark:bg-gray-850 rounded-lg shadow-md dark:shadow-purple-900/30 border border-purple-200 dark:border-purple-700">
          <div class="flex-shrink-0 mr-0 sm:mr-4 mb-4 sm:mb-0 flex justify-center">
            <img class="w-16 h-16 rounded-full border-2 border-purple-400 dark:border-purple-600 object-cover shadow-md" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar">
          </div>
          <div class="flex-grow">
            <div class="flex flex-col sm:flex-row sm:items-baseline sm:justify-between mb-2">
              <h4 class="font-bold text-lg text-gray-800 dark:text-purple-300">John Doe</h4>
              <span class="text-sm text-gray-500 dark:text-purple-400">2 hours ago</span>
            </div>
            <p class="text-gray-700 dark:text-gray-200 leading-relaxed mb-4">
              This article provided some fascinating insights into the topic. The industrial aesthetics for the comments section truly set a unique tone!
            </p>
            <div class="flex gap-4">
              <button class="text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 flex items-center text-sm font-semibold transform hover:scale-105 transition-transform duration-200">
                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.186-.828m9.54-4.067A9 9 0 0012 4.091V12h8z"></path></svg>
                Reply
              </button>
              <button class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-300 flex items-center text-sm font-semibold transform hover:scale-105 transition-transform duration-200">
                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path></svg>
                Upvote (3)
              </button>
            </div>
          </div>
        </div>

        <!-- Comment 2 (Reply) -->
        <div class="ml-0 sm:ml-16 flex flex-col sm:flex-row p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-inner dark:shadow-purple-950/30 border border-purple-200 dark:border-purple-700 relative">
          <div class="absolute top-0 left-0 w-full h-full border-l-4 border-purple-400 dark:border-purple-600 rounded-l-lg transform -translate-x-2 sm:-translate-x-1 sm:translate-y-0.5 pointer-events-none"></div>
          <div class="flex-shrink-0 mr-0 sm:mr-4 mb-4 sm:mb-0 flex justify-center z-10">
            <img class="w-16 h-16 rounded-full border-2 border-purple-400 dark:border-purple-600 object-cover shadow-md" src="https://randomuser.me/api/portraits/women/24.jpg" alt="Avatar">
          </div>
          <div class="flex-grow z-10">
            <div class="flex flex-col sm:flex-row sm:items-baseline sm:justify-between mb-2">
              <h4 class="font-bold text-lg text-gray-800 dark:text-purple-300">Jane Smith</h4>
              <span class="text-sm text-gray-500 dark:text-purple-400">1 hour ago</span>
            </div>
            <p class="text-gray-700 dark:text-gray-200 leading-relaxed mb-4">
              @John Doe, I totally agree! The design choice adds an interesting layer to the user experience. Very well implemented.
            </p>
            <button class="text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 flex items-center text-sm font-semibold transform hover:scale-105 transition-transform duration-200">
              <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.186-.828m9.54-4.067A9 9 0 0012 4.091V12h8z"></path></svg>
              Reply
            </button>
          </div>
        </div>

        <!-- Comment 3 -->
        <div class="flex flex-col sm:flex-row p-6 bg-gray-50 dark:bg-gray-850 rounded-lg shadow-md dark:shadow-purple-900/30 border border-purple-200 dark:border-purple-700">
          <div class="flex-shrink-0 mr-0 sm:mr-4 mb-4 sm:mb-0 flex justify-center">
            <img class="w-16 h-16 rounded-full border-2 border-purple-400 dark:border-purple-600 object-cover shadow-md" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
          </div>
          <div class="flex-grow">
            <div class="flex flex-col sm:flex-row sm:items-baseline sm:justify-between mb-2">
              <h4 class="font-bold text-lg text-gray-800 dark:text-purple-300">Alex P.</h4>
              <span class="text-sm text-gray-500 dark:text-purple-400">5 hours ago</span>
            </div>
            <p class="text-gray-700 dark:text-gray-200 leading-relaxed mb-4">
              Great job explaining the complex concepts. I found the examples particularly helpful for understanding the nuances.
              Keep up the excellent work!
            </p>
            <div class="flex gap-4">
              <button class="text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 flex items-center text-sm font-semibold transform hover:scale-105 transition-transform duration-200">
                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.186-.828m9.54-4.067A9 9 0 0012 4.091V12h8z"></path></svg>
                Reply
              </button>
              <button class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-300 flex items-center text-sm font-semibold transform hover:scale-105 transition-transform duration-200">
                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path></svg>
                Upvote (7)
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- Load More Button -->
      <div class="mt-10 pt-6 border-t-2 border-purple-400 dark:border-purple-600 text-center">
        <button class="inline-flex items-center px-8 py-4 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-purple-200 font-semibold rounded-md shadow-md dark:shadow-purple-950/40 transform hover:-translate-y-1 transition-all duration-300 border-b-2 border-gray-400 dark:border-purple-800">
          Load More Comments
          <svg class="ml-3 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="M19 9l-7 7-7-7"></path></svg>
        </button>
      </div>
    </div>
  </div>
</section>

1 ... 22 23 24 25 26 ... 335

Search Components

Categories

All Components

Watercolor/Artistic Tag Cloud Component

Login/Signup Component

Price Display Component

User Profiles Component

Functional Components Component

ArtDeco_EarthTones_Cards_Technology_SaaS

Accordion Component

Infographics Component

Product Comparison Component

Industrial_Purple_Comments_Section