Search Components

Comments Section

Area where users can post comments

Comments Section Component

A clean, minimalist comments section component with a candy/sweet color scheme, designed for educational platforms. Features responsive layout, dark mode support, and emphasizes typography.

Open Preview

                <section class="p-4 sm:p-6 md:p-8 lg:p-10 bg-gradient-to-br from-pink-50 to-purple-50 dark:from-gray-900 dark:to-gray-800 font-sans">
  <div class="max-w-4xl mx-auto rounded-lg shadow-xl overflow-hidden bg-white dark:bg-gray-850">
    <header class="px-5 py-4 border-b border-pink-100 dark:border-gray-700 bg-pink-50 dark:bg-gray-800">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white flex items-center">
        Comments
        <span class="ml-2 text-sm bg-pink-200 dark:bg-gray-700 text-pink-700 dark:text-gray-300 px-3 py-1 rounded-full">4</span>
      </h2>
    </header>

    <div class="p-5 sm:p-6">
      <!-- Comment Input Area -->
      <div class="mb-6">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-3">Leave a comment</h3>
        <div class="flex items-start space-x-4 mb-4">
          <img class="w-10 h-10 rounded-full object-cover border-2 border-pink-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Your avatar">
          <textarea class="flex-1 p-3 border border-pink-200 dark:border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-300 dark:focus:ring-pink-500 bg-pink-50 dark:bg-gray-750 text-gray-800 dark:text-gray-100 placeholder-pink-400 dark:placeholder-gray-400 resize-y min-h-[60px] max-h-[150px]" placeholder="Type your comment here..."></textarea>
        </div>
        <div class="flex justify-end">
          <button class="px-5 py-2 bg-pink-500 hover:bg-pink-600 text-white font-semibold rounded-lg shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-pink-400 focus:ring-offset-2 focus:ring-offset-pink-50 dark:focus:ring-offset-gray-850">
            Post Comment
          </button>
        </div>
      </div>

      <!-- Comment List -->
      <div class="space-y-6 sm:space-y-8">
        <!-- Comment 1 -->
        <article class="flex items-start space-x-4 p-4 rounded-lg bg-pink-50 dark:bg-gray-800 border border-pink-100 dark:border-gray-700">
          <img class="w-10 h-10 rounded-full object-cover border-2 border-mint-300 dark:border-cyan-600" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Alice Wonderland">
          <div class="flex-1">
            <div class="flex justify-between items-center mb-1">
              <h4 class="font-bold text-gray-800 dark:text-white">Alice Wonderland</h4>
              <span class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</span>
            </div>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed text-sm lg:text-base">This explanation really clarified the concept for me! The examples were perfectly chosen. Thank you so much!</p>
            <div class="mt-3 flex items-center space-x-4 text-sm">
              <button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-pink-600 dark:hover:text-pink-400 transition-colors 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
                <span>Like (5)</span>
              </button>
              <button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-pink-600 dark:hover:text-pink-400 transition-colors 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 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
                <span>Reply</span>
              </button>
            </div>

            <!-- Reply Slot -->
            <div class="mt-4 pl-8 border-l-2 border-mint-200 dark:border-cyan-700 space-y-4">
              <article class="flex items-start space-x-4 p-3 rounded-lg bg-pink-100 dark:bg-gray-750 border border-pink-200 dark:border-gray-700">
                <img class="w-8 h-8 rounded-full object-cover border-2 border-pink-300 dark:border-fuchsia-600" src="https://randomuser.me/api/portraits/men/55.jpg" alt="Bob The Builder">
                <div class="flex-1">
                  <div class="flex justify-between items-center mb-1">
                    <h4 class="font-bold text-gray-800 dark:text-white">Bob The Builder</h4>
                    <span class="text-xs text-gray-500 dark:text-gray-400">1 hour ago</span>
                  </div>
                  <p class="text-gray-700 dark:text-gray-300 leading-relaxed text-sm">@Alice Wonderland, I agree! This was super helpful. Learning a lot.</p>
                  <div class="mt-2 flex items-center space-x-4 text-xs">
                    <button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-pink-600 dark:hover:text-pink-400 transition-colors duration-200">
                      <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
                      <span>Like (2)</span>
                    </button>
                    <button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-pink-600 dark:hover:text-pink-400 transition-colors duration-200">
                      <svg class="w-3 h-3 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 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
                      <span>Reply</span>
                    </button>
                  </div>
                </div>
              </article>
            </div>
          </div>
        </article>

        <!-- Comment 2 -->
        <article class="flex items-start space-x-4 p-4 rounded-lg bg-pink-50 dark:bg-gray-800 border border-pink-100 dark:border-gray-700">
          <img class="w-10 h-10 rounded-full object-cover border-2 border-pink-300 dark:border-fuchsia-600" src="https://randomuser.me/api/portraits/men/44.jpg" alt="Charlie Chaplin">
          <div class="flex-1">
            <div class="flex justify-between items-center mb-1">
              <h4 class="font-bold text-gray-800 dark:text-white">Charlie Chaplin</h4>
              <span class="text-xs text-gray-500 dark:text-gray-400">1 day ago</span>
            </div>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed text-sm lg:text-base">Could you perhaps elaborate a bit more on the third point? I'm finding it slightly challenging to grasp the nuances. Thanks in advance!</p>
            <div class="mt-3 flex items-center space-x-4 text-sm">
              <button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-pink-600 dark:hover:text-pink-400 transition-colors 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
                <span>Like (3)</span>
              </button>
              <button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-pink-600 dark:hover:text-pink-400 transition-colors 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 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
                <span>Reply</span>
              </button>
            </div>
          </div>
        </article>
      </div>
    </div>
  </div>
</section>

Comments Section Component

A clean, code-inspired comments section component with monospace fonts and pastel colors, designed for entertainment/media platforms. Features responsiveness and dark mode support.

