Volet Forum communautaire
Un composant de forum communautaire simple et brutaliste en niveaux de gris pour les médias sociaux, avec un design réactif et une prise en charge du mode sombre.
HTML Code
<div class="bg-white dark:bg-black text-black dark:text-white min-h-screen p-4">
<div class="container mx-auto">
<h1 class="text-2xl font-bold mb-4 text-center">Community Forum</h1>
<div class="space-y-4">
<!-- Forum Post -->
<div class="border border-black dark:border-white p-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2 border border-black dark:border-white">
<p class="font-bold">User One</p>
</div>
<p class="mb-2">This is a sample forum post content.</p>
<div class="flex justify-between text-sm text-gray-600 dark:text-gray-400">
<span>Posted on: 2023-10-27</span>
<span>Replies: 5</span>
</div>
</div>
<!-- Forum Post -->
<div class="border border-black dark:border-white p-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2 border border-black dark:border-white">
<p class="font-bold">User Two</p>
</div>
<p class="mb-2">Another example forum post here.</p>
<div class="flex justify-between text-sm text-gray-600 dark:text-gray-400">
<span>Posted on: 2023-10-27</span>
<span>Replies: 10</span>
</div>
</div>
<!-- Forum Post -->
<div class="border border-black dark:border-white p-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2 border border-black dark:border-white">
<p class="font-bold">User Three</p>
</div>
<p class="mb-2">Yet another example forum post to fill the space.</p>
<div class="flex justify-between text-sm text-gray-600 dark:text-gray-400">
<span>Posted on: 2023-10-27</span>
<span>Replies: 2</span>
</div>
</div>
</div>
</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.
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 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.