Volet Forum communautaire
Il s’agit d’un composant simple de forum communautaire utilisant les principes de conception matérielle, conçu pour la consommation de contenu de blog avec une palette de couleurs Earth Tones et une conception réactive pour la prise en charge du mode sombre.
HTML Code
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-4xl mx-auto mt-10">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Community Forum</h2>
<div class="mb-4">
<h3 class="text-xl font-medium text-gray-700 dark:text-gray-300">Latest Discussions</h3>
<ul class="list-disc list-inside space-y-3 mt-2">
<li class="p-4 bg-gray-100 dark:bg-gray-700 rounded-md shadow border border-gray-200 dark:border-gray-600">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User 1">
<div>
<p class="text-gray-800 dark:text-white font-bold">John Doe</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">What are your thoughts on the new features?</p>
</div>
</div>
<span class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</span>
</li>
<li class="p-4 bg-gray-100 dark:bg-gray-700 rounded-md shadow border border-gray-200 dark:border-gray-600">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/32.jpg" alt="User 2">
<div>
<p class="text-gray-800 dark:text-white font-bold">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Can someone recommend a good blog to follow?</p>
</div>
</div>
<span class="text-sm text-gray-500 dark:text-gray-400">3 hours ago</span>
</li>
</ul>
</div>
<div class="mt-6">
<h3 class="text-xl font-medium text-gray-700 dark:text-gray-300">Create a new topic</h3>
<form class="mt-4">
<textarea class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md" rows="4" placeholder="What's on your mind?"></textarea>
<button class="mt-2 bg-green-500 hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700 text-white font-semibold py-2 px-4 rounded-lg focus:outline-none" type="submit">Post</button>
</form>
</div>
</div>Composants associés
Volet Forum communautaire
Composant de forum communautaire conçu avec des éléments skeuomorphes, avec un design réactif, la prise en charge du thème sombre et des images d’avatar et d’espace réservé.
Volet Forum communautaire
Un composant de forum communautaire simple et brutaliste en niveaux de gris pour les médias sociaux, avec un design réactif et une prise en charge du mode sombre.
Volet Forum communautaire
Un composant de forum communautaire réactif conçu selon les principes de Material Design à l’aide de Tailwind CSS, avec la prise en charge des thèmes sombres et des images de remplacement.