Search Components

All Components

Browse all available Tailwind CSS components

Gaming Product Reviews Component

A playful and vibrant product reviews component for gaming websites, featuring rounded elements, high-saturation colors, and a rich interface with star ratings, user avatars, review text, and like/dislike buttons. Fully responsive with dark mode support.

Open Preview

                <div class="font-sans p-4 sm:p-6 md:p-8 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-purple-900 via-pink-900 to-indigo-900 rounded-3xl shadow-2xl max-w-4xl mx-auto transform hover:scale-105 transition-all duration-300">
  <div class="flex items-center justify-between mb-6">
    <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-purple-800 dark:text-purple-300 drop-shadow-lg leading-tight">
      Player Reviews
    </h2>
    <div class="relative group">
      <button class="px-4 py-2 sm:px-6 sm:py-3 bg-yellow-400 hover:bg-yellow-500 text-purple-900 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:text-purple-100 font-bold rounded-full shadow-lg transition-all duration-300 transform active:scale-95 flex items-center">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
        Write a Review
      </button>
      <div class="absolute hidden group-hover:block bg-white dark:bg-gray-800 border dark:border-gray-700 rounded-lg p-3 text-sm text-gray-800 dark:text-gray-200 right-0 mt-2 whitespace-nowrap shadow-xl z-10 animate-fade-in-down">
        Share your experience!
      </div>
    </div>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8">
    <!-- Review Card 1 -->
    <article class="bg-white dark:bg-gray-800 rounded-2xl p-5 shadow-xl border-t-4 border-yellow-400 dark:border-yellow-600 transform hover:-translate-y-2 transition-transform duration-300">
      <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full mr-4 border-2 border-purple-400 dark:border-purple-600 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar of John Doe">
        <div>
          <h3 class="text-lg sm:text-xl font-bold text-purple-700 dark:text-purple-300">PlayerOne</h3>
          <time datetime="2023-01-15" class="text-sm text-gray-500 dark:text-gray-400">January 15, 2023</time>
        </div>
      </div>
      <div class="flex items-center mb-4">
        <div class="flex text-yellow-500 dark:text-yellow-400">
          <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 fill-current text-gray-300 dark:text-gray-600" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        </div>
        <p class="ml-2 text-sm font-semibold text-gray-600 dark:text-gray-300">4.0</p>
      </div>
      <p class="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed line-clamp-4">
        "Highly addictive gameplay! I've lost countless hours to this game, and I don't regret a single one. The graphics are stunning, and the storyline keeps you totally engaged. A must-play for any serious gamer. The multiplayer could use some tweaks, but overall, solid."
      </p>
      <div class="flex justify-between items-center">
        <div class="flex space-x-2">
          <button class="flex items-center text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300 font-bold">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.995 20H18a2 2 0 002-2V8.118l-.7-1.12A4 4 0 0015.588 5H13V3a2 2 0 00-2-2H9.847a2 2 0 00-1.802 1.1l-.813 1.626A2 2 0 014.72 6H2.667A2.667 2.667 0 000 8.667v1.666A2.667 2.667 0 002.667 13H3a1 1 0 001-1v-1.667a4 4 0 01.996-2.502L6 10.333z"></path></svg>
            <span class="text-sm">123</span>
          </button>
          <button class="flex items-center text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 font-bold">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18 9.5a1.5 1.5 0 11-3 0v-6a1.5 1.5 0 013 0v6zM14 9.667V4.237a2 2 0 00-1.106-1.79l-.05-.025A4 4 0 0011.005 0H2a2 2 0 00-2 2v10.882l.7 1.12A4 4 0 004.412 15H7v2a2 2 0 002 2h2.153a2 2 0 001.802-1.1l.813-1.626A2 2 0 0115.28 14H17.333A2.667 2.667 0 0020 11.333V9.667A2.667 2.667 0 0017.333 7H17a1 1 0 00-1 1v1.667a4 4 0 01-.996 2.502L14 9.667z"></path></svg>
            <span class="text-sm">5</span>
          </button>
        </div>
        <a href="#" class="text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-200 font-semibold text-sm transition-colors duration-200">Read More</a>
      </div>
    </article>

    <!-- Review Card 2 -->
    <article class="bg-white dark:bg-gray-800 rounded-2xl p-5 shadow-xl border-t-4 border-green-400 dark:border-green-600 transform hover:-translate-y-2 transition-transform duration-300">
      <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full mr-4 border-2 border-pink-400 dark:border-pink-600 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar of Jane Smith">
        <div>
          <h3 class="text-lg sm:text-xl font-bold text-green-700 dark:text-green-300">PixelQueen</h3>
          <time datetime="2023-01-20" class="text-sm text-gray-500 dark:text-gray-400">January 20, 2023</time>
        </div>
      </div>
      <div class="flex items-center mb-4">
        <div class="flex text-yellow-500 dark:text-yellow-400">
          <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        </div>
        <p class="ml-2 text-sm font-semibold text-gray-600 dark:text-gray-300">5.0</p>
      </div>
      <p class="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed line-clamp-4">
        "Absolutely gorgeous game! The art style is unique and the characters are so charming. Every level feels fresh, and the puzzles are just challenging enough to be fun without being frustrating. Highly recommend for a relaxing yet engaging experience. Best game I've played all year!"
      </p>
      <div class="flex justify-between items-center">
        <div class="flex space-x-2">
          <button class="flex items-center text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300 font-bold">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.995 20H18a2 2 0 002-2V8.118l-.7-1.12A4 4 0 0015.588 5H13V3a2 2 0 00-2-2H9.847a2 2 0 00-1.802 1.1l-.813 1.626A2 2 0 014.72 6H2.667A2.667 2.667 0 000 8.667v1.666A2.667 2.667 0 002.667 13H3a1 1 0 001-1v-1.667a4 4 0 01.996-2.502L6 10.333z"></path></svg>
            <span class="text-sm">256</span>
          </button>
          <button class="flex items-center text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 font-bold">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18 9.5a1.5 1.5 0 11-3 0v-6a1.5 1.5 0 013 0v6zM14 9.667V4.237a2 2 0 00-1.106-1.79l-.05-.025A4 4 0 0011.005 0H2a2 2 0 00-2 2v10.882l.7 1.12A4 4 0 004.412 15H7v2a2 2 0 002 2h2.153a2 2 0 001.802-1.1l.813-1.626A2 2 0 0115.28 14H17.333A2.667 2.667 0 0020 11.333V9.667A2.667 2.667 0 0017.333 7H17a1 1 0 00-1 1v1.667a4 4 0 01-.996 2.502L14 9.667z"></path></svg>
            <span class="text-sm">12</span>
          </button>
        </div>
        <a href="#" class="text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-200 font-semibold text-sm transition-colors duration-200">Read More</a>
      </div>
    </article>

    <!-- Review Card 3 -->
    <article class="bg-white dark:bg-gray-800 rounded-2xl p-5 shadow-xl border-t-4 border-orange-400 dark:border-orange-600 transform hover:-translate-y-2 transition-transform duration-300">
      <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full mr-4 border-2 border-green-400 dark:border-green-600 object-cover" src="https://randomuser.me/api/portraits/men/8.jpg" alt="Avatar of Alex Gamer">
        <div>
          <h3 class="text-lg sm:text-xl font-bold text-orange-700 dark:text-orange-300">ArcadeKing</h3>
          <time datetime="2023-01-25" class="text-sm text-gray-500 dark:text-gray-400">January 25, 2023</time>
        </div>
      </div>
      <div class="flex items-center mb-4">
        <div class="flex text-yellow-500 dark:text-yellow-400">
          <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 fill-current text-gray-300 dark:text-gray-600" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 fill-current text-gray-300 dark:text-gray-600" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        </div>
        <p class="ml-2 text-sm font-semibold text-gray-600 dark:text-gray-300">3.0</p>
      </div>
      <p class="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed line-clamp-4">
        "It's okay. Decent graphics but the controls are a bit clunky on PC. I had to remap a lot of keys. The story is pretty standard, nothing groundbreaking. Fun for a few hours, but then it gets repetitive. Good time-waster, but probably won't revisit often."
      </p>
      <div class="flex justify-between items-center">
        <div class="flex space-x-2">
          <button class="flex items-center text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300 font-bold">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.995 20H18a2 2 0 002-2V8.118l-.7-1.12A4 4 0 0015.588 5H13V3a2 2 0 00-2-2H9.847a2 2 0 00-1.802 1.1l-.813 1.626A2 2 0 014.72 6H2.667A2.667 2.667 0 000 8.667v1.666A2.667 2.667 0 002.667 13H3a1 1 0 001-1v-1.667a4 4 0 01.996-2.502L6 10.333z"></path></svg>
            <span class="text-sm">78</span>
          </button>
          <button class="flex items-center text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 font-bold">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18 9.5a1.5 1.5 0 11-3 0v-6a1.5 1.5 0 013 0v6zM14 9.667V4.237a2 2 0 00-1.106-1.79l-.05-.025A4 4 0 0011.005 0H2a2 2 0 00-2 2v10.882l.7 1.12A4 4 0 004.412 15H7v2a2 2 0 002 2h2.153a2 2 0 001.802-1.1l.813-1.626A2 2 0 0115.28 14H17.333A2.667 2.667 0 0020 11.333V9.667A2.667 2.667 0 0017.333 7H17a1 1 0 00-1 1v1.667a4 4 0 01-.996 2.502L14 9.667z"></path></svg>
            <span class="text-sm">45</span>
          </button>
        </div>
        <a href="#" class="text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-200 font-semibold text-sm transition-colors duration-200">Read More</a>
      </div>
    </article>

    <!-- Review Card 4 -->
    <article class="bg-white dark:bg-gray-800 rounded-2xl p-5 shadow-xl border-t-4 border-blue-400 dark:border-blue-600 transform hover:-translate-y-2 transition-transform duration-300">
      <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full mr-4 border-2 border-orange-400 dark:border-orange-600 object-cover" src="https://randomuser.me/api/portraits/women/10.jpg" alt="Avatar of Sarah Code">
        <div>
          <h3 class="text-lg sm:text-xl font-bold text-blue-700 dark:text-blue-300">CodeMaiden</h3>
          <time datetime="2023-01-28" class="text-sm text-gray-500 dark:text-gray-400">January 28, 2023</time>
        </div>
      </div>
      <div class="flex items-center mb-4">
        <div class="flex text-yellow-500 dark:text-yellow-400">
          <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 fill-current text-gray-300 dark:text-gray-600" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        </div>
        <p class="ml-2 text-sm font-semibold text-gray-600 dark:text-gray-300">4.0</p>
      </div>
      <p class="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed line-clamp-4">
        "Pretty solid experience, especially with friends. The co-op mode is a blast! Some minor bugs here and there, but nothing game-breaking. Updates seem to come regularly, which is a good sign. It runs smoothly even on older hardware, which is a big plus for me."
      </p>
      <div class="flex justify-between items-center">
        <div class="flex space-x-2">
          <button class="flex items-center text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300 font-bold">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.995 20H18a2 2 0 002-2V8.118l-.7-1.12A4 4 0 0015.588 5H13V3a2 2 0 00-2-2H9.847a2 2 0 00-1.802 1.1l-.813 1.626A2 2 0 014.72 6H2.667A2.667 2.667 0 000 8.667v1.666A2.667 2.667 0 002.667 13H3a1 1 0 001-1v-1.667a4 4 0 01.996-2.502L6 10.333z"></path></svg>
            <span class="text-sm">99</span>
          </button>
          <button class="flex items-center text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 font-bold">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18 9.5a1.5 1.5 0 11-3 0v-6a1.5 1.5 0 013 0v6zM14 9.667V4.237a2 2 0 00-1.106-1.79l-.05-.025A4 4 0 0011.005 0H2a2 2 0 00-2 2v10.882l.7 1.12A4 4 0 004.412 15H7v2a2 2 0 002 2h2.153a2 2 0 001.802-1.1l.813-1.626A2 2 0 0115.28 14H17.333A2.667 2.667 0 0020 11.333V9.667A2.667 2.667 0 0017.333 7H17a1 1 0 00-1 1v1.667a4 4 0 01-.996 2.502L14 9.667z"></path></svg>
            <span class="text-sm">10</span>
          </button>
        </div>
        <a href="#" class="text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-200 font-semibold text-sm transition-colors duration-200">Read More</a>
      </div>
    </article>
  </div>

  <div class="flex justify-center mt-8">
    <button class="px-6 py-3 bg-pink-500 hover:bg-pink-600 text-white dark:bg-pink-700 dark:hover:bg-pink-800 font-bold rounded-full shadow-lg transition-all duration-300 transform active:scale-95 flex items-center">
      <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
      Load More Reviews
    </button>
  </div>
