Volet Forum communautaire
Un composant de forum communautaire de style Neumorphisme avec des avatars, des fils de discussion et un thème sombre.
HTML Code
<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>Composants associés
Volet Forum communautaire
Un composant de forum communautaire avec un style de design rétro/vintage, avec des effets réactifs et une prise en charge des thèmes sombres à l’aide de Tailwind CSS.
Volet Forum communautaire
Un composant de forum communautaire réactif stylisé en mode sombre à l’aide de Tailwind CSS. Le composant présente un arrière-plan sombre pour réduire la fatigue oculaire et comprend des images de remplacement pour les avatars et les messages de forum.
Volet Forum communautaire
Un composant de forum communautaire simple, propre et réactif conçu avec un style de typographie suisse/international, avec un dégradé multicolore subtil et une prise en charge du mode sombre, adapté aux sites Web d’entreprise.