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
Un semplice componente del forum della community che utilizza i principi del Material Design, su misura per il consumo di contenuti del blog con combinazione di colori dei toni della Terra e design reattivo per il supporto della modalità oscura.
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.
Componente del forum della community
Componente del forum della comunità con design Glassmorphism, combinazione di colori vibranti, livello di complessità complesso, per scopi di blog/contenuti, design reattivo con supporto per temi scuri, utilizzando Tailwind CSS.