</div>

<style>
  /* Add some playful custom animations if needed, though Tailwind mostly covers. */
  /* Example: */
  @keyframes fade-in-down {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .animate-fade-in-down {
    animation: fade-in-down 0.4s ease-out;
  }

  /* For line-clamp replacement since it's a CSS property, not a Tailwind class directly for utility classes */
  .line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Custom scrollbar for playful feel - optional and browser specific */
  .no-scrollbar::-webkit-scrollbar {
      display: none;
  }

  .no-scrollbar {
      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: none;  /* Firefox */
  }
</style>

Brutalist_Industrial_Notifications_Component

A complex, brutalist-style notifications component for industrial and manufacturing applications, featuring a sunset/warm color scheme, responsiveness, and dark mode support.

Open Preview

                <div class="font-sans bg-gray-100 dark:bg-gray-900 min-h-screen p-4 sm:p-6 md:p-8 flex items-start justify-center">
  <div class="w-full max-w-6xl bg-red-600 dark:bg-red-800 border-4 border-solid border-amber-900 dark:border-amber-700 shadow-brutal dark:shadow-brutal-dark p-4 sm:p-6 md:p-8 relative overflow-hidden">
    <!-- Top brutalist border/bar -->
    <div class="absolute top-0 left-0 w-full h-4 bg-orange-700 dark:bg-orange-900 border-b-4 border-solid border-amber-900 dark:border-amber-700 transform skew-y-2"></div>
    <div class="absolute bottom-0 left-0 w-full h-4 bg-orange-700 dark:bg-orange-900 border-t-4 border-solid border-amber-900 dark:border-amber-700 transform -skew-y-2"></div>

    <h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold uppercase text-amber-100 dark:text-amber-200 mb-6 sm:mb-8 tracking-wider text-shadow-brutal dark:text-shadow-brutal-darker pt-4">
      <span class="block transform -skew-x-6 inline-block bg-amber-900 dark:bg-red-900 px-4 py-2 border-2 border-amber-500 dark:border-amber-600">System Alerts</span>
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8 md:gap-10 pb-4">
      <!-- Left Filter/Controls Panel -->
      <div class="md:col-span-1 bg-amber-900 dark:bg-red-900 p-4 sm:p-6 border-4 border-solid border-amber-700 dark:border-amber-600 space-y-6">
        <div class="flex items-center justify-between text-amber-100 dark:text-amber-200 mb-4">
          <h3 class="text-xl md:text-2xl font-bold uppercase tracking-wider">Filter</h3>
          <button class="px-3 py-1 bg-red-800 dark:bg-orange-700 text-amber-100 dark:text-amber-200 border-2 border-amber-100 dark:border-amber-200 uppercase font-bold text-sm transform -skew-x-6 hover:bg-orange-600 dark:hover:bg-amber-600 transition-colors duration-200">
            Reset
          </button>
        </div>

        <!-- Filter Options -->
        <div>
          <label for="alert-type" class="block text-amber-200 dark:text-amber-300 text-sm font-bold mb-2 uppercase tracking-wide">Severity:</label>
          <select id="alert-type" class="w-full p-2 bg-amber-800 dark:bg-red-800 text-amber-100 dark:text-amber-200 border-2 border-amber-500 dark:border-amber-600 rounded-none focus:ring focus:ring-amber-400 dark:focus:ring-orange-500 focus:border-amber-400 dark:focus:border-orange-500 appearance-none">
            <option value="all">All</option>
            <option value="critical">Critical</option>
            <option value="warning">Warning</option>
            <option value="info">Info</option>
          </select>
        </div>

        <div>
          <label for="status" class="block text-amber-200 dark:text-amber-300 text-sm font-bold mb-2 uppercase tracking-wide">Status:</label>
          <select id="status" class="w-full p-2 bg-amber-800 dark:bg-red-800 text-amber-100 dark:text-amber-200 border-2 border-amber-500 dark:border-amber-600 rounded-none focus:ring focus:ring-amber-400 dark:focus:ring-orange-500 focus:border-amber-400 dark:focus:border-orange-500 appearance-none">
            <option value="all">All</option>
            <option value="new">New</option>
            <option value="acknowledged">Acknowledged</option>
            <option value="resolved">Resolved</option>
          </select>
        </div>

        <div class="flex items-center">
          <input id="show-archived" type="checkbox" class="h-5 w-5 text-amber-500 dark:text-orange-500 bg-amber-800 dark:bg-red-800 border-2 border-amber-500 dark:border-amber-600 rounded-none focus:ring-amber-400 dark:focus:ring-orange-500">
          <label for="show-archived" class="ml-2 text-amber-200 dark:text-amber-300 uppercase text-sm font-bold">Show Archived</label>
        </div>

        <button class="w-full px-4 py-2 bg-red-800 dark:bg-orange-700 text-amber-100 dark:text-amber-200 border-2 border-amber-100 dark:border-amber-200 uppercase font-bold text-lg transform skew-x-6 hover:bg-orange-600 dark:hover:bg-amber-600 transition-colors duration-200 mt-4 md:mt-6">
          Apply Filters
        </button>
      </div>

      <!-- Main Notifications List -->
      <div class="md:col-span-2 space-y-6 sm:space-y-8">
        <!-- Notification Card 1: Critical -->
        <div class="bg-orange-400 dark:bg-orange-600 p-4 sm:p-5 border-4 border-solid border-red-900 dark:border-red-700 transform rotate-1 shadow-brutal-inner dark:shadow-brutal-inner-dark relative hover:scale-[1.01] transition-transform duration-200 ease-out">
          <div class="absolute -top-3 -right-3 text-red-900 dark:text-red-950 text-6xl opacity-20 transform rotate-45 font-black z-0">!</div>
          <div class="relative z-10">
            <h4 class="text-xl sm:text-2xl font-bold uppercase text-red-900 dark:text-red-950 mb-2 border-l-4 border-red-900 dark:border-red-950 pl-3 leading-tight">CRITICAL: Machine ID 789-A Shutdown</h4>
            <p class="text-red-800 dark:text-red-900 text-sm sm:text-base mb-3">Main hydraulic pump pressure failure detected. Immediate attention required to prevent further system damage.</p>
            <div class="flex flex-wrap items-center justify-between text-sm text-red-700 dark:text-red-800 mb-3">
              <span class="font-semibold">Source: Assembly Line 3</span>
              <span class="truncate">Timestamp: 2024-07-26 14:35 UTC</span>
            </div>
            <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
              <a href="#" class="inline-block px-4 py-2 bg-red-700 dark:bg-red-800 text-amber-100 dark:text-amber-200 font-bold uppercase text-sm border-2 border-red-900 dark:border-red-950 transform skew-x-3 hover:bg-red-600 dark:hover:bg-red-700 transition-colors duration-200 flex-grow text-center">
                Acknowledge
              </a>
              <a href="#" class="inline-block px-4 py-2 bg-amber-900 dark:bg-red-900 text-amber-100 dark:text-amber-200 font-bold uppercase text-sm border-2 border-amber-700 dark:border-amber-600 transform -skew-x-3 hover:bg-amber-800 dark:hover:bg-red-800 transition-colors duration-200 flex-grow text-center">
                View Details
              </a>
            </div>
          </div>
        </div>

        <!-- Notification Card 2: Warning -->
        <div class="bg-amber-500 dark:bg-amber-700 p-4 sm:p-5 border-4 border-solid border-orange-900 dark:border-orange-700 transform -rotate-1 shadow-brutal-inner dark:shadow-brutal-inner-dark relative hover:scale-[1.01] transition-transform duration-200 ease-out">
          <div class="absolute -bottom-3 -left-3 text-orange-900 dark:text-orange-950 text-6xl opacity-20 transform -rotate-45 font-black z-0">&#9763;</div>
          <div class="relative z-10">
            <h4 class="text-xl sm:text-2xl font-bold uppercase text-orange-900 dark:text-orange-950 mb-2 border-l-4 border-orange-900 dark:border-orange-950 pl-3 leading-tight">WARNING: Conveyor Belt 2 Speed Anomaly</h4>
            <p class="text-orange-800 dark:text-orange-900 text-sm sm:text-base mb-3">Fluctuations detected in Conveyor Belt 2 speed. Potential for material backlog. Monitor closely.</p>
            <div class="flex flex-wrap items-center justify-between text-sm text-orange-700 dark:text-orange-800 mb-3">
              <span class="font-semibold">Source: Logistics Hub</span>
              <span>Timestamp: 2024-07-26 15:10 UTC</span>
            </div>
            <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
              <a href="#" class="inline-block px-4 py-2 bg-red-700 dark:bg-red-800 text-amber-100 dark:text-amber-200 font-bold uppercase text-sm border-2 border-red-900 dark:border-red-950 transform skew-x-3 hover:bg-red-600 dark:hover:bg-red-700 transition-colors duration-200 flex-grow text-center">
                Acknowledge
              </a>
              <a href="#" class="inline-block px-4 py-2 bg-amber-900 dark:bg-red-900 text-amber-100 dark:text-amber-200 font-bold uppercase text-sm border-2 border-amber-700 dark:border-amber-600 transform -skew-x-3 hover:bg-amber-800 dark:hover:bg-red-800 transition-colors duration-200 flex-grow text-center">
                View Details
              </a>
            </div>
          </div>
        </div>

        <!-- Notification Card 3: Info (Acknowledged/Resolved style) -->
        <div class="bg-red-700 dark:bg-red-900 p-4 sm:p-5 border-4 border-solid border-amber-800 dark:border-amber-600 filter grayscale opacity-75 transform rotate-2 shadow-brutal-inner dark:shadow-brutal-inner-dark relative">
          <div class="absolute -top-3 -left-3 text-amber-900 dark:text-orange-950 text-6xl opacity-20 transform rotate-12 font-black z-0">i</div>
          <div class="relative z-10">
            <h4 class="text-xl sm:text-2xl font-bold uppercase text-amber-100 dark:text-amber-200 mb-2 border-l-4 border-amber-100 dark:border-amber-200 pl-3 leading-tight">INFO: Firmware Update Completed for Robot Arm 5</h4>
            <p class="text-amber-200 dark:text-amber-300 text-sm sm:text-base mb-3">Scheduled firmware update for Robot Arm 5 in Welding Station 1 completed successfully.</p>
            <div class="flex flex-wrap items-center justify-between text-sm text-amber-300 dark:text-amber-400">
              <span class="font-semibold">Source: IT Department</span>
              <span>Timestamp: 2024-07-25 09:00 UTC</span>
            </div>
            <div class="mt-4 flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
              <span class="inline-block px-4 py-2 bg-orange-800 dark:bg-amber-900 text-amber-100 dark:text-amber-200 font-bold uppercase text-sm border-2 border-amber-100 dark:border-amber-200 transform -skew-x-3 flex-grow text-center">Status: Resolved</span>
            </div>
          </div>
        </div>

        <!-- Empty State / Load More -->
        <div class="text-center py-8 bg-amber-900 dark:bg-red-900 border-4 border-solid border-amber-700 dark:border-amber-600 text-amber-100 dark:text-amber-200 font-bold uppercase tracking-widest text-lg sm:text-xl transform skew-y-1 mt-8">
          <button class="px-6 py-3 bg-red-800 dark:bg-orange-700 text-amber-100 dark:text-amber-200 border-2 border-amber-100 dark:border-amber-200 uppercase font-bold text-base sm:text-lg transform -skew-x-6 hover:bg-orange-600 dark:hover:bg-amber-600 transition-colors duration-200">
            Load More Alerts
          </button>
        </div>
      </div>
    </div>

    <!-- Bottom brutalist border/bar -->
    <div class="absolute bottom-0 left-0 w-full h-4 bg-orange-700 dark:bg-orange-900 border-t-4 border-solid border-amber-900 dark:border-amber-700 transform skew-y-2"></div>
    <div class="absolute top-0 left-0 w-full h-4 bg-orange-700 dark:bg-orange-900 border-b-4 border-solid border-amber-900 dark:border-amber-700 transform -skew-y-2"></div>

  </div>
</div>

<style>
  /* Custom shadow for brutalism effect */
  .shadow-brutal {
    box-shadow: 12px 12px 0px rgba(120, 53, 15, 0.8);
  }
  .dark\:shadow-brutal-dark {
    box-shadow: 12px 12px 0px rgba(69, 21, 21, 0.8);
  }
  .shadow-brutal-inner {
    box-shadow: inset 5px 5px 0px rgba(120, 53, 15, 0.6);
  }
  .dark\:shadow-brutal-inner-dark {
    box-shadow: inset 5px 5px 0px rgba(69, 21, 21, 0.6);
  }

  /* Text shadow for brutalism */
  .text-shadow-brutal {
    text-shadow: 4px 4px 0px rgba(120, 53, 15, 0.6);
  }
  .dark\:text-shadow-brutal-darker {
    text-shadow: 4px 4px 0px rgba(69, 21, 21, 0.6);
  }
</style>

Community Forum Component (E-commerce Bauhaus)

A simple, responsive community forum component designed for e-commerce, featuring Bauhaus-inspired geometric forms and a muted color palette. Includes dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans antialiased">

  <!-- Section Title -->
  <h2 class="text-2xl sm:text-3xl font-bold mb-6 text-gray-800 dark:text-gray-100 text-center uppercase tracking-wider">
    Customer Stories & Feedback
  </h2>

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

    <!-- Forum Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-5 border border-gray-200 dark:border-gray-700 relative">
      <div class="absolute -top-3 -left-3 w-8 h-8 bg-blue-500 transform rotate-45"></div>
      <div class="flex items-start mb-4">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-500 dark:border-blue-400 mr-4">
        <div>
          <p class="font-semibold text-lg text-gray-800 dark:text-gray-100">Jane Doe</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</p>
        </div>
      </div>
      <h3 class="text-xl font-semibold mb-3 text-gray-700 dark:text-gray-200">"Absolutely Transformed My Workflow!"</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4 text-base leading-relaxed">
        I was skeptical at first, but this product exceeded all my expectations. The quality is top-notch,
        and it integrated seamlessly with my existing setup. Highly recommend for anyone looking to boost productivity!
      </p>
      <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
        <span class="flex items-center mr-4">
          <svg class="w-4 h-4 mr-1 fill-blue-500 dark:fill-blue-400" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
          12 Likes
        </span>
        <span class="flex items-center">
          <svg class="w-4 h-4 mr-1 fill-gray-500 dark:fill-gray-400" viewBox="0 0 24 24"><path d="M21 11.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"/></svg>
          5 Comments
        </span>
      </div>
    </div>

    <!-- Forum Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-5 border border-gray-200 dark:border-gray-700 relative">
      <div class="absolute -top-3 -right-3 w-8 h-8 bg-red-500 transform -rotate-45"></div>
      <div class="flex items-start mb-4">
        <img src="https://randomuser.me/api/portraits/men/29.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-red-500 dark:border-red-400 mr-4">
        <div>
          <p class="font-semibold text-lg text-gray-800 dark:text-gray-100">John Smith</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">1 day ago</p>
        </div>
      </div>
      <h3 class="text-xl font-semibold mb-3 text-gray-700 dark:text-gray-200">"Great Product, Minor Suggestion"</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4 text-base leading-relaxed">
        Overall, I'm very satisfied with my purchase. The build quality is solid, and it performs as advertised.
        My only constructive feedback would be to consider adding 'X' feature in a future update.
      </p>
      <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
        <span class="flex items-center mr-4">
          <svg class="w-4 h-4 mr-1 fill-red-500 dark:fill-red-400" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
          8 Likes
        </span>
        <span class="flex items-center">
          <svg class="w-4 h-4 mr-1 fill-gray-500 dark:fill-gray-400" viewBox="0 0 24 24"><path d="M21 11.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"/></svg>
          2 Comments
        </span>
      </div>
    </div>

    <!-- Forum Card 3 (Placeholder for more, hidden on small screens) -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-5 border border-gray-200 dark:border-gray-700 hidden md:block relative">
      <div class="absolute -bottom-3 -right-3 w-8 h-8 bg-yellow-500 transform rotate-45"></div>
      <div class="flex items-start mb-4">
        <img src="https://randomuser.me/api/portraits/women/77.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-yellow-500 dark:border-yellow-400 mr-4">
        <div>
          <p class="font-semibold text-lg text-gray-800 dark:text-gray-100">Emily White</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">3 days ago</p>
        </div>
      </div>
      <h3 class="text-xl font-semibold mb-3 text-gray-700 dark:text-gray-200">"Fantastic Support Team!"</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4 text-base leading-relaxed">
        I had a small issue with my order, and the customer support was incredibly responsive and helpful.
        They resolved my problem quickly and professionally. Really appreciate the dedication!
      </p>
      <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
        <span class="flex items-center mr-4">
          <svg class="w-4 h-4 mr-1 fill-yellow-500 dark:fill-yellow-400" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
          15 Likes
        </span>
        <span class="flex items-center">
          <svg class="w-4 h-4 mr-1 fill-gray-500 dark:fill-gray-400" viewBox="0 0 24 24"><path d="M21 11.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"/></svg>
          7 Comments
        </span>
      </div>
    </div>

    <!-- Forum Card 4 (Placeholder for more, hidden on small screens) -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-5 border border-gray-200 dark:border-gray-700 hidden md:block relative">
      <div class="absolute -bottom-3 -left-3 w-8 h-8 bg-green-500 transform -rotate-45"></div>
      <div class="flex items-start mb-4">
        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-green-500 dark:border-green-400 mr-4">
        <div>
          <p class="font-semibold text-lg text-gray-800 dark:text-gray-100">David Lee</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">5 days ago</p>
        </div>
      </div>
      <h3 class="text-xl font-semibold mb-3 text-gray-700 dark:text-gray-200">"A Must-Have for Every Enthusiast!"</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4 text-base leading-relaxed">
        I've been looking for a product like this for ages. It delivers on all its promises and more.
        Sturdy, efficient, and well-designed. Don't hesitate to buy it!
      </p>
      <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
        <span class="flex items-center mr-4">
          <svg class="w-4 h-4 mr-1 fill-green-500 dark:fill-green-400" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
          20 Likes
        </span>
        <span class="flex items-center">
          <svg class="w-4 h-4 mr-1 fill-gray-500 dark:fill-gray-400" viewBox="0 0 24 24"><path d="M21 11.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"/></svg>
          10 Comments
        </span>
      </div>
    </div>

  </div>

  <!-- Call to Action / View More -->
  <div class="text-center mt-8">
    <button class="px-6 py-3 bg-gray-700 dark:bg-gray-200 text-white dark:text-gray-900 font-bold uppercase rounded-md 
                   tracking-wider hover:bg-gray-600 dark:hover:bg-gray-300 transition duration-300 ease-in-out
                   border border-gray-700 dark:border-gray-200 shadow-md">
      View All Discussions
    </button>
  </div>

</div>

Brutalist Login Form

A simple, brutalist-style login form component designed for technology/SaaS applications, featuring high contrast, bold typography, and an analogous color scheme with full responsiveness and dark mode support.

Open Preview

                <div class="min-h-screen flex items-center justify-center p-4 bg-lime-200 dark:bg-zinc-900 border-4 border-solid border-black dark:border-lime-500">
  <div class="w-full max-w-md bg-lime-400 dark:bg-zinc-800 p-8 pt-6 rounded-none shadow-brutalist border-8 border-black dark:border-lime-500 animate-fade-in">
    <h2 class="text-4xl sm:text-5xl font-black text-black dark:text-lime-400 mb-6 uppercase tracking-extra-wide leading-tight border-b-8 border-black dark:border-lime-500 pb-2">
      INITIATE LOGIN
    </h2>
    <form class="space-y-6">
      <div>
        <label for="email" class="block text-base sm:text-lg font-bold text-black dark:text-lime-300 mb-2 uppercase tracking-wide">ACCESS CODE:</label>
        <input
          type="email"
          id="email"
          class="w-full p-4 text-lg bg-yellow-300 dark:bg-zinc-700 text-black dark:text-lime-200 placeholder-black dark:placeholder-lime-400 border-4 border-black dark:border-lime-500 focus:outline-none focus:ring-4 focus:ring-black dark:focus:ring-lime-600 rounded-none transform transition-all duration-200 ease-in-out focus:scale-105"
          placeholder="ENTER EMAIL PROTOCOL"
          required
        />
      </div>
      <div>
        <label for="password" class="block text-base sm:text-lg font-bold text-black dark:text-lime-300 mb-2 uppercase tracking-wide">SECURE PHRASE:</label>
        <input
          type="password"
          id="password"
          class="w-full p-4 text-lg bg-yellow-300 dark:bg-zinc-700 text-black dark:text-lime-200 placeholder-black dark:placeholder-lime-400 border-4 border-black dark:border-lime-500 focus:outline-none focus:ring-4 focus:ring-black dark:focus:ring-lime-600 rounded-none transform transition-all duration-200 ease-in-out focus:scale-105"
          placeholder="ENCRYPTED PASSCODE"
          required
        />
      </div>
      <button
        type="submit"
        class="w-full py-4 text-xl font-extrabold bg-lime-600 dark:bg-lime-500 text-black dark:text-zinc-900 uppercase border-8 border-black dark:border-lime-500 hover:bg-lime-700 dark:hover:bg-lime-600 focus:outline-none focus:ring-4 focus:ring-black dark:focus:ring-lime-800 active:bg-lime-800 dark:active:bg-lime-700 transition-all duration-150 ease-in-out transform hover:-translate-y-1 hover:scale-105 shadow-brutalist-button"
      >
        INITIATE <span class="hidden sm:inline-block">DIRECTIVE</span>
      </button>
      <p class="text-sm text-black dark:text-lime-200 text-center font-mono">
        <a href="#" class="underline text-black dark:text-lime-300 hover:text-black dark:hover:text-lime-400 transition-colors duration-200">
          FORGOTTEN SECURE PHRASE? <span class="hidden sm:inline-block">RETRIEVE</span>
        </a>
      </p>
    </form>
  </div>
</div>

<style>
  /* Custom properties for brutalist shadow effects */
  .shadow-brutalist {
    box-shadow: 16px 16px 0px 0px black;
  }
  .dark .shadow-brutalist {
    box-shadow: 16px 16px 0px 0px var(--tw-dark-border-color, #a7f3d0); /* Using lime-500 for dark border shadow */
  }
  .shadow-brutalist-button {
    box-shadow: 8px 8px 0px 0px black;
  }
  .dark .shadow-brutalist-button {
    box-shadow: 8px 8px 0px 0px var(--tw-dark-border-color, #a7f3d0); /* Using lime-500 for dark border shadow */
  }
  .tracking-extra-wide {
    letter-spacing: 0.15em;
  }
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-in {
    animation: fadeIn 0.8s ease-out forwards;
  }
</style>

Glassmorphism Tag Cloud Component

A glassmorphism-style tag cloud component with purple/violet color scheme, suitable for portfolios. Features frosted translucent elements, responsive design, and dark mode support.

Open Preview

                <div class="p-4 sm:p-8 md:p-12 lg:p-16 min-h-screen bg-gradient-to-br from-purple-100 via-violet-200 to-indigo-100 dark:from-purple-950 dark:via-violet-900 dark:to-indigo-950 flex items-center justify-center font-sans">
  <div class="relative w-full max-w-4xl p-6 md:p-8 lg:p-10 rounded-3xl overflow-hidden shadow-xl 
              bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg border border-opacity-30 border-white 
              dark:bg-purple-900 dark:bg-opacity-20 dark:border-purple-700 dark:border-opacity-30 
              transition-all duration-500 ease-in-out transform hover:scale-[1.01]">

    <!-- Glassy Overlay for more depth -->
    <div class="absolute inset-0 pointer-events-none rounded-3xl 
                bg-gradient-to-br from-white to-transparent opacity-10 
                dark:from-purple-800 dark:to-transparent dark:opacity-10">
    </div>

    <h2 class="relative z-10 text-3xl sm:text-4xl lg:text-5xl font-extrabold text-purple-900 dark:text-violet-200 mb-6 text-center 
               drop-shadow-lg [text-shadow:_0_2px_8px_rgb(0_0_0_/_0.1)] dark:[text-shadow:_0_2px_8px_rgb(128_0_128_/_0.3)] transition-colors duration-300">
      My Skillset & Interests
    </h2>
    <p class="relative z-10 text-lg sm:text-xl text-purple-800 dark:text-violet-300 mb-8 text-center max-w-2xl mx-auto 
              opacity-90 leading-relaxed transition-colors duration-300">
      Explore the diverse range of technologies and domains I'm passionate about.
    </p>

    <div class="relative z-10 flex flex-wrap justify-center gap-3 sm:gap-4 lg:gap-5">
      
      <!-- Example Tags -->
      <div class="group relative overflow-hidden rounded-full px-5 py-2 sm:px-6 sm:py-2.5 
                  bg-purple-300 bg-opacity-40 text-purple-900 
                  dark:bg-violet-700 dark:bg-opacity-40 dark:text-violet-100 
                  backdrop-filter backdrop-blur-sm border border-purple-300 border-opacity-60 
                  dark:border-violet-600 dark:border-opacity-60 
                  transition-all duration-300 ease-in-out 
                  hover:scale-105 hover:shadow-lg 
                  hover:bg-purple-400 hover:bg-opacity-60 dark:hover:bg-violet-600 dark:hover:bg-opacity-60 
                  cursor-pointer">
        <span class="relative z-10 text-sm sm:text-base font-semibold">TailwindCSS</span>
        <div class="absolute inset-0 bg-gradient-to-br from-purple-200 to-transparent opacity-0 group-hover:opacity-20 dark:from-violet-500"></div>
      </div>

      <div class="group relative overflow-hidden rounded-full px-5 py-2 sm:px-6 sm:py-2.5 
                  bg-purple-300 bg-opacity-40 text-purple-900 
                  dark:bg-violet-700 dark:bg-opacity-40 dark:text-violet-100 
                  backdrop-filter backdrop-blur-sm border border-purple-300 border-opacity-60 
                  dark:border-violet-600 dark:border-opacity-60 
                  transition-all duration-300 ease-in-out 
                  hover:scale-105 hover:shadow-lg 
                  hover:bg-purple-400 hover:bg-opacity-60 dark:hover:bg-violet-600 dark:hover:bg-opacity-60 
                  cursor-pointer">
        <span class="relative z-10 text-sm sm:text-base font-semibold">React.js</span>
        <div class="absolute inset-0 bg-gradient-to-br from-purple-200 to-transparent opacity-0 group-hover:opacity-20 dark:from-violet-500"></div>
      </div>

      <div class="group relative overflow-hidden rounded-full px-5 py-2 sm:px-6 sm:py-2.5 
                  bg-purple-300 bg-opacity-40 text-purple-900 
                  dark:bg-violet-700 dark:bg-opacity-40 dark:text-violet-100 
                  backdrop-filter backdrop-blur-sm border border-purple-300 border-opacity-60 
                  dark:border-violet-600 dark:border-opacity-60 
                  transition-all duration-300 ease-in-out 
                  hover:scale-105 hover:shadow-lg 
                  hover:bg-purple-400 hover:bg-opacity-60 dark:hover:bg-violet-600 dark:hover:bg-opacity-60 
                  cursor-pointer">
        <span class="relative z-10 text-sm sm:text-base font-semibold">Node.js</span>
        <div class="absolute inset-0 bg-gradient-to-br from-purple-200 to-transparent opacity-0 group-hover:opacity-20 dark:from-violet-500"></div>
      </div>

      <div class="group relative overflow-hidden rounded-full px-5 py-2 sm:px-6 sm:py-2.5 
                  bg-purple-300 bg-opacity-40 text-purple-900 
                  dark:bg-violet-700 dark:bg-opacity-40 dark:text-violet-100 
                  backdrop-filter backdrop-blur-sm border border-purple-300 border-opacity-60 
                  dark:border-violet-600 dark:border-opacity-60 
                  transition-all duration-300 ease-in-out 
                  hover:scale-105 hover:shadow-lg 
                  hover:bg-purple-400 hover:bg-opacity-60 dark:hover:bg-violet-600 dark:hover:bg-opacity-60 
                  cursor-pointer">
        <span class="relative z-10 text-sm sm:text-base font-semibold">TypeScript</span>
        <div class="absolute inset-0 bg-gradient-to-br from-purple-200 to-transparent opacity-0 group-hover:opacity-20 dark:from-violet-500"></div>
      </div>

      <div class="group relative overflow-hidden rounded-full px-5 py-2 sm:px-6 sm:py-2.5 
                  bg-purple-300 bg-opacity-40 text-purple-900 
                  dark:bg-violet-700 dark:bg-opacity-40 dark:text-violet-100 
                  backdrop-filter backdrop-blur-sm border border-purple-300 border-opacity-60 
                  dark:border-violet-600 dark:border-opacity-60 
                  transition-all duration-300 ease-in-out 
                  hover:scale-105 hover:shadow-lg 
                  hover:bg-purple-400 hover:bg-opacity-60 dark:hover:bg-violet-600 dark:hover:bg-opacity-60 
                  cursor-pointer">
        <span class="relative z-10 text-sm sm:text-base font-semibold">MongoDB</span>
        <div class="absolute inset-0 bg-gradient-to-br from-purple-200 to-transparent opacity-0 group-hover:opacity-20 dark:from-violet-500"></div>
      </div>

      <div class="group relative overflow-hidden rounded-full px-5 py-2 sm:px-6 sm:py-2.5 
                  bg-purple-300 bg-opacity-40 text-purple-900 
                  dark:bg-violet-700 dark:bg-opacity-40 dark:text-violet-100 
                  backdrop-filter backdrop-blur-sm border border-purple-300 border-opacity-60 
                  dark:border-violet-600 dark:border-opacity-60 
                  transition-all duration-300 ease-in-out 
                  hover:scale-105 hover:shadow-lg 
                  hover:bg-purple-400 hover:bg-opacity-60 dark:hover:bg-violet-600 dark:hover:bg-opacity-60 
                  cursor-pointer">
        <span class="relative z-10 text-sm sm:text-base font-semibold">Express.js</span>
        <div class="absolute inset-0 bg-gradient-to-br from-purple-200 to-transparent opacity-0 group-hover:opacity-20 dark:from-violet-500"></div>
      </div>

      <div class="group relative overflow-hidden rounded-full px-5 py-2 sm:px-6 sm:py-2.5 
                  bg-purple-300 bg-opacity-40 text-purple-900 
                  dark:bg-violet-700 dark:bg-opacity-40 dark:text-violet-100 
                  backdrop-filter backdrop-blur-sm border border-purple-300 border-opacity-60 
                  dark:border-violet-600 dark:border-opacity-60 
                  transition-all duration-300 ease-in-out 
                  hover:scale-105 hover:shadow-lg 
                  hover:bg-purple-400 hover:bg-opacity-60 dark:hover:bg-violet-600 dark:hover:bg-opacity-60 
                  cursor-pointer">
        <span class="relative z-10 text-sm sm:text-base font-semibold">RESTful APIs</span>
        <div class="absolute inset-0 bg-gradient-to-br from-purple-200 to-transparent opacity-0 group-hover:opacity-20 dark:from-violet-500"></div>
      </div>

      <div class="group relative overflow-hidden rounded-full px-5 py-2 sm:px-6 sm:py-2.5 
                  bg-purple-300 bg-opacity-40 text-purple-900 
                  dark:bg-violet-700 dark:bg-opacity-40 dark:text-violet-100 
                  backdrop-filter backdrop-blur-sm border border-purple-300 border-opacity-60 
                  dark:border-violet-600 dark:border-opacity-60 
                  transition-all duration-300 ease-in-out 
                  hover:scale-105 hover:shadow-lg 
                  hover:bg-purple-400 hover:bg-opacity-60 dark:hover:bg-violet-600 dark:hover:bg-opacity-60 
                  cursor-pointer">
        <span class="relative z-10 text-sm sm:text-base font-semibold">Git & GitHub</span>
        <div class="absolute inset-0 bg-gradient-to-br from-purple-200 to-transparent opacity-0 group-hover:opacity-20 dark:from-violet-500"></div>
      </div>

      <div class="group relative overflow-hidden rounded-full px-5 py-2 sm:px-6 sm:py-2.5 
                  bg-purple-300 bg-opacity-40 text-purple-900 
                  dark:bg-violet-700 dark:bg-opacity-40 dark:text-violet-100 
                  backdrop-filter backdrop-blur-sm border border-purple-300 border-opacity-60 
                  dark:border-violet-600 dark:border-opacity-60 
                  transition-all duration-300 ease-in-out 
                  hover:scale-105 hover:shadow-lg 
                  hover:bg-purple-400 hover:bg-opacity-60 dark:hover:bg-violet-600 dark:hover:bg-opacity-60 
                  cursor-pointer">
        <span class="relative z-10 text-sm sm:text-base font-semibold">Responsive Design</span>
        <div class="absolute inset-0 bg-gradient-to-br from-purple-200 to-transparent opacity-0 group-hover:opacity-20 dark:from-violet-500"></div>
      </div>

      <div class="group relative overflow-hidden rounded-full px-5 py-2 sm:px-6 sm:py-2.5 
                  bg-purple-300 bg-opacity-40 text-purple-900 
                  dark:bg-violet-700 dark:bg-opacity-40 dark:text-violet-100 
                  backdrop-filter backdrop-blur-sm border border-purple-300 border-opacity-60 
                  dark:border-violet-600 dark:border-opacity-60 
                  transition-all duration-300 ease-in-out 
                  hover:scale-105 hover:shadow-lg 
                  hover:bg-purple-400 hover:bg-opacity-60 dark:hover:bg-violet-600 dark:hover:bg-opacity-60 
                  cursor-pointer">
        <span class="relative z-10 text-sm sm:text-base font-semibold">UI/UX Principles</span>
        <div class="absolute inset-0 bg-gradient-to-br from-purple-200 to-transparent opacity-0 group-hover:opacity-20 dark:from-violet-500"></div>
      </div>

      <div class="group relative overflow-hidden rounded-full px-5 py-2 sm:px-6 sm:py-2.5 
                  bg-purple-300 bg-opacity-40 text-purple-900 
                  dark:bg-violet-700 dark:bg-opacity-40 dark:text-violet-100 
                  backdrop-filter backdrop-blur-sm border border-purple-300 border-opacity-60 
                  dark:border-violet-600 dark:border-opacity-60 
                  transition-all duration-300 ease-in-out 
                  hover:scale-105 hover:shadow-lg 
                  hover:bg-purple-400 hover:bg-opacity-60 dark:hover:bg-violet-600 dark:hover:bg-opacity-60 
                  cursor-pointer">
        <span class="relative z-10 text-sm sm:text-base font-semibold">Agile Methodologies</span>
        <div class="absolute inset-0 bg-gradient-to-br from-purple-200 to-transparent opacity-0 group-hover:opacity-20 dark:from-violet-500"></div>
      </div>

      <div class="group relative overflow-hidden rounded-full px-5 py-2 sm:px-6 sm:py-2.5 
                  bg-purple-300 bg-opacity-40 text-purple-900 
                  dark:bg-violet-700 dark:bg-opacity-40 dark:text-violet-100 
                  backdrop-filter backdrop-blur-sm border border-purple-300 border-opacity-60 
                  dark:border-violet-600 dark:border-opacity-60 
                  transition-all duration-300 ease-in-out 
                  hover:scale-105 hover:shadow-lg 
                  hover:bg-purple-400 hover:bg-opacity-60 dark:hover:bg-violet-600 dark:hover:bg-opacity-60 
                  cursor-pointer">
        <span class="relative z-10 text-sm sm:text-base font-semibold">Problem Solving</span>
        <div class="absolute inset-0 bg-gradient-to-br from-purple-200 to-transparent opacity-0 group-hover:opacity-20 dark:from-violet-500"></div>
      </div>
      
      <!-- More tags if needed -->

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

Timeline Component

A responsive timeline component with triadic color scheme, microinteraction-focused design for business/corporate websites, supporting light and dark modes.

Open Preview

                <div class="font-sans antialiased bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 py-12 md:py-20">
  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-center text-4xl sm:text-5xl font-extrabold text-blue-600 dark:text-orange-400 mb-12 sm:mb-16 tracking-tight animate-fade-in-down">
      Our Journey
    </h2>
    <div class="relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-blue-500 before:via-orange-400 before:to-green-500 dark:before:from-orange-400 dark:before:via-blue-500 dark:before:to-green-400">

      <!-- Timeline Item 1 -->
      <div class="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active mb-10 last:mb-0">
        <!-- Icon -->
        <div class="flex items-center justify-center w-10 h-10 rounded-full border border-white dark:border-gray-900 bg-blue-500 text-white dark:bg-orange-400 dark:text-gray-900 absolute left-0 md:left-1/2 -translate-x-1/2 shadow-xl group-hover:scale-110 transition-transform duration-300 ease-in-out z-10">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm5 6a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V8z" clip-rule="evenodd"></path></svg>
        </div>
        <!-- Card -->
        <div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg transform group-hover:-translate-y-2 transition-transform duration-300 ease-in-out border border-gray-200 dark:border-gray-700 ml-auto md:ml-0 group-odd:mr-auto group-odd:ml-0 md:group-odd:mr-auto">
          <div class="flex items-center mb-3">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author">
            <div>
              <p class="font-bold text-lg text-blue-700 dark:text-orange-300">2015: Foundation Inc.</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">A New Beginning</p>
            </div>
          </div>
          <p class="text-gray-700 dark:text-gray-300">At our inception, we laid the groundwork for innovation, focusing on core values and a vision for the future. Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, praesentium.</p>
        </div>
      </div>

      <!-- Timeline Item 2 -->
      <div class="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active mb-10 last:mb-0">
        <!-- Icon -->
        <div class="flex items-center justify-center w-10 h-10 rounded-full border border-white dark:border-gray-900 bg-orange-400 text-gray-900 dark:bg-blue-500 dark:text-white absolute left-0 md:left-1/2 -translate-x-1/2 shadow-xl group-hover:scale-110 transition-transform duration-300 ease-in-out z-10">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z"></path></svg>
        </div>
        <!-- Card -->
        <div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg transform group-hover:-translate-y-2 transition-transform duration-300 ease-in-out border border-gray-200 dark:border-gray-700 ml-auto md:ml-0 group-odd:mr-auto group-odd:ml-0 md:group-odd:mr-auto">
          <div class="flex items-center mb-3">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author">
            <div>
              <p class="font-bold text-lg text-orange-600 dark:text-blue-300">2018: Strategic Growth</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">Expanding Horizons</p>
            </div>
          </div>
          <p class="text-gray-700 dark:text-gray-300">We successfully expanded our market reach and diversified our offerings, achieving significant milestones. Nostrum sint quasi debitis! Sunt, provident.</p>
        </div>
      </div>
      
      <!-- Timeline Item 3 -->
      <div class="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active mb-10 last:mb-0">
        <!-- Icon -->
        <div class="flex items-center justify-center w-10 h-10 rounded-full border border-white dark:border-gray-900 bg-green-500 text-white dark:bg-green-400 dark:text-gray-900 absolute left-0 md:left-1/2 -translate-x-1/2 shadow-xl group-hover:scale-110 transition-transform duration-300 ease-in-out z-10">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        </div>
        <!-- Card -->
        <div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg transform group-hover:-translate-y-2 transition-transform duration-300 ease-in-out border border-gray-200 dark:border-gray-700 ml-auto md:ml-0 group-odd:mr-auto group-odd:ml-0 md:group-odd:mr-auto">
          <div class="flex items-center mb-3">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/78.jpg" alt="Author">
            <div>
              <p class="font-bold text-lg text-green-700 dark:text-green-300">2021: Innovation & Future</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">Pioneering New Frontiers</p>
            </div>
          </div>
          <p class="text-gray-700 dark:text-gray-300">Driven by innovation, we are now setting new benchmarks and looking forward to an even brighter future. Consectetur, dolores suscipit! Ratione, reiciendis.</p>
        </div>
      </div>

      <!-- Timeline Item 4 -->
      <div class="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active mb-10 last:mb-0">
        <!-- Icon -->
        <div class="flex items-center justify-center w-10 h-10 rounded-full border border-white dark:border-gray-900 bg-blue-500 text-white dark:bg-orange-400 dark:text-gray-900 absolute left-0 md:left-1/2 -translate-x-1/2 shadow-xl group-hover:scale-110 transition-transform duration-300 ease-in-out z-10">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.893 2.598a.5.5 0 00-.376 0L2.614 7.641a.5.5 0 000 .86l7.903 5.043a.5.5 0 00.376 0l7.903-5.043a.5.5 0 000-.86L10.893 2.598zM19 12.016a.5.5 0 00.38-.853L12.518 7a.5.5 0 00-.376 0L4.887 11.163a.5.5 0 000 .86L11.518 16a.5.5 0 00.376 0l7.903-5.043z"></path></svg>
        </div>
        <!-- Card -->
        <div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg transform group-hover:-translate-y-2 transition-transform duration-300 ease-in-out border border-gray-200 dark:border-gray-700 ml-auto md:ml-0 group-odd:mr-auto group-odd:ml-0 md:group-odd:mr-auto">
          <div class="flex items-center mb-3">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/90.jpg" alt="Author">
            <div>
              <p class="font-bold text-lg text-blue-700 dark:text-orange-300">2023: Global Impact</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">Leading the Way</p>
            </div>
          </div>
          <p class="text-gray-700 dark:text-gray-300">Our commitment to excellence has led us to a global presence, influencing industries worldwide. Provident, ducimus! Voluptatibus, illum.</p>
        </div>
      </div>

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

Password Reset Component

A complex, responsive password reset component with an 'Organic/Nature-inspired' design, 'Sunset/Warm tones' color scheme, suitable for CRM/Business Tools. Includes dark mode support.

Open Preview

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-amber-50 to-orange-100 dark:from-gray-900 dark:to-gray-800 transition-colors duration-500 font-sans">
  <div class="relative w-full max-w-md mx-auto p-8 bg-white dark:bg-gray-850 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-500 scale-100 hover:scale-105 group border border-amber-200 dark:border-gray-700">
    <!-- Organic background shapes -->
    <div class="absolute -top-10 -left-10 w-48 h-48 bg-amber-200 dark:bg-amber-800 rounded-full mix-blend-multiply opacity-30 blur-xl group-hover:scale-125 transition-transform duration-700"></div>
    <div class="absolute -bottom-10 -right-10 w-40 h-40 bg-orange-200 dark:bg-orange-800 rounded-full mix-blend-multiply opacity-30 blur-xl group-hover:scale-125 transition-transform duration-700"></div>
    <div class="absolute top-1/4 left-1/4 w-32 h-32 bg-yellow-100 dark:bg-yellow-800 rounded-full mix-blend-overlay opacity-20 blur-xl group-hover:scale-125 transition-transform duration-700"></div>

    <div class="relative z-10 space-y-8">
      <div class="text-center">
        <h2 class="text-3xl font-extrabold text-amber-800 dark:text-amber-300 mb-2 leading-tight tracking-tight drop-shadow-sm">
          Reset Your Password
        </h2>
        <p class="text-orange-600 dark:text-orange-200 text-sm md:text-base leading-relaxed">
          Enter your new password below. Ensure it's strong and unique.
        </p>
      </div>

      <form class="space-y-6">
        <div>
          <label for="new-password" class="block text-sm font-medium text-orange-700 dark:text-orange-300 mb-1">
            New Password
          </label>
          <div class="relative">
            <input
              type="password"
              id="new-password"
              name="new-password"
              required
              class="w-full px-4 py-2 rounded-xl border border-amber-300 dark:border-gray-700 focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-400 focus:border-transparent outline-none transition-all duration-300 text-orange-800 dark:text-white bg-amber-50 dark:bg-gray-700 placeholder-orange-300 dark:placeholder-gray-400 shadow-sm"
              placeholder="••••••••"
            >
            <span class="absolute inset-y-0 right-0 pr-3 flex items-center text-orange-400 dark:text-gray-400">
              <!-- Placeholder for an eye icon -->
              <svg class="h-5 w-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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
              </svg>
            </span>
          </div>
          <p class="mt-2 text-xs text-orange-500 dark:text-orange-400">
            Minimum 8 characters, including a capital letter and a number.
          </p>
        </div>

        <div>
          <label for="confirm-password" class="block text-sm font-medium text-orange-700 dark:text-orange-300 mb-1">
            Confirm Password
          </label>
          <div class="relative">
            <input
              type="password"
              id="confirm-password"
              name="confirm-password"
              required
              class="w-full px-4 py-2 rounded-xl border border-amber-300 dark:border-gray-700 focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-400 focus:border-transparent outline-none transition-all duration-300 text-orange-800 dark:text-white bg-amber-50 dark:bg-gray-700 placeholder-orange-300 dark:placeholder-gray-400 shadow-sm"
              placeholder="••••••••"
            >
             <span class="absolute inset-y-0 right-0 pr-3 flex items-center text-orange-400 dark:text-gray-400">
              <!-- Placeholder for an eye icon -->
              <svg class="h-5 w-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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
              </svg>
            </span>
          </div>
        </div>

        <button
          type="submit"
          class="w-full px-6 py-3 rounded-full bg-gradient-to-r from-orange-500 to-amber-700 text-white font-semibold text-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-600 focus:ring-opacity-75 relative overflow-hidden group"
        >
          <span class="relative z-10">
            Reset Password
          </span>
          <div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
        </button>
      </form>

      <div class="text-center text-sm">
        <p class="text-orange-600 dark:text-orange-200">
          Remember your password?
          <a href="#" class="font-medium text-amber-700 dark:text-amber-300 hover:text-amber-900 dark:hover:text-amber-100 transition-colors duration-200">
            Log In
          </a>
        </p>
      </div>
    </div>
  </div>
</div>

Success Messages Component

A simple, artistic success message component with a sepia/brown color scheme, suitable for cryptocurrency/blockchain applications. Features a soft, watercolor-inspired design, full responsiveness, and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-amber-50 to-amber-100 dark:from-stone-900 dark:to-stone-950 min-h-screen flex items-center justify-center font-sans">
  <div class="max-w-md w-full mx-auto p-6 sm:p-8 md:p-10 bg-white dark:bg-stone-800 rounded-3xl shadow-xl border border-amber-200 dark:border-stone-700 overflow-hidden transform transition-all duration-300 ease-in-out hover:scale-[1.01] hover:shadow-2xl relative">
    <!-- Artistic Background Elements -->
    <div class="absolute top-0 left-0 w-full h-full pointer-events-none opacity-20 dark:opacity-10 transform scale-110 blur-md">
      <img src="https://picsum.photos/seed/watercolor1/600/400" alt="Artistic watercolor blot" class="absolute top-4 left-4 w-32 h-32 object-cover rounded-full mix-blend-multiply dark:mix-blend-screen opacity-70 rotate-12">
      <img src="https://picsum.photos/seed/watercolor2/400/300" alt="Artistic watercolor blot" class="absolute bottom-2 right-2 w-24 h-24 object-cover rounded-full mix-blend-multiply dark:mix-blend-screen opacity-70 -rotate-24">
    </div>

    <div class="relative z-10 text-center">
      <!-- Success Icon -->
      <div class="mx-auto flex items-center justify-center h-20 w-20 rounded-full bg-amber-100 dark:bg-stone-700 shadow-inner ring-2 ring-amber-200 dark:ring-stone-600 mb-6 sm:mb-8 transition-all duration-300 ease-in-out">
        <svg class="h-12 w-12 text-amber-600 dark:text-amber-300 transform rotate-12 transition-all duration-300 ease-in-out" 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="1.8" d="M9 12l2 2 4-4m6 2a9 9 1.5 0 11-18 0 9 1.5 0 0118 0z"></path>
        </svg>
      </div>

      <h3 class="text-2xl sm:text-3xl font-extrabold text-amber-800 dark:text-amber-200 mb-3 leading-snug tracking-tight transition-colors duration-300 ease-in-out font-serif">
        Transaction Confirmed!
      </h3>
      <p class="text-sm sm:text-base text-amber-700 dark:text-amber-300 mb-6 sm:mb-8 leading-relaxed transition-colors duration-300 ease-in-out opacity-90">
        Your recent blockchain transaction has been successfully processed and recorded.
      </p>

      <div class="space-y-4">
        <p class="text-xs sm:text-sm text-amber-600 dark:text-amber-400 font-medium">
          Hash: <span class="font-mono text-amber-800 dark:text-amber-100 break-words line-clamp-1 hover:line-clamp-none transition-all duration-300 ease-in-out text-pretty">0xacb123def456abcdefg7890hij123klm456nop7
          </span>
        </p>
        <p class="text-xs sm:text-sm text-amber-600 dark:text-amber-400 font-medium">
          Amount: <span class="font-bold text-amber-800 dark:text-amber-100">0.005 BTC</span>
        </p>
      </div>

      <div class="mt-8 sm:mt-10">
        <button type="button" class="inline-flex items-center px-6 py-3 border border-transparent text-sm font-semibold rounded-full shadow-lg text-white 
        bg-gradient-to-br from-amber-600 to-amber-700 
        hover:from-amber-700 hover:to-amber-800 
        focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 
        dark:from-stone-600 dark:to-stone-700 
        dark:hover:from-stone-700 dark:hover:to-stone-800 
        dark:focus:ring-stone-400 
        dark:focus:ring-offset-stone-900 
        hover:scale-105 transform transition-all duration-300 ease-in-out relative overflow-hidden group">
          <span class="absolute w-full h-full -top-full left-0 bg-yellow-300 opacity-20 transform scale-0 group-hover:scale-100 transition-all duration-500 ease-out origin-top"></span>
          View Transaction
          <svg class="ml-2 -mr-1 h-4 w-4 transform -rotate-45 group-hover:rotate-0 transition-transform duration-300 ease-in-out" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0l-7 7"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

Back to Top Button Component

A 'back to top' button for CRM/Business Tools, designed in a Bauhaus style with high-contrast colors, featuring geometric forms and responsiveness for all screen sizes, including dark mode support.

Open Preview

                <div class="fixed bottom-4 right-4 z-50">
  <!-- Outer square container for Bauhaus aesthetic -->
  <a href="#" class="group block w-14 h-14 md:w-16 md:h-16 lg:w-20 lg:h-20 bg-blue-600 dark:bg-yellow-400 p-1 md:p-2 lg:p-3 relative overflow-hidden transition-all duration-300 ease-in-out hover:scale-110 active:scale-95 shadow-lg dark:shadow-yellow-800/50">
    <!-- Inner square acts as a focus element, rotates on hover -->
    <div class="w-full h-full bg-red-600 dark:bg-black flex items-center justify-center transform transition-transform duration-300 ease-in-out group-hover:rotate-45">
      <!-- Arrow Icon - Simple geometric shapes -->
      <svg class="w-8 h-8 md:w-10 md:h-10 text-white dark:text-blue-600 transform -rotate-90 group-hover:scale-125 transition-transform duration-300 ease-in-out" 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 10l7-7m0 0l7 7m-7-7v18"></path>
      </svg>
    </div>
    <span class="sr-only">Back to Top</span>
  </a>
</div>

1 ... 62 63 64 65 66 ... 335

Search Components

Categories

All Components