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

Komponente im Bereich "Kommentare"

Eine reaktionsschnelle Kommentarbereichskomponente, die für Geschäfts-/Unternehmenswebsites entwickelt wurde und ansprechende Animationen, lebendige Farben und Unterstützung für den Dunkelmodus bietet.

Vorschau

HTML-Code 

<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition-shadow duration-300 hover:shadow-xl">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Comments</h2>
    <div class="space-y-4">
        <div class="flex items-start gap-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full"> 
            <div class="flex-1">
                <div class="bg-blue-100 dark:bg-blue-500 p-4 rounded-lg shadow-md transition-transform duration-300 transform hover:scale-105">
                    <p class="text-gray-700 dark:text-gray-200">This is a fantastic article! I learned so much.</p>
                </div>
                <span class="text-sm text-gray-500 dark:text-gray-400">- John Doe</span>
            </div>
        </div>
        <div class="flex items-start gap-4">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
            <div class="flex-1">
                <div class="bg-green-100 dark:bg-green-500 p-4 rounded-lg shadow-md transition-transform duration-300 transform hover:scale-105">
                    <p class="text-gray-700 dark:text-gray-200">Great insights! Looking forward to more posts.</p>
                </div>
                <span class="text-sm text-gray-500 dark:text-gray-400">- Jane Smith</span>
            </div>
        </div>
        <div class="flex items-start gap-4">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
            <div class="flex-1">
                <div class="bg-red-100 dark:bg-red-500 p-4 rounded-lg shadow-md transition-transform duration-300 transform hover:scale-105">
                    <p class="text-gray-700 dark:text-gray-200">I completely agree with this perspective. Well said!</p>
                </div>
                <span class="text-sm text-gray-500 dark:text-gray-400">- Tom Brown</span>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Leave a Comment:</h3>
        <textarea class="w-full p-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300 resize-none" rows="4" placeholder="Type your message here..."></textarea>
        <button class="mt-4 w-full bg-blue-500 text-white font-semibold py-2 rounded-lg transition-colors duration-300 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-500">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

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

Komponente im Bereich "Kommentare"

Eine komplexe, reaktionsschnelle Komponente für den Kommentarbereich, die für Buchungs-/Reservierungssysteme mit einem vom Bauhaus inspirierten Schwarz-Weiß-Farbschema und einer hellen Akzentfarbe entwickelt wurde. Enthält Benutzer-Avatare, Sternebewertungen, Zeitstempel und Unterstützung für den Dunkelmodus.

Offen