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 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.
Composante Forum Communauté - Glassmorphism E-commerce
Un composant de forum communautaire de style glassmorphism pour le commerce électronique, avec des éléments translucides, des effets de flou et une palette de couleurs triadique. Réactif avec prise en charge du mode sombre.
Composante du Forum communautaire brutaliste
Un composant de forum communautaire de style brutaliste pour les interfaces de médias sociaux avec des couleurs vives, une complexité modérée et une prise en charge du mode sombre. Comprend une liste de messages sur le forum avec une typographie audacieuse, des éléments très contrastés et des mises en page asymétriques typiques du design brutaliste. Comprend des articles de publication avec des avatars d’utilisateurs, des boutons d’interaction et une esthétique brute et intentionnellement grossière avec des accents de couleurs vives.