Componente del forum della community
Un componente semplice e brutalista del forum della comunità in scala di grigi per i social media, con design reattivo e supporto per la modalità oscura.
Codice HTML
<div class="bg-white dark:bg-black text-black dark:text-white min-h-screen p-4">
<div class="container mx-auto">
<h1 class="text-2xl font-bold mb-4 text-center">Community Forum</h1>
<div class="space-y-4">
<!-- Forum Post -->
<div class="border border-black dark:border-white p-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2 border border-black dark:border-white">
<p class="font-bold">User One</p>
</div>
<p class="mb-2">This is a sample forum post content.</p>
<div class="flex justify-between text-sm text-gray-600 dark:text-gray-400">
<span>Posted on: 2023-10-27</span>
<span>Replies: 5</span>
</div>
</div>
<!-- Forum Post -->
<div class="border border-black dark:border-white p-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2 border border-black dark:border-white">
<p class="font-bold">User Two</p>
</div>
<p class="mb-2">Another example forum post here.</p>
<div class="flex justify-between text-sm text-gray-600 dark:text-gray-400">
<span>Posted on: 2023-10-27</span>
<span>Replies: 10</span>
</div>
</div>
<!-- Forum Post -->
<div class="border border-black dark:border-white p-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2 border border-black dark:border-white">
<p class="font-bold">User Three</p>
</div>
<p class="mb-2">Yet another example forum post to fill the space.</p>
<div class="flex justify-between text-sm text-gray-600 dark:text-gray-400">
<span>Posted on: 2023-10-27</span>
<span>Replies: 2</span>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Componente del forum della community
Un componente del forum della comunità in stile neumorfismo con avatar, thread e un tema scuro.
Componente del forum della community
Un componente del forum della community reattivo progettato con i principi del Material Design, adatto per il consumo di blog e contenuti. Presenta un layout a griglia, elementi interattivi e supporta temi scuri utilizzando Tailwind CSS.
Componente del forum della community
Un componente reattivo del forum della comunità progettato in stile Glassmorphism con toni della Terra, adatto per le piattaforme di social media. Presenta un effetto vetro smerigliato ed è compatibile con la modalità scura.