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 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.
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.
Volet Forum communautaire
Un composant minimaliste de forum communautaire pour le commerce électronique, avec un design épuré, une palette de couleurs triadique et une prise en charge du mode sombre.