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 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
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é.