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

Komponente im Bereich "Kommentare"

Eine einfache Komponente im Kommentarbereich, die mit Retro-/Vintage-Ästhetik und Erdtönen gestaltet ist. Es verfügt über ein nostalgisches Design, das an die 80er und 90er Jahre erinnert, maßgeschneidert für Social-Media-Schnittstellen und mit Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code 

<div class="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold text-brown-800 dark:text-brown-200 mb-4">Comments</h2>
    <div class="flex mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-12 h-12 mr-4">
        <div class="flex-1">
            <input type="text" placeholder="Write a comment..." class="w-full bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100 p-2 rounded-lg shadow border border-gray-300 dark:border-gray-600 placeholder-gray-600 dark:placeholder-gray-400 focus:ring focus:ring-brown-300 dark:focus:ring-brown-500"/>
        </div>
    </div>
    <div class="border-t border-gray-300 dark:border-gray-600 pt-4">
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="rounded-full w-10 h-10 mr-3">
            <div class="bg-gray-100 dark:bg-gray-700 p-2 rounded-lg shadow">
                <p class="text-brown-800 dark:text-brown-200"><strong>Alice</strong>  <span class="text-gray-600 dark:text-gray-400">- 2 hours ago</span></p>
                <p class="text-gray-800 dark:text-gray-300">Love this post! It really brings back memories.</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="rounded-full w-10 h-10 mr-3">
            <div class="bg-gray-100 dark:bg-gray-700 p-2 rounded-lg shadow">
                <p class="text-brown-800 dark:text-brown-200"><strong>Bob</strong>  <span class="text-gray-600 dark:text-gray-400">- 4 hours ago</span></p>
                <p class="text-gray-800 dark:text-gray-300">The vintage vibe is amazing!</p>
            </div>
        </div>
    </div>
</div>

Verwandte Komponenten

CyberpunkKommentareSektion

Eine einfache, reaktionsschnelle Komponente für den Kommentarbereich mit Cyberpunk, futuristischer Neon-Ästhetik und einem Regenbogen-Farbverlaufsschema, geeignet für Reise-/Tourismus-Websites. Enthält Unterstützung für den Dunkelmodus.

Offen

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

Cyberpunk Herbst Kommentarbereich

Ein einfacher Kommentarbereich zum Thema Cyberpunk für ein Dashboard mit dunklem Hintergrund, neonartigen Akzenten und satten Herbstfarben. Vollständig reaktionsschnell mit Unterstützung des Dunkelmodus.

Offen