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
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.
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.
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.