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

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

Komponente im Bereich "Kommentare"

Eine einfache und reaktionsschnelle Komponente des Kommentarbereichs mit coolen neutralen Farben und Unterstützung des Dunkelmodus, geeignet für Foren- oder Community-Plattformen.

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