Open Preview

                <section class="font-mono bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 py-8 md:py-12 lg:py-16">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl">
    <h2 class="text-3xl md:text-4xl font-bold mb-8 text-center text-gray-900 dark:text-gray-100 uppercase tracking-widest">
      <span class="block">// Comments</span>
    </h2>

    <!-- New Comment Input -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mb-8 border border-gray-200 dark:border-gray-700">
      <h3 class="text-xl font-semibold mb-4 text-gray-700 dark:text-gray-300">Leave a Comment <span class="text-purple-400">></span></h3>
      <textarea class="w-full p-3 mb-4 rounded-md bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-purple-400 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 text-sm md:text-base resize-y min-h-[80px]"
        placeholder="Type your comment here..."></textarea>
      <div class="flex justify-end">
        <button class="px-6 py-2 bg-purple-400 text-white rounded-md hover:bg-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 transition-colors duration-200 text-sm md:text-base font-semibold uppercase tracking-wider">
          Submit <span class="hidden sm:inline">//</span>
        </button>
      </div>
    </div>

    <!-- Comments List -->
    <div class="space-y-6">
      <!-- Comment 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
        <div class="flex items-start mb-4">
          <img class="w-10 h-10 rounded-full mr-4 border-2 border-green-300 dark:border-green-400" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
          <div>
            <p class="text-sm md:text-base font-semibold text-gray-700 dark:text-gray-300">@<span class="text-blue-400">john_doe</span></p>
            <p class="text-xs text-gray-500 dark:text-gray-400">2 days ago</p>
          </div>
        </div>
        <p class="text-gray-800 dark:text-gray-200 text-sm md:text-base leading-relaxed mb-4">
          This episode was absolutely mind-blowing! The plot twists kept me on the edge of my seat. Can't wait for the next one. 
          <span class="text-green-400">// Kudos to the production team!</span>
        </p>
        <div class="flex items-center text-sm">
          <button class="flex items-center text-pink-400 hover:text-pink-500 mr-4 transition-colors duration-200">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
              <path d="M9.049 2.927c.3-.614.937-.991 1.637-.991s1.336.377 1.637.991l1.792 3.633 4.021.583c.677.098 1.096.86.64 1.411l-2.91 2.839.687 4.004c.117.68-.592 1.205-1.226.877L10 16.273l-3.593 1.89c-.634.328-1.343-.197-1.226-.877l.687-4.004-2.91-2.839c-.456-.551-.037-1.313.64-1.411l4.02-.583L9.049 2.927z"></path>
            </svg>
            <span class="text-gray-600 dark:text-gray-400">123 <span class="hidden sm:inline">Likes</span></span>
          </button>
          <button class="flex items-center text-yellow-400 hover:text-yellow-500 transition-colors duration-200">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 102 0v-2a9 9 0 00-9-9H5.414l2.293-2.293a1 1 0 00-1.414-1.414l-4 4a1 1 0 000 1.414l4 4a1 1 0 001.414-1.414L5.414 11H11a5 5 0 005-5V4a1 1 0 10-2 0v2a3 3 0 01-3 3H7.707a1 1 0 000 1.414z" clip-rule="evenodd"></path>
            </svg>
            <span class="text-gray-600 dark:text-gray-400">45 <span class="hidden sm:inline">Replies</span></span>
          </button>
        </div>
      </div>

      <!-- Comment 2 (with a reply) -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
        <div class="flex items-start mb-4">
          <img class="w-10 h-10 rounded-full mr-4 border-2 border-orange-300 dark:border-orange-400" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
          <div>
            <p class="text-sm md:text-base font-semibold text-gray-700 dark:text-gray-300">@<span class="text-purple-400">coder_girl</span></p>
            <p class="text-xs text-gray-500 dark:text-gray-400">1 day ago</p>
          </div>
        </div>
        <p class="text-gray-800 dark:text-gray-200 text-sm md:text-base leading-relaxed mb-4">
          I loved the attention to detail in the set design! It really adds to the immersion. 
          <span class="text-red-400">// Amazing work backend-devs!</span>
        </p>
        <div class="flex items-center text-sm mb-4">
          <button class="flex items-center text-pink-400 hover:text-pink-500 mr-4 transition-colors duration-200">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
              <path d="M9.049 2.927c.3-.614.937-.991 1.637-.991s1.336.377 1.637.991l1.792 3.633 4.021.583c.677.098 1.096.86.64 1.411l-2.91 2.839.687 4.004c.117.68-.592 1.205-1.226.877L10 16.273l-3.593 1.89c-.634.328-1.343-.197-1.226-.877l.687-4.004-2.91-2.839c-.456-.551-.037-1.313.64-1.411l4.02-.583L9.049 2.927z"></path>
            </svg>
            <span class="text-gray-600 dark:text-gray-400">88 <span class="hidden sm:inline">Likes</span></span>
          </button>
          <button class="flex items-center text-yellow-400 hover:text-yellow-500 transition-colors duration-200">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 102 0v-2a9 9 0 00-9-9H5.414l2.293-2.293a1 1 0 00-1.414-1.414l-4 4a1 1 0 000 1.414l4 4a1 1 0 001.414-1.414L5.414 11H11a5 5 0 005-5V4a1 1 0 10-2 0v2a3 3 0 01-3 3H7.707a1 1 0 000 1.414z" clip-rule="evenodd"></path>
            </svg>
            <span class="text-gray-600 dark:text-gray-400">12 <span class="hidden sm:inline">Replies</span></span>
          </button>
        </div>

        <!-- Reply -->
        <div class="ml-8 pt-4 border-t border-gray-200 dark:border-gray-700">
          <div class="flex items-start mb-4">
            <img class="w-8 h-8 rounded-full mr-3 border border-blue-300 dark:border-blue-400" src="https://randomuser.me/api/portraits/men/22.jpg" alt="Reply User Avatar">
            <div>
              <p class="text-xs md:text-sm font-semibold text-gray-700 dark:text-gray-300">@<span class="text-blue-400">_dev_ops_</span></p>
              <p class="text-xs text-gray-500 dark:text-gray-400">1 hour ago</p>
            </div>
          </div>
          <p class="text-gray-800 dark:text-gray-200 text-sm md:text-base leading-relaxed">
            Agreed! The world-building was top-notch.
            <span class="text-blue-400">// immersive experience</span>
          </p>
        </div>
      </div>

      <!-- Comment 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
        <div class="flex items-start mb-4">
          <img class="w-10 h-10 rounded-full mr-4 border-2 border-purple-300 dark:border-purple-400" src="https://randomuser.me/api/portraits/women/3.jpg" alt="User Avatar">
          <div>
            <p class="text-sm md:text-base font-semibold text-gray-700 dark:text-gray-300">@<span class="text-green-400">film_buff_89</span></p>
            <p class="text-xs text-gray-500 dark:text-gray-400">5 hours ago</p>
          </div>
        </div>
        <p class="text-gray-800 dark:text-gray-200 text-sm md:text-base leading-relaxed mb-4">
          The soundtrack was incredible. Definitely adding it to my playlist. Anyone else feel the same?
          <span class="text-yellow-400">// bangers only</span>
        </p>
        <div class="flex items-center text-sm">
          <button class="flex items-center text-pink-400 hover:text-pink-500 mr-4 transition-colors duration-200">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
              <path d="M9.049 2.927c.3-.614.937-.991 1.637-.991s1.336.377 1.637.991l1.792 3.633 4.021.583c.677.098 1.096.86.64 1.411l-2.91 2.839.687 4.004c.117.68-.592 1.205-1.226.877L10 16.273l-3.593 1.89c-.634.328-1.343-.197-1.226-.877l.687-4.004-2.91-2.839c-.456-.551-.037-1.313.64-1.411l4.02-.583L9.049 2.927z"></path>
            </svg>
            <span class="text-gray-600 dark:text-gray-400">56 <span class="hidden sm:inline">Likes</span></span>
          </button>
          <button class="flex items-center text-yellow-400 hover:text-yellow-500 transition-colors duration-200">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 102 0v-2a9 9 0 00-9-9H5.414l2.293-2.293a1 1 0 00-1.414-1.414l-4 4a1 1 0 000 1.414l4 4a1 1 0 001.414-1.414L5.414 11H11a5 5 0 005-5V4a1 1 0 10-2 0v2a3 3 0 01-3 3H7.707a1 1 0 000 1.414z" clip-rule="evenodd"></path>
            </svg>
            <span class="text-gray-600 dark:text-gray-400">7 <span class="hidden sm:inline">Replies</span></span>
          </button>
        </div>
      </div>
    </div>
  </div>
</section>

Cyberpunk Autumn Comments Section

