Komponenten Community-Forum Community-Forum-Komponente

Community-Forum-Komponente

Eine Community-Forum-Komponente im Retro-/Vintage-Designstil mit responsiven Effekten und Unterstützung für dunkle Themen mit Tailwind CSS.

Vorschau

HTML-Code

<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-4xl mx-auto">
    <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-gray-100 mb-4">Community Forum</h2>
    <div class="overflow-y-auto h-96">
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg mb-4 shadow">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <div>
                    <h3 class="font-semibold text-gray-800 dark:text-gray-100">John Doe</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Posted on January 5, 2023</p>
                </div>
            </div>
            <p class="text-gray-700 dark:text-gray-300 text-lg">What are your favorite retro games? I miss playing on my old console!</p>
            <img src="https://picsum.photos/400/200?random=1" alt="Random Image" class="mt-4 rounded-lg shadow">
        </div>
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg mb-4 shadow">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <div>
                    <h3 class="font-semibold text-gray-800 dark:text-gray-100">Jane Smith</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Posted on January 6, 2023</p>
                </div>
            </div>
            <p class="text-gray-700 dark:text-gray-300 text-lg">I loved Sonic the Hedgehog on Sega! It was the best part of my childhood.</p>
            <img src="https://picsum.photos/400/200?random=2" alt="Random Image" class="mt-4 rounded-lg shadow">
        </div>
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg mb-4 shadow">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/34.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <div>
                    <h3 class="font-semibold text-gray-800 dark:text-gray-100">Chris Johnson</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Posted on January 7, 2023</p>
                </div>
            </div>
            <p class="text-gray-700 dark:text-gray-300 text-lg">Anyone remembers playing Mario Kart? Those were legendary gaming nights!</p>
            <img src="https://picsum.photos/400/200?random=3" alt="Random Image" class="mt-4 rounded-lg shadow">
        </div>
    </div>
    <div class="mt-4">
        <textarea class="w-full p-3 border-2 border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-blue-500 dark:focus:border-blue-400 mb-2" rows="3" placeholder="Join the conversation..."></textarea>
        <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-lg">Post</button>
    </div>
</div>

Verwandte Komponenten

Community-Forum-Komponente

Eine reaktionsschnelle Community-Forum-Komponente, die im Dunkelmodus mit Tailwind CSS formatiert ist. Die Komponente verfügt über einen dunklen Hintergrund, um die Belastung der Augen zu reduzieren, und enthält Platzhalterbilder für Avatare und Forenbeiträge.

Offen

Community-Forum-Komponente

Eine reaktionsschnelle Community-Forum-Komponente, die nach Material Design-Prinzipien unter Verwendung von Tailwind CSS entwickelt wurde, mit Unterstützung für dunkle Designs und Platzhalterbildern.

Offen

Community-Forum-Komponente

Eine minimalistische Community-Forenkomponente für den E-Commerce mit einem klaren Design, einem triadischen Farbschema und Unterstützung für den Dunkelmodus.

Offen