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.
HTML Code
<div class="bg-gray-900 text-white p-6 rounded-lg shadow-lg max-w-3xl mx-auto">
<h2 class="text-2xl font-bold mb-4">Community Forum</h2>
<div class="mb-4">
<h3 class="text-xl font-semibold">Latest Discussions</h3>
<div class="mt-4">
<div class="bg-gray-800 p-4 rounded-lg mb-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<h4 class="font-semibold">John Doe</h4>
<span class="text-gray-400 text-sm">2 hours ago</span>
</div>
</div>
<p class="text-gray-300">What are the best practices for learning JavaScript?</p>
<div class="flex justify-between mt-2">
<span class="text-gray-400">5 replies</span>
<span class="text-gray-400">10 likes</span>
</div>
</div>
<div class="bg-gray-800 p-4 rounded-lg mb-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<h4 class="font-semibold">Jane Smith</h4>
<span class="text-gray-400 text-sm">3 hours ago</span>
</div>
</div>
<p class="text-gray-300">Any recommendations for a good code editor?</p>
<div class="flex justify-between mt-2">
<span class="text-gray-400">2 replies</span>
<span class="text-gray-400">5 likes</span>
</div>
</div>
</div>
</div>
<div class="mb-4">
<h3 class="text-xl font-semibold">Join the Conversation</h3>
<form class="mt-4 space-y-4">
<textarea class="w-full p-2 rounded-lg bg-gray-800 text-white placeholder-gray-400 resize-none" rows="4" placeholder="Share your thoughts..."></textarea>
<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Post</button>
</form>
</div>
<div class="bg-gray-800 p-4 rounded-lg mt-4">
<h3 class="text-xl font-semibold mb-2">Popular Topics</h3>
<ul class="space-y-2">
<li class="bg-gray-700 p-2 rounded">#JavaScript</li>
<li class="bg-gray-700 p-2 rounded">#React</li>
<li class="bg-gray-700 p-2 rounded">#TailwindCSS</li>
<li class="bg-gray-700 p-2 rounded">#NodeJS</li>
<li class="bg-gray-700 p-2 rounded">#WebDevelopment</li>
</ul>
</div>
</div>Composants associés
Volet Forum communautaire
Un composant de forum communautaire simple et réactif avec une palette de couleurs chaudes, inspirée du coucher de soleil, adapté aux plateformes de rencontres ou sociales. Comprend des ombres de type Material Design et prend en charge le mode sombre.
Volet Forum communautaire
Composant du forum communautaire avec conception Neumorphism, schéma de couleurs en niveaux de gris et complexité simple pour les médias sociaux à l’aide de Tailwind CSS. Conception réactive avec prise en charge du thème sombre.
Volet Forum communautaire
Un composant de forum communautaire complexe, inspiré du papier/de l’impression, pour les discussions sur la météo et le climat, utilisant une palette de couleurs complémentaires et une réactivité totale avec la prise en charge du mode sombre.