A simple cyberpunk-themed comments section for a dashboard, featuring dark backgrounds, neon-like accents, and rich autumn colors. Fully responsive with dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gray-950 dark:bg-black text-gray-200 dark:text-gray-100 font-mono antialiased mx-auto lg:max-w-4xl rounded-lg shadow-xl border border-orange-800 dark:border-purple-900 overflow-hidden">

  <!-- Section Header -->
  <div class="mb-6 pb-4 border-b-2 border-orange-700 dark:border-purple-700">
    <h2 class="text-2xl sm:text-3xl font-bold text-orange-400 dark:text-purple-400 uppercase tracking-widest leading-tight">
      // Event Logs_ <span class="text-xs text-amber-500 dark:text-fuchsia-500 ml-2">_online</span>
    </h2>
    <p class="text-sm text-gray-500 dark:text-gray-600 mt-1">_System activity and user interactions</p>
  </div>

  <!-- Comment Input Section -->
  <div class="mb-8 p-4 bg-gray-900 dark:bg-gray-950 rounded-md border border-orange-900 dark:border-purple-900">
    <div class="relative mb-4">
      <textarea
        class="w-full p-3 pr-10 bg-gray-800 dark:bg-gray-900 rounded-md border border-orange-700 dark:border-purple-700 focus:ring-1 focus:ring-orange-500 dark:focus:ring-purple-500 outline-none text-sm text-gray-100 placeholder-gray-500 resize-none h-24 caret-orange-400 dark:caret-purple-400"
        placeholder="// Enter new log entry_ "
      ></textarea>
      <svg class="absolute bottom-3 right-3 w-5 h-5 text-gray-600 dark:text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000//svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414l-4.243 4.243m4.243-4.243a1 1 0 011.414 0l2.829 2.829a1 1 0 010 1.414l-4.243 4.243m-4.243-4.243L9.586 16.414m0 0a2 2 0 01-2.828 0l-1.414-1.414a2 2 0 010-2.828l1.414-1.414"></path></svg>
    </div>
    <button
      class="w-full sm:w-auto px-6 py-2 bg-orange-600 dark:bg-purple-600 text-white dark:text-gray-100 uppercase text-sm font-semibold rounded-md hover:bg-orange-700 dark:hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-orange-500 dark:focus:ring-purple-500 transition-colors duration-200 shadow-md transform hover:scale-105 active:scale-95"
    >
      // TRANSMIT_
    </button>
  </div>

  <!-- Comments List -->
  <div class="space-y-6">

    <!-- Comment 1 -->
    <div class="p-4 bg-gray-900 dark:bg-gray-950 rounded-md border border-orange-900 dark:border-purple-900 relative group">
      <div class="absolute top-0 left-0 w-2 h-full bg-orange-500 dark:bg-purple-500 group-hover:scale-y-105 origin-top transition-transform duration-300"></div>
      <div class="flex items-start mb-3">
        <img class="w-10 h-10 rounded-full object-cover border-2 border-orange-600 dark:border-purple-600 mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div>
          <p class="text-orange-400 dark:text-purple-400 font-bold text-sm leading-tight">
            _Agent_Smith_ <span class="text-gray-500 dark:text-gray-600 italic text-xs ml-2">//_Active</span>
          </p>
          <p class="text-gray-500 dark:text-gray-600 text-xs mt-0.5">_Oct 27, 2077 _09:34 AM</p>
        </div>
      </div>
      <p class="text-sm text-gray-200 dark:text-gray-100 leading-relaxed">
        // Initializing protocol 'Phoenix'. Data streams nominal. Awaiting further instruction. <span class="text-green-500 dark:text-green-400 text-xs ml-1">_status: ONLINE</span>
      </p>
    </div>

    <!-- Comment 2 -->
    <div class="p-4 bg-gray-900 dark:bg-gray-950 rounded-md border border-orange-900 dark:border-purple-900 relative group">
      <div class="absolute top-0 left-0 w-2 h-full bg-orange-500 dark:bg-purple-500 group-hover:scale-y-105 origin-top transition-transform duration-300"></div>
      <div class="flex items-start mb-3">
        <img class="w-10 h-10 rounded-full object-cover border-2 border-orange-600 dark:border-purple-600 mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div>
          <p class="text-orange-400 dark:text-purple-400 font-bold text-sm leading-tight">
            _NetRunner_Ava_ <span class="text-gray-500 dark:text-gray-600 italic text-xs ml-2">//_Connected</span>
          </p>
          <p class="text-gray-500 dark:text-gray-600 text-xs mt-0.5">_Oct 27, 2077 _10:12 AM</p>
        </div>
      </div>
      <p class="text-sm text-gray-200 dark:text-gray-100 leading-relaxed">
        // Trace complete on 'Project Echo'. Found encrypted sub-routines. Requires enhanced decryption key. <span class="text-yellow-500 dark:text-yellow-400 text-xs ml-1">_status: PENDING</span>
      </p>
    </div>

    <!-- Comment 3 -->
    <div class="p-4 bg-gray-900 dark:bg-gray-950 rounded-md border border-orange-900 dark:border-purple-900 relative group">
      <div class="absolute top-0 left-0 w-2 h-full bg-orange-500 dark:bg-purple-500 group-hover:scale-y-105 origin-top transition-transform duration-300"></div>
      <div class="flex items-start mb-3">
        <img class="w-10 h-10 rounded-full object-cover border-2 border-orange-600 dark:border-purple-600 mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
        <div>
          <p class="text-orange-400 dark:text-purple-400 font-bold text-sm leading-tight">
            _Ghost_ <span class="text-gray-500 dark:text-gray-600 italic text-xs ml-2">//_Offline</span>
          </p>
          <p class="text-gray-500 dark:text-gray-600 text-xs mt-0.5">_Oct 27, 2077 _11:55 AM</p>
        </div>
      </div>
      <p class="text-sm text-gray-200 dark:text-gray-100 leading-relaxed">
        // Firewall breach detected on sector Gamma-7. Countermeasures deployed. Casualties minimal. <span class="text-red-500 dark:text-red-400 text-xs ml-1">_status: CRITICAL</span>
      </p>
    </div>

  </div>

  <!-- Footer Placeholder -->
  <div class="mt-8 pt-4 border-t-2 border-orange-700 dark:border-purple-700 text-xs text-gray-600 dark:text-gray-700 text-center">
    // End of Log File_ 
  </div>

</div>

A complex, responsive comments section component designed for booking/reservation systems with a Bauhaus-inspired black and white color scheme and a bright accent color. Includes user avatars, star ratings, timestamps, and dark mode support.

