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 de forum communautaire simple, propre et fiable, conçu pour les applications de sport/fitness, avec un schéma de dégradé multicolore et une réactivité totale avec prise en charge du mode sombre.
Volet Forum communautaire
Un composant de forum communautaire avec un style de design rétro/vintage, avec des effets réactifs et une prise en charge des thèmes sombres à l’aide de Tailwind CSS.
Volet Forum communautaire
Un composant simple de forum de la communauté Neumorphic pour le commerce électronique, utilisant une palette de couleurs triadique, avec un design réactif et une prise en charge du thème sombre.