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.
HTML Code
<div class="container mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Community Forum</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<h3 class="text-lg font-medium text-gray-800 dark:text-white">John Doe</h3>
</div>
<p class="text-gray-700 dark:text-gray-300">This is a great place to discuss various topics and share ideas with others. Feel free to start a conversation!</p>
<img src="https://picsum.photos/400/200" alt="Community Discussion" class="rounded-lg shadow mt-2">
<div class="mt-3">
<span class="text-gray-500 dark:text-gray-400 text-sm">Posted on January 1, 2023</span>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<h3 class="text-lg font-medium text-gray-800 dark:text-white">Jane Smith</h3>
</div>
<p class="text-gray-700 dark:text-gray-300">I love the community here! Everyone is so friendly and welcoming. Looking forward to more discussions.</p>
<img src="https://picsum.photos/400/201" alt="Community Discussion" class="rounded-lg shadow mt-2">
<div class="mt-3">
<span class="text-gray-500 dark:text-gray-400 text-sm">Posted on January 2, 2023</span>
</div>
</div>
</div>
<div class="mt-6">
<h4 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Join the Conversation</h4>
<textarea class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md" rows="4" placeholder="Share your thoughts..."></textarea>
<button class="mt-2 bg-blue-500 text-white rounded-md px-4 py-2 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Post</button>
</div>
</div>Composants associés
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.
Volet Forum communautaire
Un composant de forum communautaire réactif conçu dans le style Glassmorphism avec des tons de terre, adapté aux plateformes de médias sociaux. Il présente un effet de verre dépoli et est compatible avec le mode sombre.
Volet Forum communautaire
Un composant de forum communautaire réactif conçu selon les principes de Material Design, adapté à la consommation de blogs et de contenu. Il dispose d’une disposition en grille, d’éléments interactifs et prend en charge les thèmes sombres à l’aide de Tailwind CSS.