Open Preview

                <div class="font-sans bg-gray-50 dark:bg-gray-900 min-h-screen py-8 sm:py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="p-6 sm:p-8 bg-gray-100 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-700 flex flex-col sm:flex-row items-start sm:items-center justify-between">
      <div>
        <h2 class="text-2xl sm:text-3xl font-bold tracking-tight text-gray-900 dark:text-white mb-2">Client Reviews</h2>
        <p class="text-base sm:text-lg text-gray-600 dark:text-gray-300">What our clients say about their experience.</p>
      </div>
      <div class="flex items-center mt-4 sm:mt-0">
        <span class="text-4xl font-bold text-gray-900 dark:text-white mr-2">4.7</span>
        <div class="flex flex-col">
          <div class="flex text-yellow-400">
            <svg class="w-5 h-5" fill="currentColor" 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.924 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="currentColor" 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.924 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="currentColor" 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.924 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="currentColor" 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.924 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="currentColor" 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.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          </div>
          <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Based on 1,234 reviews</p>
        </div>
      </div>
    </div>

    <div class="p-6 sm:p-8 space-y-8">

      <!-- Comment 1 -->
      <div class="flex items-start">
        <img class="w-12 h-12 rounded-full object-cover mr-4 ring-2 ring-indigo-500 dark:ring-indigo-400" src="https://randomuser.me/api/portraits/women/42.jpg" alt="User Avatar">
        <div class="flex-1">
          <div class="flex justify-between items-center mb-2">
            <p class="font-semibold text-gray-900 dark:text-white">Sarah L.</p>
            <div class="flex items-center text-yellow-400">
              <svg class="w-4 h-4" fill="currentColor" 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.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" 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.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" 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.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" 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.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" 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.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
          </div>
          <p class="text-sm text-gray-700 dark:text-gray-300 mb-2">“The service was prompt and professional. I was able to book my appointment in minutes, and the staff was incredibly helpful. Highly recommend!”</p>
          <div class="flex justify-between items-center text-xs text-gray-500 dark:text-gray-400">
            <span>Booked: Sept 14, 2023</span>
            <span>2 days ago</span>
          </div>
        </div>
      </div>

      <!-- Comment 2 -->
      <div class="flex items-start border-t border-gray-100 dark:border-gray-700 pt-8">
        <img class="w-12 h-12 rounded-full object-cover mr-4 ring-2 ring-indigo-500 dark:ring-indigo-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div class="flex-1">
          <div class="flex justify-between items-center mb-2">
            <p class="font-semibold text-gray-900 dark:text-white">Michael B.</p>
            <div class="flex items-center text-yellow-400">
              <svg class="w-4 h-4" fill="currentColor" 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.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" 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.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" 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.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" 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.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4 text-gray-300 dark:text-gray-600" fill="currentColor" 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.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
          </div>
          <p class="text-sm text-gray-700 dark:text-gray-300 mb-2">“Easy to navigate and straightforward booking process. Had a slight issue with rescheduling but customer support handled it quickly.”</p>
          <div class="flex justify-between items-center text-xs text-gray-500 dark:text-gray-400">
            <span>Booked: Aug 28, 2023</span>
            <span>3 weeks ago</span>
          </div>
        </div>
      </div>

      <!-- Comment 3 -->
      <div class="flex items-start border-t border-gray-100 dark:border-gray-700 pt-8">
        <img class="w-12 h-12 rounded-full object-cover mr-4 ring-2 ring-indigo-500 dark:ring-indigo-400" src="https://randomuser.me/api/portraits/men/77.jpg" alt="User Avatar">
        <div class="flex-1">
          <div class="flex justify-between items-center mb-2">
            <p class="font-semibold text-gray-900 dark:text-white">David P.</p>
            <div class="flex items-center text-yellow-400">
              <svg class="w-4 h-4" fill="currentColor" 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.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" 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.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" 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.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" 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.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" 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.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
          </div>
          <p class="text-sm text-gray-700 dark:text-gray-300 mb-2">“Excellent experience from start to finish. The booking flow was seamless and notifications were very helpful. Highly satisfied!”</p>
          <div class="flex justify-between items-center text-xs text-gray-500 dark:text-gray-400">
            <span>Booked: Sept 01, 2023</span>
            <span>1 week ago</span>
          </div>
        </div>
      </div>

      <!-- Comment 4 -->
      <div class="flex items-start border-t border-gray-100 dark:border-gray-700 pt-8">
        <img class="w-12 h-12 rounded-full object-cover mr-4 ring-2 ring-indigo-500 dark:ring-indigo-400" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
        <div class="flex-1">
          <div class="flex justify-between items-center mb-2">
            <p class="font-semibold text-gray-900 dark:text-white">Emily R.</p>
            <div class="flex items-center text-yellow-400">
              <svg class="w-4 h-4" fill="currentColor" 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.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" 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.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" 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.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" 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.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4 text-gray-300 dark:text-gray-600" fill="currentColor" 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.924 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
          </div>
          <p class="text-sm text-gray-700 dark:text-gray-300 mb-2">“Smooth process from start to finish. The app is intuitive and the booking was confirmed instantly. Will definitely use again.”</p>
          <div class="flex justify-between items-center text-xs text-gray-500 dark:text-gray-400">
            <span>Booked: Aug 20, 2023</span>
            <span>1 month ago</span>
          </div>
        </div>
      </div>

    </div>

    <div class="p-6 sm:p-8 bg-gray-100 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-700 flex flex-col sm:flex-row items-center justify-between">
      <p class="text-sm text-gray-600 dark:text-gray-300 mb-4 sm:mb-0">Want to add your own review?</p>
      <button type="button" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800">
        Write a Review
        <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
      </button>
    </div>
  </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>

Comments Section Component

A simple and responsive comments section component with a sunset/warm color scheme, microinteractions, and dark mode support, suitable for agriculture/farming websites.

Open Preview

                <div class="font-sans antialiased bg-orange-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-4 sm:p-6 lg:p-8">
  <div class="max-w-xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transition-all duration-300 transform hover:scale-[1.01] focus-within:scale-[1.01] border border-orange-200 dark:border-gray-700">
    <div class="p-6 sm:p-8 bg-gradient-to-r from-orange-100 to-amber-100 dark:from-gray-700 dark:to-gray-800 border-b border-orange-200 dark:border-gray-700">
      <h2 class="text-2xl sm:text-3xl font-bold text-orange-800 dark:text-orange-300 mb-2 interaction-grow-text">
        Harvest Thoughts
      </h2>
      <p class="text-orange-700 dark:text-orange-400 text-sm sm:text-base">
        Share your insights and experiences from the field.
      </p>
    </div>

    <div class="p-6 sm:p-8 space-y-6">
      <!-- Comment 1 -->
      <div class="flex items-start space-x-4 group">
        <img class="w-10 h-10 rounded-full object-cover ring-2 ring-orange-400 dark:ring-orange-500 transition-transform duration-200 group-hover:scale-105" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div class="flex-1">
          <div class="flex justify-between items-baseline mb-1">
            <p class="font-semibold text-orange-700 dark:text-orange-300 interaction-glow-text">Marcus Farmhand</p>
            <span class="text-xs text-gray-500 dark:text-gray-400">2 days ago</span>
          </div>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
            "Great write-up! We've had similar success with cover crops in our rotation. Helps a lot with soil health."</p>
        </div>
      </div>

      <!-- Comment 2 -->
      <div class="flex items-start space-x-4 group">
        <img class="w-10 h-10 rounded-full object-cover ring-2 ring-orange-400 dark:ring-orange-500 transition-transform duration-200 group-hover:scale-105" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div class="flex-1">
          <div class="flex justify-between items-baseline mb-1">
            <p class="font-semibold text-orange-700 dark:text-orange-300 interaction-glow-text">Anya Gardener</p>
            <span class="text-xs text-gray-500 dark:text-gray-400">1 day ago</span>
          </div>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
            "Question: What's the best natural pest control for aphids on tomatoes? Always a challenge this time of year!"</p>
        </div>
      </div>

      <!-- Add Comment Form -->
      <div class="pt-6 border-t border-orange-200 dark:border-gray-700">
        <h3 class="text-lg font-semibold text-orange-800 dark:text-orange-300 mb-4 interaction-grow-text">Leave a New Comment</h3>
        <form class="space-y-4">
          <textarea class="w-full p-3 rounded-lg border border-orange-300 dark:border-gray-600 bg-orange-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-orange-500 focus:border-transparent outline-none transition duration-200 ease-in-out transform focus:scale-[1.01] hover:shadow-md" rows="4" placeholder="Share your thoughts..."></textarea>
          <button type="submit" class="w-full py-3 px-4 bg-orange-600 hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 text-white font-bold rounded-lg shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-gray-800 interaction-pulsate">
            Post Comment
          </button>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Microinteraction styles (optional, could be in a separate CSS file or utility classes) -->
<style>
/* Example for grow-text and pulsate interactions */
.interaction-grow-text:hover {
  text-shadow: 0px 0px 8px rgba(251, 146, 60, 0.5); /* Tailwind orange-400 with blur */
  transform: scale(1.02);
  transition: all 0.2s ease-out;
}

.interaction-glow-text:hover {
  text-shadow: 0px 0px 6px rgba(251, 146, 60, 0.7); /* Tailwind orange-400 with more blur */
}

@keyframes pulsate {
  0% {
    box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.4); /* Tailwind orange-600 */
  }
  70% {
    box-shadow: 0 0 0 10px rgba(234, 88, 12, 0); /* Tailwind orange-600 */
  }
  100% {
    box-shadow: 0 0 0 0 rgba(234, 88, 12, 0); /* Tailwind orange-600 */
  }
}

.interaction-pulsate:hover {
  animation: pulsate 1s infinite;
}
</style>

Comments Section Component

