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

Komponente im Bereich "Kommentare"

Eine responsive Komponente im Kommentarbereich, die im Glassmorphism-Design gestaltet ist, mit mattglasähnlichen, durchscheinenden Elementen mit Unschärfeeffekten und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS.

Vorschau

HTML-Code 

<div class="bg-white bg-opacity-30 backdrop-blur-lg rounded-lg shadow-lg p-6 max-w-lg mx-auto mt-8 dark:bg-gray-800 dark:bg-opacity-30">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Comments</h2>
    <div class="mt-4">
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-1">
                <div class="flex justify-between items-center">
                    <h3 class="text-md font-medium text-gray-800 dark:text-gray-200">John Doe</h3>
                    <span class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</span>
                </div>
                <p class="mt-1 text-gray-600 dark:text-gray-300">This is an amazing post! Thanks for sharing!</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-1">
                <div class="flex justify-between items-center">
                    <h3 class="text-md font-medium text-gray-800 dark:text-gray-200">Jane Smith</h3>
                    <span class="text-sm text-gray-500 dark:text-gray-400">4 hours ago</span>
                </div>
                <p class="mt-1 text-gray-600 dark:text-gray-300">I really enjoyed reading this. Great insights!</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-1">
                <div class="flex justify-between items-center">
                    <h3 class="text-md font-medium text-gray-800 dark:text-gray-200">Michael Brown</h3>
                    <span class="text-sm text-gray-500 dark:text-gray-400">1 day ago</span>
                </div>
                <p class="mt-1 text-gray-600 dark:text-gray-300">Very well written! I appreciate the effort.</p>
            </div>
        </div>
    </div>
    <form class="mt-6">
        <textarea class="w-full p-2 border border-gray-300 rounded-lg dark:border-gray-700 dark:bg-gray-800 dark:text-white" rows="3" placeholder="Add a comment..."></textarea>
        <button type="submit" class="mt-2 bg-blue-500 hover:bg-blue-600 rounded-lg text-white py-2 px-4">Submit</button>
    </form>
</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"

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.

Offen

Neumorphic_Neon_Comments_Section

Eine neumorphe Komponente des Kommentarbereichs mit einem Neon-/Elektro-Farbschema, das für Unterhaltungs-/Medienplattformen entwickelt wurde. Verfügt über ein ansprechendes Layout, Unterstützung für den Dunkelmodus und interaktive Elemente. Jeder Kommentar zeigt einen Avatar, einen Benutzernamen, einen Zeitstempel und einen Kommentartext mit den Schaltflächen "Gefällt mir" und "Antworten" an.

Offen