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 pour la finance/banque avec un style de conception matérielle et une palette de couleurs bonbon/doux, avec des couleurs vives comme le rose chewing-gum et le vert menthe, la prise en charge du mode sombre et le HTML sémantique.
Volet Forum communautaire
Un composant de forum communautaire réactif conçu avec un style Skeuomorphism et un schéma de couleurs sourdes/désaturées, adapté aux sites Web gouvernementaux/publics, y compris la prise en charge du mode sombre.
Volet Forum communautaire
Un composant simple de forum communautaire sur le thème cyberpunk pour les plateformes immobilières, avec des arrière-plans sombres, des accents néon et un design réactif avec prise en charge du mode sombre.