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.
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 community
Un componente del forum della community con uno stile di design retrò/vintage, con effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.
Componente del forum della community
Un semplice componente del forum della comunità con una combinazione di colori pastello, influenze del Material Design e supporto per la modalità scura. Dispone di un layout reattivo per il consumo di blog/contenuti.
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.