Componenti Forum della comunità Componente del forum della community

Componente del forum della community

Un componente del forum della comunità progettato in stile brutalismo con una combinazione di colori vivaci, adatto per esperienze di e-commerce. Include una varietà di elementi interattivi come post, commenti e profili utente, tutti disegnati con Tailwind CSS per un design reattivo con supporto per temi scuri.

Anteprima

Codice HTML

<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-red-600 dark:text-yellow-300 mb-4">Community Forum</h2>
    <div class="mb-4">
        <input type="text" placeholder="Search..." class="w-full p-2 border border-red-500 dark:border-yellow-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-600 dark:focus:ring-yellow-300" />
    </div>
    <div class="space-y-6">
        <!-- Forum Post -->
        <div class="p-4 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-100 dark:bg-gray-700">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
                <div class="ml-3">
                    <h3 class="text-lg font-semibold text-blue-600 dark:text-blue-300">John Doe</h3>
                    <span class="text-gray-500 dark:text-gray-400">Posted on 12 Oct 2023</span>
                </div>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-3">This is a sample forum post discussing the latest trends in e-commerce. Feel free to share your thoughts!</p>
            <div class="flex space-x-4">
                <button class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 dark:bg-yellow-500 dark:hover:bg-yellow-600">Comment</button>
                <button class="bg-white text-red-500 border border-red-500 px-4 py-2 rounded hover:bg-red-500 hover:text-white dark:bg-gray-800 dark:text-yellow-300 dark:border-yellow-300 dark:hover:bg-yellow-500">Like</button>
            </div>
            <div class="mt-4">
                <span class="text-gray-500 dark:text-gray-400">2 Comments</span>
            </div>
        </div>
        <!-- Repeat Forum Post as needed -->
        <div class="p-4 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-100 dark:bg-gray-700">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
                <div class="ml-3">
                    <h3 class="text-lg font-semibold text-blue-600 dark:text-blue-300">Jane Smith</h3>
                    <span class="text-gray-500 dark:text-gray-400">Posted on 10 Oct 2023</span>
                </div>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-3">Excited about the new sales coming this holiday season! Anyone else?</p>
            <div class="flex space-x-4">
                <button class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 dark:bg-yellow-500 dark:hover:bg-yellow-600">Comment</button>
                <button class="bg-white text-red-500 border border-red-500 px-4 py-2 rounded hover:bg-red-500 hover:text-white dark:bg-gray-800 dark:text-yellow-300 dark:border-yellow-300 dark:hover:bg-yellow-500">Like</button>
            </div>
            <div class="mt-4">
                <span class="text-gray-500 dark:text-gray-400">5 Comments</span>
            </div>
        </div>
    </div>
</div>

Componenti correlati

Componente del forum della comunità - Art Déco monocromatico

Un componente reattivo del forum della community progettato con un'estetica Art Déco utilizzando una combinazione di colori monocromatica, adatto per applicazioni tecnologiche/SaaS. Dispone di supporto per la modalità oscura ed elementi interattivi.

Aperto