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
Il s’agit d’un composant simple du forum communautaire avec une palette de couleurs pastel, des influences Material Design et la prise en charge du mode sombre. Dispose d’une mise en page réactive pour la consommation de blog/contenu.
Volet Forum communautaire
Un composant de forum communautaire conçu dans le style brutalisme avec une palette de couleurs vives, adapté aux expériences de commerce électronique. Il comprend une variété d’éléments interactifs tels que des publications, des commentaires et des profils d’utilisateurs, tous stylisés avec Tailwind CSS pour un design réactif avec prise en charge du thème sombre.
Forum communautaire Composante 9
Un composant du forum communautaire doté d’un design de morphisme en verre avec des éléments translucides semblables à du verre givré, des effets réactifs et la prise en charge du thème sombre.