A simple and responsive comments section component with cool neutral colors and dark mode support, suitable for forum or community platforms.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-3xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <div class="p-4 sm:p-6 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Comments</h2>
    </div>
    
    <!-- New Comment Input -->
    <div class="p-4 sm:p-6">
      <div class="mb-4">
        <textarea class="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200 ease-in-out" rows="3" placeholder="Join the discussion..."></textarea>
      </div>
      <button class="px-5 py-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow-md transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
        Post Comment
      </button>
    </div>

    <!-- Comments List -->
    <div class="divide-y divide-gray-200 dark:divide-gray-700">
      <!-- Comment 1 -->
      <div class="p-4 sm:p-6 flex space-x-4">
        <div class="flex-shrink-0">
          <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        </div>
        <div class="flex-1">
          <div class="flex items-center justify-between mb-1">
            <p class="font-semibold text-gray-900 dark:text-gray-100">John Doe</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</p>
          </div>
          <p class="text-gray-700 dark:text-gray-300 mb-2">This is a great component! Simple, clean, and perfect for dark mode. Love the cool neutral palette.</p>
          <div class="flex space-x-4 text-sm text-gray-500 dark:text-gray-400">
            <a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400">Reply</a>
            <a href="#" class="hover:underline hover:text-red-500">Edit</a>
            <a href="#" class="hover:underline hover:text-red-500">Delete</a>
          </div>
        </div>
      </div>

      <!-- Comment 2 -->
      <div class="p-4 sm:p-6 flex space-x-4">
        <div class="flex-shrink-0">
          <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        </div>
        <div class="flex-1">
          <div class="flex items-center justify-between mb-1">
            <p class="font-semibold text-gray-900 dark:text-gray-100">Jane Smith</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">1 hour ago</p>
          </div>
          <p class="text-gray-700 dark:text-gray-300 mb-2">Agreed! The responsiveness is also very well done. Keeps things clear on mobile.</p>
          <div class="flex space-x-4 text-sm text-gray-500 dark:text-gray-400">
            <a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400">Reply</a>
            <a href="#" class="hover:underline hover:text-red-500">Edit</a>
            <a href="#" class="hover:underline hover:text-red-500">Delete</a>
          </div>
        </div>
      </div>
      
      <!-- Comment 3 (Example with a longer text) -->
      <div class="p-4 sm:p-6 flex space-x-4">
        <div class="flex-shrink-0">
          <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        </div>
        <div class="flex-1">
          <div class="flex items-center justify-between mb-1">
            <p class="font-semibold text-gray-900 dark:text-gray-100">Alex P.</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">30 minutes ago</p>
          </div>
          <p class="text-gray-700 dark:text-gray-300 mb-2">I appreciate the use of semantic HTML and the clean structure. It makes the code easy to read and understand, which is crucial for maintainability. Great job on the dark mode implementation too; it really reduces eye strain, especially during late-night browsing sessions. The cool neutral colors contribute to a very professional and calming aesthetic. This would fit perfectly into many modern web applications.</p>
          <div class="flex space-x-4 text-sm text-gray-500 dark:text-gray-400 ">
            <a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400">Reply</a>
            <a href="#" class="hover:underline hover:text-red-500">Edit</a>
            <a href="#" class="hover:underline hover:text-red-500">Delete</a>
          </div>
        </div>
      </div>
    </div>
    
  </div>
</div>

Brutalism_Rainbow_Medical_Comments_Section

A complex, brutalist-inspired comments section component for healthcare/medical applications, featuring a vibrant rainbow gradient color scheme and full responsiveness with dark mode support.

