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.
HTML Code
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold text-red-600 dark:text-yellow-300 mb-4">Community Forum</h2>
<div class="mb-4">
<input type="text" placeholder="Search..." class="w-full p-2 border border-red-500 dark:border-yellow-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-600 dark:focus:ring-yellow-300" />
</div>
<div class="space-y-6">
<!-- Forum Post -->
<div class="p-4 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-100 dark:bg-gray-700">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div class="ml-3">
<h3 class="text-lg font-semibold text-blue-600 dark:text-blue-300">John Doe</h3>
<span class="text-gray-500 dark:text-gray-400">Posted on 12 Oct 2023</span>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-3">This is a sample forum post discussing the latest trends in e-commerce. Feel free to share your thoughts!</p>
<div class="flex space-x-4">
<button class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 dark:bg-yellow-500 dark:hover:bg-yellow-600">Comment</button>
<button class="bg-white text-red-500 border border-red-500 px-4 py-2 rounded hover:bg-red-500 hover:text-white dark:bg-gray-800 dark:text-yellow-300 dark:border-yellow-300 dark:hover:bg-yellow-500">Like</button>
</div>
<div class="mt-4">
<span class="text-gray-500 dark:text-gray-400">2 Comments</span>
</div>
</div>
<!-- Repeat Forum Post as needed -->
<div class="p-4 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-100 dark:bg-gray-700">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div class="ml-3">
<h3 class="text-lg font-semibold text-blue-600 dark:text-blue-300">Jane Smith</h3>
<span class="text-gray-500 dark:text-gray-400">Posted on 10 Oct 2023</span>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-3">Excited about the new sales coming this holiday season! Anyone else?</p>
<div class="flex space-x-4">
<button class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 dark:bg-yellow-500 dark:hover:bg-yellow-600">Comment</button>
<button class="bg-white text-red-500 border border-red-500 px-4 py-2 rounded hover:bg-red-500 hover:text-white dark:bg-gray-800 dark:text-yellow-300 dark:border-yellow-300 dark:hover:bg-yellow-500">Like</button>
</div>
<div class="mt-4">
<span class="text-gray-500 dark:text-gray-400">5 Comments</span>
</div>
</div>
</div>
</div>Composants associés
Volet Forum communautaire
Un composant de forum communautaire réactif conçu dans le style Glassmorphism avec des tons de terre, adapté aux plateformes de médias sociaux. Il présente un effet de verre dépoli et est compatible avec le 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.
Forum communautaire Composante 9
Un composant du forum communautaire doté d’un design de morphisme en verre avec des éléments translucides semblables à du verre givré, des effets réactifs et la prise en charge du thème sombre.