Componenti Forum della comunità Componente del forum della community

Componente del forum della community

Un componente minimalista del forum della community per l'e-commerce, caratterizzato da un design pulito, combinazione di colori triadici e supporto per la modalità scura.

Anteprima

Codice HTML

<div class="max-w-5xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <!-- Forum Header -->
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Community Forum</h2>
    <p class="text-gray-600 dark:text-gray-300 mb-6">Join the conversation about your favorite products!</p>

    <!-- Post List -->
    <div class="space-y-4">
        <div class="flex items-start bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
            <div>
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h3>
                <p class="text-gray-600 dark:text-gray-300">What is the best camera for beginners?</p>
                <div class="text-sm text-gray-500 dark:text-gray-400">12 Replies | 2 Days Ago</div>
            </div>
        </div>

        <div class="flex items-start bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
            <div>
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Jane Smith</h3>
                <p class="text-gray-600 dark:text-gray-300">Can anyone recommend a good laptop?</p>
                <div class="text-sm text-gray-500 dark:text-gray-400">8 Replies | 3 Days Ago</div>
            </div>
        </div>

        <div class="flex items-start bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
            <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
            <div>
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Michael Johnson</h3>
                <p class="text-gray-600 dark:text-gray-300">Best headphones under $100?</p>
                <div class="text-sm text-gray-500 dark:text-gray-400">5 Replies | 1 Week Ago</div>
            </div>
        </div>
    </div>

    <!-- Post Input -->
    <div class="mt-6">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Start a New Discussion</h4>
        <textarea class="w-full p-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-lg focus:outline-none focus:ring focus:ring-blue-400 dark:focus:ring-blue-500" rows="4" placeholder="Write your message..."></textarea>
        <button class="mt-2 px-6 py-2 bg-blue-500 text-white rounded-lg shadow hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Post</button>
    </div>
</div>

Componenti correlati

Componente del forum della comunità brutalista

Un componente del forum della comunità in stile brutalista per le interfacce dei social media con colori vivaci, complessità moderata e supporto per la modalità oscura. Presenta un elenco di post del forum con tipografia audace, elementi ad alto contrasto e layout asimmetrici tipici del design brutalista. Include elementi di pubblicazione con avatar utente, pulsanti di interazione e un'estetica grezza e intenzionalmente grezza con accenti di colore vivaci.

Aperto