CCHub Logo CCHub Tailwind Collection
Komponenten Kommentarbereich Kommentarbereich

Kommentarbereich

Kommentarbereich Komponente mit Materialdesign unter Verwendung eines triadischen Farbschemas für Geschäfts-/Unternehmenszwecke. Responsives Design mit Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<div class="container mx-auto p-4">
  <div class="dark:bg-gray-800 bg-white rounded-lg shadow-md p-6 mb-4">
    <h2 class="text-2xl font-bold dark:text-white text-gray-800 mb-4">Comments</h2>

    <!-- Comment 1 -->
    <div class="flex items-start space-x-4 mb-6">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
      <div class="flex-1">
        <div class="dark:bg-gray-700 bg-gray-100 rounded-lg p-3">
          <p class="font-semibold dark:text-white text-gray-800">John Doe</p>
          <p class="dark:text-gray-300 text-gray-700">This is a great article! Very insightful.</p>
        </div>
        <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
          <span>2 hours ago</span>
          <span class="ml-4 cursor-pointer hover:underline">Reply</span>
        </div>
      </div>
    </div>

    <!-- Comment 2 -->
    <div class="flex items-start space-x-4 mb-6">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
      <div class="flex-1">
        <div class="dark:bg-gray-700 bg-gray-100 rounded-lg p-3">
          <p class="font-semibold dark:text-white text-gray-800">Jane Smith</p>
          <p class="dark:text-gray-300 text-gray-700">I agree, the points are well-explained.</p>
        </div>
        <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
          <span>1 hour ago</span>
          <span class="ml-4 cursor-pointer hover:underline">Reply</span>
        </div>
      </div>
    </div>

    <!-- Add New Comment Area -->
    <div class="mt-6">
      <textarea class="w-full p-3 rounded-lg border dark:bg-gray-700 dark:border-gray-600 dark:text-white text-gray-800 dark:placeholder-gray-400 placeholder-gray-500 focus:outline-none focus:ring focus:border-blue-300" rows="4" placeholder="Add a comment..."></textarea>
      <button class="mt-3 px-6 py-2 dark:bg-blue-600 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-600 focus:outline-none focus:ring dark:focus:ring-blue-800 focus:ring-blue-300">Post Comment</button>
    </div>
  </div>
</div>

Verwandte Komponenten

Komponente im Bereich "Kommentare"

Eine minimalistische Komponente im Kommentarbereich, die mit Tailwind CSS entwickelt wurde und klare Linien, reaktionsschnelle Effekte und Unterstützung für den Dunkelmodus bietet. Es enthält Benutzer-Avatare, Kommentartext, Zeitstempel und einen einfachen Eingabebereich für neue Kommentare.

Offen

Industrial_Purple_Comments_Section

Eine komplexe, reaktionsschnelle Komponente für den Kommentarbereich mit einer Industriedesign-Ästhetik und einem lila/violetten Farbschema, geeignet für Blogs oder den Konsum von Inhalten. Verfügt über freiliegende Elemente, rohes Materialgefühl und Unterstützung für den Dunkelmodus.

Offen

Cyberpunk Herbst Kommentarbereich

Ein einfacher Kommentarbereich zum Thema Cyberpunk für ein Dashboard mit dunklem Hintergrund, neonartigen Akzenten und satten Herbstfarben. Vollständig reaktionsschnell mit Unterstützung des Dunkelmodus.

Offen