Open Preview

                <section class="p-4 sm:p-8 md:p-12 min-h-screen bg-neutral-50 dark:bg-neutral-900 font-mono text-neutral-900 dark:text-neutral-50">

  <!-- Brutalist Rainbow Gradient Header -->
  <div class="mb-8 md:mb-12 border-4 border-neutral-900 dark:border-neutral-50 p-4 sm:p-6 md:p-8 
              bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 
              dark:from-red-700 dark:via-yellow-700 dark:to-green-700 
              shadow-[8px_8px_0_0_rgba(0,0,0,1)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,1)] 
              relative overflow-hidden group">
    <h1 class="text-2xl sm:text-3xl md:text-5xl lg:text-6xl font-extrabold tracking-tighter uppercase relative z-10 text-neutral-900 dark:text-neutral-50">
      Patient Feedback Terminal
    </h1>
    <p class="text-sm sm:text-md md:text-lg mt-2 relative z-10 text-neutral-900 dark:text-neutral-50">
      Comments Interface // Unauthorized Access Will Be Logged
    </p>
    <!-- Glitch Effect -->
    <div class="absolute inset-0 bg-gradient-to-l from-blue-500 via-indigo-500 to-purple-500 dark:from-blue-700 dark:via-indigo-700 dark:to-purple-700 mix-blend-multiply opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
  </div>

  <!-- New Comment Submission Area -->
  <div class="mb-10 p-6 sm:p-8 border-4 border-neutral-900 dark:border-neutral-50 
              bg-neutral-200 dark:bg-neutral-800 
              shadow-[6px_6px_0_0_rgba(0,0,0,1)] dark:shadow-[6px_6px_0_0_rgba(255,255,255,1)]">
    <h2 class="text-xl sm:text-2xl font-bold mb-4 uppercase">Transmit New Datum</h2>
    <form>
      <div class="mb-4">
        <label for="comment-author" class="block text-sm font-bold mb-2">ATTENDEE ID:</label>
        <input type="text" id="comment-author" placeholder="[ANONYMOUS]" class="w-full p-3 border-2 border-neutral-900 dark:border-neutral-50 bg-neutral-100 dark:bg-neutral-900 text-neutral-900 dark:text-neutral-50 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400">
      </div>
      <div class="mb-4">
        <label for="comment-text" class="block text-sm font-bold mb-2">OBSERVATION LOG:</label>
        <textarea id="comment-text" rows="5" placeholder="State your findings..." class="w-full p-3 border-2 border-neutral-900 dark:border-neutral-50 bg-neutral-100 dark:bg-neutral-900 text-neutral-900 dark:text-neutral-50 focus:outline-none focus:ring-2 focus:ring-lime-500 dark:focus:ring-lime-400"></textarea>
      </div>
      <div class="flex flex-wrap gap-4 justify-between items-center">
        <button type="submit" class="px-6 py-3 
              bg-gradient-to-r from-purple-500 to-indigo-500 
              dark:from-purple-700 dark:to-indigo-700 
              text-neutral-50 dark:text-neutral-900 
              font-bold uppercase text-lg 
              border-2 border-neutral-900 dark:border-neutral-50 
              shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,1)] 
              hover:shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:hover:shadow-[2px_2px_0_0_rgba(255,255,255,1)] 
              transition-all duration-150 relative group overflow-hidden">
          <span class="relative z-10">INITIATE TRANSMISSION</span>
          <div class="absolute inset-0 bg-gradient-to-r from-red-500 to-orange-500 dark:from-red-600 dark:to-orange-600 mix-blend-overlay opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        </button>
        <div class="flex items-center space-x-2">
          <input type="checkbox" id="anonymous" class="h-5 w-5 border-2 border-neutral-900 dark:border-neutral-50 accent-red-500 dark:accent-red-700">
          <label for="anonymous" class="text-sm font-bold">DESIGNATE ANONYMOUS</label>
        </div>
      </div>
    </form>
  </div>

  <!-- Comments List -->
  <div class="grid gap-8">

    <!-- Comment 1 -->
    <article class="p-6 sm:p-8 
                    border-4 border-neutral-900 dark:border-neutral-50 
                    bg-gradient-to-br from-cyan-200 to-blue-300 opacity-90 
                    dark:from-cyan-800 dark:to-blue-900 dark:opacity-90 
                    shadow-[5px_5px_0_0_rgba(0,0,0,1)] dark:shadow-[5px_5px_0_0_rgba(255,255,255,1)] 
                    relative overflow-hidden group">
      <div class="absolute top-0 right-0 p-2 text-xs font-bold bg-neutral-900 dark:bg-neutral-50 text-neutral-50 dark:text-neutral-900 border-l-2 border-b-2 border-neutral-50 dark:border-neutral-900 shadow-[-2px_2px_0_0_rgba(0,0,0,0.5)] dark:shadow-[-2px_2px_0_0_rgba(255,255,255,0.5)]">STATUS: VERIFIED</div>
      
      <div class="flex items-start mb-4 relative z-10">
        <img src="https://randomuser.me/api/portraits/men/72.jpg" alt="User Avatar" class="w-16 h-16 sm:w-20 sm:h-20 border-4 border-neutral-900 dark:border-neutral-50 object-cover flex-shrink-0 mr-4 shadow-lg">
        <div>
          <p class="font-extrabold text-lg sm:text-xl uppercase tracking-tight">Dr. Alex "The Blade" Mercer</p>
          <time datetime="2023-10-27T10:30:00Z" class="text-sm text-neutral-700 dark:text-neutral-300 italic">LOG TIMESTAMP: 2023-10-27 10:30 ZULU</time>
          <div class="flex mt-2">
            <span class="inline-block bg-pink-500 text-neutral-50 text-xs font-bold px-2 py-1 border border-neutral-900 dark:border-neutral-50">SURGEON</span>
            <span class="inline-block bg-teal-500 text-neutral-50 text-xs font-bold px-2 py-1 ml-2 border border-neutral-900 dark:border-neutral-50">CLASSIFIED</span>
          </div>
        </div>
      </div>
      <p class="mb-4 text-md sm:text-lg leading-relaxed relative z-10">
        <strong class="uppercase text-red-700 dark:text-red-300">CRITICAL ALERT:</strong> Patient vitals stabilized post-procedure, but anomalous neurological readings persist. Recommending immediate Level IV diagnostic protocol. Data logs attached to secure server. Do not disregard this warning.
      </p>
      <div class="flex flex-wrap gap-2 text-xs font-bold relative z-10">
        <button class="px-3 py-1 bg-gradient-to-r from-red-500 to-orange-500 dark:from-red-700 dark:to-orange-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">AGREE [001]</button>
        <button class="px-3 py-1 bg-gradient-to-r from-green-500 to-lime-500 dark:from-green-700 dark:to-lime-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">DISAGREE [000]</button>
        <button class="px-3 py-1 bg-gradient-to-r from-blue-500 to-purple-500 dark:from-blue-700 dark:to-purple-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">REPORT [ERROR]</button>
      </div>
      <!-- Overlay Glitch -->
      <div class="absolute inset-0 bg-gradient-to-br from-yellow-500 to-orange-500 mix-blend-overlay opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    </article>

    <!-- Comment 2 -->
    <article class="p-6 sm:p-8 
                    border-4 border-neutral-900 dark:border-neutral-50 
                    bg-gradient-to-bl from-amber-200 to-red-300 opacity-90 
                    dark:from-amber-800 dark:to-red-900 dark:opacity-90 
                    shadow-[5px_5px_0_0_rgba(0,0,0,1)] dark:shadow-[5px_5px_0_0_rgba(255,255,255,1)] 
                    relative overflow-hidden group">
      <div class="absolute top-0 right-0 p-2 text-xs font-bold bg-neutral-900 dark:bg-neutral-50 text-neutral-50 dark:text-neutral-900 border-l-2 border-b-2 border-neutral-50 dark:border-neutral-900 shadow-[-2px_2px_0_0_rgba(0,0,0,0.5)] dark:shadow-[-2px_2px_0_0_rgba(255,255,255,0.5)]">STATUS: PENDING</div>

      <div class="flex items-start mb-4 relative z-10">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-16 h-16 sm:w-20 sm:h-20 border-4 border-neutral-900 dark:border-neutral-50 object-cover flex-shrink-0 mr-4 shadow-lg">
        <div>
          <p class="font-extrabold text-lg sm:text-xl uppercase tracking-tight">P.N. "Ghost" Protocol</p>
          <time datetime="2023-10-27T10:45:00Z" class="text-sm text-neutral-700 dark:text-neutral-300 italic">LOG TIMESTAMP: 2023-10-27 10:45 ZULU</time>
          <div class="flex mt-2">
            <span class="inline-block bg-indigo-500 text-neutral-50 text-xs font-bold px-2 py-1 border border-neutral-900 dark:border-neutral-50">NURSE</span>
            <span class="inline-block bg-teal-500 text-neutral-50 text-xs font-bold px-2 py-1 ml-2 border border-neutral-900 dark:border-neutral-50">OBSERVER</span>
          </div>
        </div>
      </div>
      <p class="mb-4 text-md sm:text-lg leading-relaxed relative z-10">
        The patient requested an additional blanket and a glass of water at 09:30. No fever detected. Sleep patterns irregular, per monitor. Overall, stable condition, but seems a bit restless. Waiting for Dr. Mercer's follow-up.
      </p>
      <div class="flex flex-wrap gap-2 text-xs font-bold relative z-10">
        <button class="px-3 py-1 bg-gradient-to-r from-red-500 to-orange-500 dark:from-red-700 dark:to-orange-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">AGREE [001]</button>
        <button class="px-3 py-1 bg-gradient-to-r from-green-500 to-lime-500 dark:from-green-700 dark:to-lime-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">DISAGREE [000]</button>
        <button class="px-3 py-1 bg-gradient-to-r from-blue-500 to-purple-500 dark:from-blue-700 dark:to-purple-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">REPORT [ERROR]</button>
      </div>
      <!-- Overlay Glitch -->
      <div class="absolute inset-0 bg-gradient-to-bl from-green-500 to-blue-500 mix-blend-overlay opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    </article>

    <!-- Comment 3 (Anonymous) -->
    <article class="p-6 sm:p-8 
                    border-4 border-neutral-900 dark:border-neutral-50 
                    bg-gradient-to-tr from-green-200 to-lime-300 opacity-90 
                    dark:from-green-800 dark:to-lime-900 dark:opacity-90 
                    shadow-[5px_5px_0_0_rgba(0,0,0,1)] dark:shadow-[5px_5px_0_0_rgba(255,255,255,1)] 
                    relative overflow-hidden group">
      <div class="absolute top-0 right-0 p-2 text-xs font-bold bg-neutral-900 dark:bg-neutral-50 text-neutral-50 dark:text-neutral-900 border-l-2 border-b-2 border-neutral-50 dark:border-neutral-900 shadow-[-2px_2px_0_0_rgba(0,0,0,0.5)] dark:shadow-[-2px_2px_0_0_rgba(255,255,255,0.5)]">STATUS: ANONYMOUS</div>

      <div class="flex items-start mb-4 relative z-10">
        <img src="https://picsum.photos/id/66/100/100" alt="Placeholder Avatar" class="w-16 h-16 sm:w-20 sm:h-20 border-4 border-neutral-900 dark:border-neutral-50 object-cover flex-shrink-0 mr-4 filter grayscale hue-rotate-180 brightness-50 dark:brightness-150 shadow-lg">
        <div>
          <p class="font-extrabold text-lg sm:text-xl uppercase tracking-tight">[DATA CORRUPTED / ANONYMOUS]</p>
          <time datetime="2023-10-27T10:55:00Z" class="text-sm text-neutral-700 dark:text-neutral-300 italic">LOG TIMESTAMP: 2023-10-27 10:55 ZULU</time>
          <div class="flex mt-2">
            <span class="inline-block bg-purple-500 text-neutral-50 text-xs font-bold px-2 py-1 border border-neutral-900 dark:border-neutral-50">GUEST</span>
            <span class="inline-block bg-teal-500 text-neutral-50 text-xs font-bold px-2 py-1 ml-2 border border-neutral-900 dark:border-neutral-50">UNIDENTIFIED</span>
          </div>
        </div>
      </div>
      <p class="mb-4 text-md sm:text-lg leading-relaxed relative z-10">
        The ventilation system in Sector Gamma-7 is emitting a low-frequency hum. It's disruptive. Also, why are the lights flickering in the containment unit? Investigation recommended before structural integrity is compromised. This is not a drill.
      </p>
      <div class="flex flex-wrap gap-2 text-xs font-bold relative z-10">
        <button class="px-3 py-1 bg-gradient-to-r from-red-500 to-orange-500 dark:from-red-700 dark:to-orange-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">AGREE [001]</button>
        <button class="px-3 py-1 bg-gradient-to-r from-green-500 to-lime-500 dark:from-green-700 dark:to-lime-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">DISAGREE [000]</button>
        <button class="px-3 py-1 bg-gradient-to-r from-blue-500 to-purple-500 dark:from-blue-700 dark:to-purple-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">REPORT [ERROR]</button>
      </div>
      <!-- Overlay Glitch -->
      <div class="absolute inset-0 bg-gradient-to-tr from-cyan-500 to-fuchsia-500 mix-blend-overlay opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    </article>

  </div>

  <!-- Brutalist Footer -->
  <div class="mt-12 md:mt-16 p-4 sm:p-6 md:p-8 border-4 border-neutral-900 dark:border-neutral-50 
              bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 
              dark:from-red-700 dark:via-yellow-700 dark:to-green-700 
              shadow-[8px_8px_0_0_rgba(0,0,0,1)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,1)] 
              relative overflow-hidden group">
    <p class="text-sm sm:text-base md:text-lg font-bold text-neutral-900 dark:text-neutral-50 relative z-10 text-center uppercase">
      // END OF LOG. SYSTEM INTEGRITY: COMPROMISED //
    </p>
    <div class="absolute inset-0 bg-gradient-to-l from-orange-500 via-pink-500 to-purple-500 dark:from-orange-700 dark:via-pink-700 dark:to-purple-700 mix-blend-multiply opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
  </div>

