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.
HTML Code
<div class="font-sans antialiased bg-gray-50 dark:bg-gray-900 min-h-screen p-4 sm:p-6 lg:p-8 flex items-center justify-center">
<div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
<!-- Header Section -->
<div class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 p-4 sm:p-6 text-white text-center rounded-t-lg">
<h1 class="text-2xl sm:text-3xl font-bold tracking-tight mb-1">Community Forum</h1>
<p class="text-sm sm:text-base opacity-90">Engage, learn, and connect with fellow professionals.</p>
</div>
<!-- Forum Body -->
<div class="p-4 sm:p-6 lg:p-8 grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
<!-- Forum Card 1 -->
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 transition-all duration-300 hover:shadow-lg dark:hover:shadow-rose-700/50">
<h3 class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 whitespace-nowrap overflow-hidden text-ellipsis">General Discussion</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 mb-3">Share ideas, ask questions, and discuss general topics.</p>
<div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
<span>124 Posts</span>
</div>
</div>
<!-- Forum Card 2 -->
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 transition-all duration-300 hover:shadow-lg dark:hover:shadow-violet-700/50">
<h3 class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 whitespace-nowrap overflow-hidden text-ellipsis">Product Feedback</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 mb-3">Provide suggestions and report issues for our products.</p>
<div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
<span>87 Posts</span>
</div>
</div>
<!-- Forum Card 3 (Hidden on mobile for simplicity) -->
<div class="hidden md:block bg-gray-100 dark:bg-gray-700 rounded-lg p-4 transition-all duration-300 hover:shadow-lg dark:hover:shadow-cyan-700/50">
<h3 class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 whitespace-nowrap overflow-hidden text-ellipsis">Announcements</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 mb-3">Stay updated with the latest news and company announcements.</p>
<div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
<span>15 Posts</span>
</div>
</div>
</div>
<!-- Call to Action/Footer -->
<div class="p-4 sm:p-6 lg:p-8 border-t border-gray-200 dark:border-gray-700 flex flex-col sm:flex-row items-center justify-between">
<p class="text-sm text-gray-600 dark:text-gray-400 text-center sm:text-left mb-4 sm:mb-0">Ready to dive in?</p>
<button class="px-6 py-2 bg-gradient-to-r from-blue-500 to-teal-500 text-white font-medium rounded-full shadow-md hover:shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
Join the Conversation
</button>
</div>
</div>
</div>Composants associés
Volet Forum communautaire
Composant du forum communautaire avec conception Neumorphism, schéma de couleurs en niveaux de gris et complexité simple pour les médias sociaux à l’aide de Tailwind CSS. Conception réactive avec prise en charge du thème sombre.
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.
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.