CCHub Logo CCHub Tailwind Collection
Komponenten Kommentarbereich Komponente im Bereich "Kommentare"

Komponente im Bereich "Kommentare"

Eine Komponente im Kommentarbereich, die in einem brutalistischen Stil mit Pastellfarben gestaltet ist, geeignet für E-Commerce-Websites, mit Benutzer-Avataren, Kommentaren und einem moderaten Maß an Interaktivität. Das Design unterstützt den Dunkelmodus.

Vorschau

HTML-Code 

<div class="max-w-4xl mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Comments Section</h2>
    <div class="border-t border-gray-300 dark:border-gray-600"></div>
    <div class="mt-6">
        <div class="flex items-start mb-4">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar">
            <div class="ml-3">
                <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
                <p class="text-sm text-gray-600 dark:text-gray-400">This product is amazing! Highly recommend it.</p>
                <p class="text-xs text-gray-500 dark:text-gray-500 mt-1">3 hours ago</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar">
            <div class="ml-3">
                <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</p>
                <p class="text-sm text-gray-600 dark:text-gray-400">I had a good experience with this purchase.</p>
                <p class="text-xs text-gray-500 dark:text-gray-500 mt-1">5 hours ago</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/thumb/men/3.jpg" alt="User Avatar">
            <div class="ml-3">
                <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Tom Brown</p>
                <p class="text-sm text-gray-600 dark:text-gray-400">Could be better; I faced some issues.</p>
                <p class="text-xs text-gray-500 dark:text-gray-500 mt-1">1 day ago</p>
            </div>
        </div>
    </div>
    <div class="border-t border-gray-300 dark:border-gray-600 mt-4 pt-4">
        <h3 class="text-lg font-bold text-gray-800 dark:text-white mb-3">Leave a Comment:</h3>
        <textarea class="w-full h-24 p-2 border border-gray-400 dark:border-gray-600 rounded-md focus:outline-none focus:ring focus:ring-green-200 dark:focus:ring-green-700" placeholder="Write your comment here..."></textarea>
        <button class="mt-2 px-4 py-2 bg-green-500 hover:bg-green-600 text-white font-semibold rounded-md dark:bg-green-600 dark:hover:bg-green-700">Submit</button>
    </div>
</div>

Verwandte Komponenten

Komponente im Bereich "Kommentare"

Eine von Glasmorphismus inspirierte Kommentarbereichskomponente für Blogs oder Inhaltsseiten mit glasglasähnlichen, durchscheinenden Elementen, leuchtenden Farben, Reaktionsfähigkeit und Unterstützung des Dunkelmodus.

Offen

Komponente im Bereich "Kommentare"

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

Offen

Komponente im Bereich "Kommentare"

Eine einfache, saubere und minimalistische Komponente für den Kommentarbereich mit einer Retro-/Vintage-Farbpalette, die für Dokumentations- oder Wiki-Seiten entwickelt wurde. Es reagiert vollständig und unterstützt den Dunkelmodus.

Offen