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

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.

Vorschau

HTML-Code 

<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Comments</h2>
    <div class="max-h-96 overflow-y-auto">
        <div class="flex items-start mb-4">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
            <div class="flex-1">
                <div class="bg-gray-100 dark:bg-gray-700 p-3 rounded-lg">
                    <p class="text-gray-800 dark:text-gray-200">This is a comment from a user. It has a minimalist style.</p>
                </div>
                <p class="text-gray-500 dark:text-gray-400 text-sm mt-1">2 hours ago</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" />
            <div class="flex-1">
                <div class="bg-gray-100 dark:bg-gray-700 p-3 rounded-lg">
                    <p class="text-gray-800 dark:text-gray-200">Another comment from a different user. This design is very clean.</p>
                </div>
                <p class="text-gray-500 dark:text-gray-400 text-sm mt-1">3 hours ago</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" />
            <div class="flex-1">
                <div class="bg-gray-100 dark:bg-gray-700 p-3 rounded-lg">
                    <p class="text-gray-800 dark:text-gray-200">I really like this minimalist approach!</p>
                </div>
                <p class="text-gray-500 dark:text-gray-400 text-sm mt-1">5 hours ago</p>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <textarea class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-blue-300 dark:focus:ring-blue-600 resize-none" rows="3" placeholder="Add a comment..."></textarea>
        <button class="mt-2 bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg focus:outline-none focus:ring focus:ring-blue-300 dark:focus:ring-blue-600">Post Comment</button>
    </div>
</div>

Verwandte Komponenten

Brutalismus Kommentarbereich

Eine Komponente für den Kommentarbereich im brutalistischen Stil für Portfolios mit analogen Farben, moderater Komplexität, Reaktionsfähigkeit und Unterstützung für den Dunkelmodus.

Offen

Neon_Glow_Comments_Section

Eine reaktionsschnelle Komponente für den Kommentarbereich mit einer lebendigen Neon-/Leuchtästhetik mit Benutzer-Avataren, Zeitstempeln und einer Antwortschaltfläche. Unterstützt den Dunkelmodus und ist für Social-Media-Schnittstellen konzipiert.

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