</section>

CyberpunkCommentsSection

A simple, responsive comments section component with a cyberpunk, futuristic neon aesthetic and a rainbow gradient color scheme, suitable for travel/tourism websites. Includes dark mode support.

Open Preview

                <section class="py-8 px-4 bg-gray-900 dark:bg-black text-white font-mono">
  <div class="max-w-xl mx-auto">
    <h2 class="text-2xl md:text-3xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-red-500 via-yellow-400 to-green-500 dark:from-red-300 dark:via-yellow-200 dark:to-green-300">
      Traveler Echoes
    </h2>

    <div class="mb-6 p-4 rounded-xl border border-gray-700 dark:border-gray-800 shadow-lg bg-gray-800 dark:bg-gray-950">
      <div class="flex items-center mb-3">
        <img class="w-10 h-10 rounded-full mr-3 border-2 border-fuchsia-500 dark:border-cyan-400 object-cover" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
        <div>
          <h4 class="font-semibold text-aqua-400 dark:text-lime-300">Aisha_Voyager</h4>
          <p class="text-xs text-gray-400 dark:text-gray-500">2 days ago</p>
        </div>
      </div>
      <p class="text-gray-200 dark:text-gray-300 leading-relaxed">
        "The neon-lit streets of Neo-Kyoto were an absolute dream! Navigating the floating sky-trams with the city's hum was an experience beyond words. Highly recommend for any adventurer seeking a true urban spectacle."
      </p>
    </div>

    <div class="mb-6 p-4 rounded-xl border border-gray-700 dark:border-gray-800 shadow-lg bg-gray-800 dark:bg-gray-950">
      <div class="flex items-center mb-3">
        <img class="w-10 h-10 rounded-full mr-3 border-2 border-green-500 dark:border-yellow-400 object-cover" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
        <div>
          <h4 class="font-semibold text-blue-400 dark:text-purple-300">Synth_Nomad</h4>
          <p class="text-xs text-gray-400 dark:text-gray-500">4 days ago</p>
        </div>
      </div>
      <p class="text-gray-200 dark:text-gray-300 leading-relaxed">
        "Just completed the 'Andromeda Nebula' virtual reality tour. The hyper-accurate simulations of the exoplanets were breathtaking. It felt incredibly real, almost like I was truly there. A must-do for space enthusiasts!"
      </p>
    </div>

    <div class="mb-6 p-4 rounded-xl border border-gray-700 dark:border-gray-800 shadow-lg bg-gray-800 dark:bg-gray-950">
      <div class="flex items-center mb-3">
        <img class="w-10 h-10 rounded-full mr-3 border-2 border-yellow-400 dark:border-red-400 object-cover" src="https://randomuser.me/api/portraits/women/33.jpg" alt="User Avatar">
        <div>
          <h4 class="font-semibold text-pink-400 dark:text-orange-300">Glitch_Queen</h4>
          <p class="text-xs text-gray-400 dark:text-gray-500">1 week ago</p>
        </div>
      </div>
      <p class="text-gray-200 dark:text-gray-300 leading-relaxed">
        "The 'Digital Sahara' desert trek was surprisingly intense, even through a haptic suit. The bioluminescent cacti at night were mesmerizing. Pack plenty of virtual hydration, you'll need it!"
      </p>
    </div>

    <div class="mt-8">
      <h3 class="text-xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-red-500 via-yellow-400 to-green-500 dark:from-red-300 dark:via-yellow-200 dark:to-green-300">
        Leave Your Echo
      </h3>
      <textarea class="w-full p-3 mb-4 rounded-lg bg-gray-800 dark:bg-gray-950 border border-gray-700 dark:border-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-blue-400 placeholder-gray-500 dark:placeholder-gray-600 resize-none" rows="4" placeholder="Share your travel experiences..."></textarea>
      <button class="w-full md:w-auto px-6 py-3 rounded-lg font-bold text-white shadow-lg 
                      bg-gradient-to-r from-purple-600 via-pink-500 to-red-500 
                      hover:from-purple-700 hover:via-pink-600 hover:to-red-600 
                      focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 
                      dark:from-blue-600 dark:via-cyan-500 dark:to-green-500 
                      dark:hover:from-blue-700 dark:hover:via-cyan-600 dark:hover:to-green-600 
                      dark:focus:ring-blue-400 dark:focus:ring-offset-gray-900">
        Submit Echo
      </button>
    </div>
  </div>
</section>

Comments Section Component

A complex and engaging 3D-inspired comments section component for food/restaurant websites, featuring cool neutrals, full responsiveness, and dark mode support.

