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.
HTML Code
<div class="min-h-screen bg-gray-800 flex flex-col items-center justify-center p-10">
<div class="bg-white bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-6 max-w-3xl w-full">
<h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Community Forum</h1>
<div class="space-y-4">
<!-- Post Example -->
<div class="bg-white bg-opacity-20 rounded-lg p-4 shadow-md">
<div class="flex items-center">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="ml-3">
<h2 class="font-semibold text-gray-900 dark:text-white">John Doe</h2>
<span class="text-sm text-gray-600 dark:text-gray-300">2 hours ago</span>
</div>
</div>
<p class="mt-2 text-gray-800 dark:text-gray-200">What do you all think about the latest trends in technology?</p>
</div>
<!-- Post Example -->
<div class="bg-white bg-opacity-20 rounded-lg p-4 shadow-md">
<div class="flex items-center">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
<div class="ml-3">
<h2 class="font-semibold text-gray-900 dark:text-white">Jane Smith</h2>
<span class="text-sm text-gray-600 dark:text-gray-300">1 hour ago</span>
</div>
</div>
<p class="mt-2 text-gray-800 dark:text-gray-200">I believe we are on the cusp of major changes in this field!</p>
</div>
</div>
<div class="mt-6">
<textarea class="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white bg-opacity-20 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-600 dark:focus:ring-blue-500" rows="3" placeholder="Share your thoughts..."></textarea>
<button class="mt-2 w-full py-2 bg-blue-500 text-white font-semibold rounded-lg hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-500">Post</button>
</div>
</div>
</div>Composants associés
Volet Forum communautaire
Il s’agit d’un composant simple de forum communautaire utilisant les principes de conception matérielle, conçu pour la consommation de contenu de blog avec une palette de couleurs Earth Tones et une conception réactive pour la 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.
Volet Forum communautaire
Un composant de forum communautaire de style Neumorphisme avec des avatars, des fils de discussion et un thème sombre.