Komponenten Kommentarbereich Komponente im Bereich "Kommentare"

Komponente im Bereich "Kommentare"

Komponente für den Kommentarbereich mit Skeuomorphismus-Design, triadischem Farbschema, komplexen Interaktionen, Social-Media-Zweck, responsiver und dunkler Themenunterstützung.

Vorschau

HTML-Code

<div
  class="container mx-auto p-4 dark:bg-gray-900 dark:text-white"
>
  <h2 class="text-2xl font-bold mb-4 dark:text-white">Comments</h2>

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

  <div class="space-y-4">
    <div
      class="bg-white p-4 rounded shadow-lg dark:bg-gray-800 dark:text-white"
    >
      <div class="flex items-center mb-2">
        <img
          class="w-10 h-10 rounded-full mr-4 shadow-md"
          src="https://randomuser.me/api/portraits/men/32.jpg"
          alt="User Avatar"
        />
        <div>
          <h4 class="font-bold dark:text-white">John Doe</h4>
          <p class="text-gray-500 text-sm dark:text-gray-400">2 hours ago</p>
        </div>
      </div>
      <p class="dark:text-white">
        This is a great comment! It provides valuable insights.
      </p>
      <div class="flex items-center mt-4 space-x-4">
        <button
          class="flex items-center text-gray-600 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-500"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5 mr-1"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M18 13v5a2 2 0 01-2 2H4a2 2 0 01-2-2v-5a2 2 0 012-2h3.586l1.414 1.414a.996.996 0 001.414 0L10.414 11H14a2 2 0 012 2h2zM5 9.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"
              clip-rule="evenodd"
            ></path>
          </svg>
          Like
        </button>
        <button
          class="flex items-center text-gray-600 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-500"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5 mr-1"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M5 2a2 2 0 00-2 2v14l3.5-2 3.5 2 3.5-2 3.5 2V4a2 2 0 00-2-2H5z"
              clip-rule="evenodd"
            ></path>
          </svg>
          Reply
        </button>
      </div>
    </div>

    <div
      class="bg-white p-4 rounded shadow-lg dark:bg-gray-800 dark:text-white"
    >
      <div class="flex items-center mb-2">
        <img
          class="w-10 h-10 rounded-full mr-4 shadow-md"
          src="https://randomuser.me/api/portraits/women/44.jpg"
          alt="User Avatar"
        />
        <div>
          <h4 class="font-bold dark:text-white">Jane Smith</h4>
          <p class="text-gray-500 text-sm dark:text-gray-400">1 hour ago</p>
        </div>
      </div>
      <p class="dark:text-white">
        I agree with the previous comment. This is very helpful.
      </p>
      <div class="flex items-center mt-4 space-x-4">
        <button
          class="flex items-center text-gray-600 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-500"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5 mr-1"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M18 13v5a2 2 0 01-2 2H4a2 2 0 01-2-2v-5a2 2 0 012-2h3.586l1.414 1.414a.996.996 0 001.414 0L10.414 11H14a2 2 0 012 2h2zM5 9.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"
              clip-rule="evenodd"
            ></path>
          </svg>
          Like
        </button>
        <button
          class="flex items-center text-gray-600 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-500"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5 mr-1"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M5 2a2 2 0 00-2 2v14l3.5-2 3.5 2 3.5-2 3.5 2V4a2 2 0 00-2-2H5z"
              clip-rule="evenodd"
            ></path>
          </svg>
          Reply
        </button>
      </div>
    </div>
  </div>
</div>

Verwandte Komponenten

Brutalism_Rainbow_Medical_Comments_Section

Eine komplexe, brutalistisch inspirierte Kommentarbereichskomponente für Anwendungen im Gesundheitswesen/Medizin mit einem lebendigen Regenbogen-Farbschema und voller Reaktionsfähigkeit mit Unterstützung des Dunkelmodus.

Offen

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

Komponente im Bereich "Kommentare"

Ein mit Skeuomorphismus gestalteter Kommentarbereich mit Erdtönen und Unterstützung für dunkle Themen, der auf E-Commerce-Websites zugeschnitten ist.

Offen