Open Preview

                <section class="bg-gray-100 dark:bg-gray-900 py-12 sm:py-16 lg:py-20 font-sans">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center mb-12 sm:mb-16 dark:text-gray-100 leading-tight tracking-tight cool-neutral-text-gradient ">
      What Our <span class="relative inline-block">
        <span class="block absolute -inset-1 -skew-y-3 bg-red-500 dark:bg-red-700 rounded-lg"></span>
        <span class="relative text-white dark:text-gray-900 drop-shadow-lg">Customers</span>
      </span> Say
    </h2>

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

      <!-- Comment Card 1 -->
      <div class="relative p-6 sm:p-8 bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden hover:scale-105 transition-transform duration-300 ease-in-out 
                  transform rotate-x-6 rotate-y-3 skew-x-2 skew-y-1 perspective-1000 
                  dark:hover:shadow-red-500/30 
                  after:absolute after:inset-y-0 after:left-0 after:w-1 after:bg-red-500 after:rounded-l-lg
                  before:absolute before:inset-x-0 before:top-0 before:h-1 before:bg-red-400 before:rounded-t-lg
                  group">
        <div class="absolute inset-0 bg-gradient-to-br from-red-50 to-orange-50 dark:from-gray-900 dark:to-gray-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-3xl z-0"></div>
        <div class="relative z-10 flex flex-col h-full">
          <div class="flex items-center mb-4">
            <img class="w-14 h-14 rounded-full border-4 border-red-300 dark:border-red-600 shadow-lg" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Customer Avatar">
            <div class="ml-4">
              <p class="text-xl font-semibold text-gray-900 dark:text-gray-100">Alice Johnson</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Food Critic</p>
            </div>
          </div>
          <div class="flex items-center mb-4">
            <svg class="w-5 h-5 text-yellow-400" fill="currentColor" 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.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
            </svg>
            <svg class="w-5 h-5 text-yellow-400" fill="currentColor" 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.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
            </svg>
            <svg class="w-5 h-5 text-yellow-400" fill="currentColor" 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.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
            </svg>
            <svg class="w-5 h-5 text-yellow-400" fill="currentColor" 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.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
            </svg>
            <svg class="w-5 h-5 text-gray-300 dark:text-gray-600" fill="currentColor" 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.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
            </svg>
          </div>
          <p class="text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-6 flex-grow">
            "Absolutely blown away by the quality and flavor! The delivery was super fast, and the food arrived hot and fresh. This is my new go-to for online orders. Highly recommend the chef's special!"
          </p>
          <div class="flex justify-end mt-auto">
            <a href="#" class="inline-flex items-center text-red-600 dark:text-red-400 font-semibold hover:underline">
              Read More
              <svg class="ml-1 w-4 h-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 8l4 4m0 0l-4 4m4-4H3"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Comment Card 2 -->
      <div class="relative p-6 sm:p-8 bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden hover:scale-105 transition-transform duration-300 ease-in-out 
                  transform rotate-x-6 rotate-y-3 skew-x-2 skew-y-1 perspective-1000 
                  dark:hover:shadow-blue-500/30 
                  after:absolute after:inset-y-0 after:left-0 after:w-1 after:bg-blue-500 after:rounded-l-lg
                  before:absolute before:inset-x-0 before:top-0 before:h-1 before:bg-blue-400 before:rounded-t-lg
                  group">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-50 to-cyan-50 dark:from-gray-900 dark:to-gray-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-3xl z-0"></div>
        <div class="relative z-10 flex flex-col h-full">
          <div class="flex items-center mb-4">
            <img class="w-14 h-14 rounded-full border-4 border-blue-300 dark:border-blue-600 shadow-lg" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer Avatar">
            <div class="ml-4">
              <p class="text-xl font-semibold text-gray-900 dark:text-gray-100">Mark Smith</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Food Blogger</p>
            </div>
          </div>
          <div class="flex items-center mb-4">
            <svg class="w-5 h-5 text-yellow-400" fill="currentColor" 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.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
            </svg>
            <svg class="w-5 h-5 text-yellow-400" fill="currentColor" 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.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
            </svg>
            <svg class="w-5 h-5 text-yellow-400" fill="currentColor" 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.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
            </svg>
            <svg class="w-5 h-5 text-yellow-400" fill="currentColor" 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.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
            </svg>
            <svg class="w-5 h-5 text-blue-300 dark:text-blue-600" fill="currentColor" 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.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
            </svg>
          </div>
          <p class="text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-6 flex-grow">
            "This place truly understands flavor! Every dish I've tried has been exceptional, beautifully presented, and perfectly portioned. The online ordering system is a breeze. A definite culinary delight."
          </p>
          <div class="flex justify-end mt-auto">
            <a href="#" class="inline-flex items-center text-blue-600 dark:text-blue-400 font-semibold hover:underline">
              Read More
              <svg class="ml-1 w-4 h-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 8l4 4m0 0l-4 4m4-4H3"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Comment Card 3 -->
      <div class="relative p-6 sm:p-8 bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden hover:scale-105 transition-transform duration-300 ease-in-out 
                  transform rotate-x-6 rotate-y-3 skew-x-2 skew-y-1 perspective-1000 
                  dark:hover:shadow-green-500/30 
                  after:absolute after:inset-y-0 after:left-0 after:w-1 after:bg-green-500 after:rounded-l-lg
                  before:absolute before:inset-x-0 before:top-0 before:h-1 before:bg-green-400 before:rounded-t-lg
                  group">
        <div class="absolute inset-0 bg-gradient-to-br from-green-50 to-lime-50 dark:from-gray-900 dark:to-gray-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-3xl z-0"></div>
        <div class="relative z-10 flex flex-col h-full">
          <div class="flex items-center mb-4">
            <img class="w-14 h-14 rounded-full border-4 border-green-300 dark:border-green-600 shadow-lg" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Customer Avatar">
            <div class="ml-4">
              <p class="text-xl font-semibold text-gray-900 dark:text-gray-100">Sophia Lee</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Food Enthusiast</p>
            </div>
          </div>
          <div class="flex items-center mb-4">
            <svg class="w-5 h-5 text-yellow-400" fill="currentColor" 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.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
            </svg>
            <svg class="w-5 h-5 text-yellow-400" fill="currentColor" 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.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
            </svg>
            <svg class="w-5 h-5 text-yellow-400" fill="currentColor" 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.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
            </svg>
            <svg class="w-5 h-5 text-gray-300 dark:text-gray-600" fill="currentColor" 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.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
            </svg>
            <svg class="w-5 h-5 text-gray-300 dark:text-gray-600" fill="currentColor" 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.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
            </svg>
          </div>
          <p class="text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-6 flex-grow">
            "I'm a regular here, and for good reason! The consistency of quality is impressive, and the customer service is outstanding. They always go the extra mile. Keep up the fantastic work!"
          </p>
          <div class="flex justify-end mt-auto">
            <a href="#" class="inline-flex items-center text-green-600 dark:text-green-400 font-semibold hover:underline">
              Read More
              <svg class="ml-1 w-4 h-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 8l4 4m0 0l-4 4m4-4H3"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>

    </div>

    <!-- Call to action for more reviews -->
    <div class="mt-16 text-center">
      <a href="#" class="inline-flex items-center px-8 py-4 border border-transparent text-lg font-bold rounded-full shadow-lg 
              bg-gradient-to-r from-red-500 to-orange-500 text-white 
              hover:from-red-600 hover:to-orange-600 
              dark:from-red-600 dark:to-orange-600 
              dark:hover:from-red-700 dark:hover:to-orange-700 
              transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 
              focus:outline-none focus:ring-4 focus:ring-red-400 dark:focus:ring-red-700 focus:ring-opacity-75
              cool-neutral-button-shadow">
        View All Reviews
        <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="M13 7l5 5m0 0l-5 5m5-5H6"></path>
        </svg>
      </a>
    </div>

  </div>
</section>

<style>
  /* This CSS is typically handled by a global stylesheet or a build process */
  .cool-neutral-text-gradient {
    background-image: linear-gradient(to right, #4A5568, #2D3748);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
  }

  html.dark .cool-neutral-text-gradient {
    background-image: linear-gradient(to right, #CBD5E0, #F7FAFC);
  }

  .perspective-1000 {
    perspective: 1000px;
  }

  /* Custom 3D transformations for cards */
  .transform {
    transform-style: preserve-3d;
  }

  .cool-neutral-button-shadow {
    box-shadow: 0 10px 20px rgba(239, 68, 68, 0.2), 0 6px 6px rgba(239, 68, 68, 0.2);
  }

  html.dark .cool-neutral-button-shadow {
    box-shadow: 0 10px 20px rgba(185, 28, 28, 0.4), 0 6px 6px rgba(185, 28, 28, 0.4);
  }
</style>

Search Components

Categories

Comments Section