Volet Forum communautaire
Composant du forum communautaire avec conception Glassmorphism, palette de couleurs vives, niveau de complexité complexe, à des fins de blog/contenu, conception réactive avec prise en charge du thème sombre, utilisation de Tailwind CSS.
HTML Code
<div class="bg-gray-100 dark:bg-gray-900 py-8">
<div class="container mx-auto px-4">
<h1 class="text-4xl font-bold text-center text-gray-800 dark:text-white mb-8">Community Forum</h1>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Forum Categories -->
<div class="md:col-span-2 backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 rounded-lg p-6 shadow-lg">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Categories</h2>
<!-- Category Card -->
<div class="mb-4 p-4 backdrop-filter backdrop-blur-lg bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg shadow-md flex items-center justify-between">
<div>
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">General Discussion</h3>
<p class="text-gray-600 dark:text-gray-300">Discuss anything and everything.</p>
</div>
<span class="text-sm font-semibold text-blue-600 dark:text-blue-400">500+ Topics</span>
</div>
<!-- Category Card -->
<div class="mb-4 p-4 backdrop-filter backdrop-blur-lg bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg shadow-md flex items-center justify-between">
<div>
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Announcements</h3>
<p class="text-gray-600 dark:text-gray-300">Important news and updates.</p>
</div>
<span class="text-sm font-semibold text-green-600 dark:text-green-400">100+ Topics</span>
</div>
<!-- Add More Categories -->
</div>
<!-- Recent Activity -->
<div class="backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 rounded-lg p-6 shadow-lg">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Recent Activity</h2>
<!-- Activity Item -->
<div class="mb-4 pb-4 border-b border-gray-300 dark:border-gray-600 last:border-b-0">
<p class="text-gray-700 dark:text-gray-300"><span class="font-semibold text-gray-800 dark:text-white">John Doe</span> posted in <span class="font-semibold text-blue-600 dark:text-blue-400">General Discussion</span></p>
<p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</p>
</div>
<!-- Activity Item -->
<div class="mb-4 pb-4 border-b border-gray-300 dark:border-gray-600 last:border-b-0">
<p class="text-gray-700 dark:text-gray-300"><span class="font-semibold text-gray-800 dark:text-white">Jane Smith</span> replied in <span class="font-semibold text-green-600 dark:text-green-400">Announcements</span></p>
<p class="text-sm text-gray-500 dark:text-gray-400">1 hour ago</p>
</div>
<!-- Add More Activity -->
</div>
</div>
</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.
Volet Forum communautaire
Il s’agit d’un composant simple du forum communautaire avec une palette de couleurs pastel, des influences Material Design et la prise en charge du mode sombre. Dispose d’une mise en page réactive pour la consommation de blog/contenu.
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.