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.
HTML Code
<div class="max-w-5xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<!-- Forum Header -->
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Community Forum</h2>
<p class="text-gray-600 dark:text-gray-300 mb-6">Join the conversation about your favorite products!</p>
<!-- Post List -->
<div class="space-y-4">
<div class="flex items-start bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h3>
<p class="text-gray-600 dark:text-gray-300">What is the best camera for beginners?</p>
<div class="text-sm text-gray-500 dark:text-gray-400">12 Replies | 2 Days Ago</div>
</div>
</div>
<div class="flex items-start bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Jane Smith</h3>
<p class="text-gray-600 dark:text-gray-300">Can anyone recommend a good laptop?</p>
<div class="text-sm text-gray-500 dark:text-gray-400">8 Replies | 3 Days Ago</div>
</div>
</div>
<div class="flex items-start bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
<img src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Michael Johnson</h3>
<p class="text-gray-600 dark:text-gray-300">Best headphones under $100?</p>
<div class="text-sm text-gray-500 dark:text-gray-400">5 Replies | 1 Week Ago</div>
</div>
</div>
</div>
<!-- Post Input -->
<div class="mt-6">
<h4 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Start a New Discussion</h4>
<textarea class="w-full p-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-lg focus:outline-none focus:ring focus:ring-blue-400 dark:focus:ring-blue-500" rows="4" placeholder="Write your message..."></textarea>
<button class="mt-2 px-6 py-2 bg-blue-500 text-white rounded-lg shadow 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 réactif et interactif avec le style de conception Neumorphism, adapté aux sites Web d’entreprise/d’entreprise, prenant en charge les thèmes clairs et sombres.
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.
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.