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

Komponente im Bereich "Kommentare"

Eine einfache Komponente im Kommentarbereich, die im Material Design-Stil gestaltet wurde, ein monochromatisches Farbschema verwendet, optimiert für Social-Media-Schnittstellen und responsives Design mit Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<div class="max-w-2xl mx-auto p-4 dark:bg-gray-800 bg-white rounded-lg shadow-md">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Comments</h2>
    <div class="mt-4 space-y-4">
        <!-- Comment 1 -->
        <div class="flex items-start space-x-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <div class="flex-1">
                <p class="text-gray-800 dark:text-gray-200 font-medium">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">This is a comment. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <span class="text-gray-500 dark:text-gray-500 text-sm">2 hours ago</span>
            </div>
        </div>
        <!-- Comment 2 -->
        <div class="flex items-start space-x-4">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <div class="flex-1">
                <p class="text-gray-800 dark:text-gray-200 font-medium">Jane Smith</p>
                <p class="text-gray-600 dark:text-gray-400">Another comment! Vivamus sit amet nulla nec urna maximus suscipit.</p>
                <span class="text-gray-500 dark:text-gray-500 text-sm">3 hours ago</span>
            </div>
        </div>
        <!-- Comment 3 -->
        <div class="flex items-start space-x-4">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <div class="flex-1">
                <p class="text-gray-800 dark:text-gray-200 font-medium">Alice Brown</p>
                <p class="text-gray-600 dark:text-gray-400">This is another comment. Donec eget tristique eros, ac auctor orci.</p>
                <span class="text-gray-500 dark:text-gray-500 text-sm">5 hours ago</span>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <textarea placeholder="Add a comment..." class="w-full dark:bg-gray-700 bg-gray-100 border border-gray-300 dark:border-gray-600 rounded-md p-2" rows="3"></textarea>
        <button class="mt-2 w-full bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 text-white font-semibold py-2 rounded-md">Post Comment</button>
    </div>
</div>

Verwandte Komponenten

KommentareSektion

Eine reaktionsschnelle, mit dunklen Themen kompatible Kommentarbereichskomponente für den E-Commerce mit minimalistischem/flachem Design, triadischem Farbschema und komplexen Interaktionselementen, die mit Tailwind CSS erstellt wurde. Verwendet picsum.photos und randomuser.me für Demobilder.

Offen

Komponente im Bereich "Kommentare"

Komponente im Kommentarbereich mit Mikrointeraktionen, Pastellfarbschema, mäßige Komplexität für das Dashboard, reaktionsschnell mit Unterstützung für dunkle Themen, unter Verwendung von Tailwind CSS. Bilder von picsum.photos für Bilder und randomuser.me für Avatare. Kein JavaScript.

Offen

Komponente im Bereich "Kommentare"

Komponente im Kommentarbereich mit monochromatischem Farbschema, Mikrointeraktionen und responsivem Design mit Unterstützung für dunkle Themen.

Offen