Componente del forum della community
Un componente del forum della comunità in stile neumorfismo con avatar, thread e un tema scuro.
Codice HTML
<div class="bg-gray-100 dark:bg-gray-800 py-8 px-4 rounded-lg shadow-lg max-w-4xl mx-auto">
<h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Community Forum</h1>
<div class="flex flex-col space-y-4">
<div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition-shadow hover:shadow-xl">
<div class="flex items-center mb-3">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<h2 class="font-semibold text-gray-900 dark:text-white">John Doe</h2>
<span class="text-gray-500 dark:text-gray-400 text-sm ml-auto">2 hours ago</span>
</div>
<p class="text-gray-700 dark:text-gray-300">What do you think about the latest updates in our community?</p>
<div class="flex justify-between items-center mt-4">
<button class="text-blue-500 hover:underline">Reply</button>
<span class="text-gray-500 dark:text-gray-400 text-sm">10 replies</span>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition-shadow hover:shadow-xl">
<div class="flex items-center mb-3">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<h2 class="font-semibold text-gray-900 dark:text-white">Jane Smith</h2>
<span class="text-gray-500 dark:text-gray-400 text-sm ml-auto">1 hour ago</span>
</div>
<p class="text-gray-700 dark:text-gray-300">I love the new features! They really enhance the user experience.</p>
<div class="flex justify-between items-center mt-4">
<button class="text-blue-500 hover:underline">Reply</button>
<span class="text-gray-500 dark:text-gray-400 text-sm">5 replies</span>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-md transition-shadow hover:shadow-xl">
<div class="flex items-center mb-3">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<h2 class="font-semibold text-gray-900 dark:text-white">Michael Lee</h2>
<span class="text-gray-500 dark:text-gray-400 text-sm ml-auto">30 minutes ago</span>
</div>
<p class="text-gray-700 dark:text-gray-300">Can someone explain the upcoming changes in moderation?</p>
<div class="flex justify-between items-center mt-4">
<button class="text-blue-500 hover:underline">Reply</button>
<span class="text-gray-500 dark:text-gray-400 text-sm">2 replies</span>
</div>
</div>
</div>
</div>Componenti correlati
Componente del forum della community
Componente del forum della comunità con design del neumorfismo, combinazione di colori in scala di grigi e complessità semplice per i social media utilizzando Tailwind CSS. Design reattivo con supporto per temi scuri.
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 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.