Volet Forum communautaire
Un composant de forum communautaire avec un style de design rétro/vintage, avec des effets réactifs et une prise en charge des thèmes sombres à l’aide de Tailwind CSS.
HTML Code
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-4xl mx-auto">
<h2 class="text-3xl font-bold text-center text-gray-800 dark:text-gray-100 mb-4">Community Forum</h2>
<div class="overflow-y-auto h-96">
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg mb-4 shadow">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<h3 class="font-semibold text-gray-800 dark:text-gray-100">John Doe</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Posted on January 5, 2023</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 text-lg">What are your favorite retro games? I miss playing on my old console!</p>
<img src="https://picsum.photos/400/200?random=1" alt="Random Image" class="mt-4 rounded-lg shadow">
</div>
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg mb-4 shadow">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/women/33.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<h3 class="font-semibold text-gray-800 dark:text-gray-100">Jane Smith</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Posted on January 6, 2023</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 text-lg">I loved Sonic the Hedgehog on Sega! It was the best part of my childhood.</p>
<img src="https://picsum.photos/400/200?random=2" alt="Random Image" class="mt-4 rounded-lg shadow">
</div>
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg mb-4 shadow">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/34.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<h3 class="font-semibold text-gray-800 dark:text-gray-100">Chris Johnson</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Posted on January 7, 2023</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 text-lg">Anyone remembers playing Mario Kart? Those were legendary gaming nights!</p>
<img src="https://picsum.photos/400/200?random=3" alt="Random Image" class="mt-4 rounded-lg shadow">
</div>
</div>
<div class="mt-4">
<textarea class="w-full p-3 border-2 border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-blue-500 dark:focus:border-blue-400 mb-2" rows="3" placeholder="Join the conversation..."></textarea>
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-lg">Post</button>
</div>
</div>Composants associés
Volet Forum communautaire
Un composant de forum communautaire simple, propre et réactif conçu avec un style de typographie suisse/international, avec un dégradé multicolore subtil et une prise en charge du mode sombre, adapté aux sites Web d’entreprise.
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.
Volet Forum communautaire
Un composant de forum communautaire réactif conçu selon les principes de Material Design, adapté à la consommation de blogs et de contenu. Il dispose d’une disposition en grille, d’éléments interactifs et prend en charge les thèmes sombres à l’aide de Tailwind CSS.