Volet Forum communautaire - Art déco Monochromatique
Un composant de forum communautaire réactif conçu avec une esthétique Art déco utilisant une palette de couleurs monochromatiques, adapté aux applications technologiques/SaaS. Dispose d’une prise en charge du mode sombre et d’éléments interactifs.
HTML Code
<div class="font-sans bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200 transition-colors duration-300 p-4 sm:p-6 lg:p-8">
<div class="max-w-7xl mx-auto bg-white dark:bg-gray-850 shadow-lg rounded-xl overflow-hidden
border border-gray-200 dark:border-gray-700
" style="box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05), 0 0 0 10px rgba(173,216,230, 0.1) inset;"
>
<div class="p-6 sm:p-8 lg:p-10 border-b border-gray-200 dark:border-gray-700 relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-blue-300/20 via-blue-500/10 to-blue-300/20 dark:from-blue-700/20 dark:via-blue-900/10 dark:to-blue-700/20 opacity-70" style="clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);"></div>
<div class="relative z-10 flex flex-col sm:flex-row justify-between items-start sm:items-center">
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-blue-800 dark:text-blue-200 leading-tight mb-4 sm:mb-0">
The Developer Hub
</h2>
<button class="px-6 py-2 bg-blue-700 hover:bg-blue-800 text-white rounded-lg shadow-md transition-all duration-300
flex items-center space-x-2 border-2 border-blue-600 dark:border-blue-500
transform hover:scale-105 active:scale-95
relative overflow-hidden group">
<span class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
<svg class="w-5 h-5" 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="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
<span>New Topic</span>
</button>
</div>
<p class="mt-4 text-base sm:text-lg text-gray-600 dark:text-gray-400 relative z-10">
Connect, share insights, and get support from our vibrant community of developers.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-0 border-t border-gray-200 dark:border-gray-700">
<!-- Left Sidebar (Categories/Filters) -->
<div class="md:col-span-1 p-6 sm:p-8 lg:p-10 border-r border-gray-200 dark:border-gray-700 md:h-full">
<h3 class="text-xl sm:text-2xl font-bold text-blue-800 dark:text-blue-200 mb-6">
Categories
</h3>
<nav class="space-y-3">
<a href="#" class="flex items-center px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors duration-200 border border-transparent hover:border-blue-400 dark:hover:border-blue-600 group">
<svg class="w-5 h-5 mr-3 text-blue-500 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors" 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 class="font-medium">General Discussion</span>
</a>
<a href="#" class="flex items-center px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors duration-200 border border-transparent hover:border-blue-400 dark:hover:border-blue-600 group">
<svg class="w-5 h-5 mr-3 text-blue-500 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors" 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="M9.75 17L9 20l-1 1h8l-1-1-1.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
<span class="font-medium">Feature Requests</span>
</a>
<a href="#" class="flex items-center px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors duration-200 border border-transparent hover:border-blue-400 dark:hover:border-blue-600 group">
<svg class="w-5 h-5 mr-3 text-blue-500 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors" 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="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<span class="font-medium">Bug Reports</span>
</a>
<a href="#" class="flex items-center px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors duration-200 border border-transparent hover:border-blue-400 dark:hover:border-blue-600 group">
<svg class="w-5 h-5 mr-3 text-blue-500 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors" 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="M10 20l4-16m4 4l4 4-4 4M6 16L2 12l4-4"></path></svg>
<span class="font-medium">Technical Discussions</span>
</a>
</nav>
</div>
<!-- Main Content (Topic List) -->
<div class="md:col-span-2 p-6 sm:p-8 lg:p-10">
<h3 class="text-xl sm:text-2xl font-bold text-blue-800 dark:text-blue-200 mb-6">
Recent Topics
</h3>
<div class="space-y-4">
<!-- Topic Item 1 -->
<div class="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200
border border-gray-200 dark:border-gray-700 flex flex-col md:flex-row items-start md:items-center space-y-3 md:space-y-0 md:space-x-4">
<div class="flex-shrink-0">
<img class="w-10 h-10 rounded-full object-cover border-2 border-blue-400 dark:border-blue-600 shadow" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
</div>
<div class="flex-grow">
<a href="#" class="text-lg font-semibold text-blue-700 dark:text-blue-300 hover:underline">
Best Practices for Scalable Microservices Architecture
</a>
<p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 md:line-clamp-1 mt-1 sm:mt-0">
<span class="hidden sm:inline">Posted by </span><a href="#" class="font-medium hover:underline">Alex Johnson</a> on October 26, 2023
</p>
</div>
<div class="flex-shrink-0 text-right md:text-left">
<div class="flex items-center space-x-4">
<span class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
<svg class="w-4 h-4 mr-1 text-blue-500" 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>
24
</span>
<span class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
<svg class="w-4 h-4 mr-1 text-blue-500" 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
1.2K
</span>
</div>
</div>
</div>
<!-- Topic Item 2 -->
<div class="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200
border border-gray-200 dark:border-gray-700 flex flex-col md:flex-row items-start md:items-center space-y-3 md:space-y-0 md:space-x-4">
<div class="flex-shrink-0">
<img class="w-10 h-10 rounded-full object-cover border-2 border-blue-400 dark:border-blue-600 shadow" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
</div>
<div class="flex-grow">
<a href="#" class="text-lg font-semibold text-blue-700 dark:text-blue-300 hover:underline">
Understanding new CSS features in Modern Browsers
</a>
<p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 md:line-clamp-1 mt-1 sm:mt-0">
<span class="hidden sm:inline">Posted by </span><a href="#" class="font-medium hover:underline">Sarah Lee</a> on October 25, 2023
</p>
</div>
<div class="flex-shrink-0 text-right md:text-left">
<div class="flex items-center space-x-4">
<span class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
<svg class="w-4 h-4 mr-1 text-blue-500" 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>
18
</span>
<span class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
<svg class="w-4 h-4 mr-1 text-blue-500" 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
870
</span>
</div>
</div>
</div>
<!-- Topic Item 3 -->
<div class="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200
border border-gray-200 dark:border-gray-700 flex flex-col md:flex-row items-start md:items-center space-y-3 md:space-y-0 md:space-x-4">
<div class="flex-shrink-0">
<img class="w-10 h-10 rounded-full object-cover border-2 border-blue-400 dark:border-blue-600 shadow" src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar">
</div>
<div class="flex-grow">
<a href="#" class="text-lg font-semibold text-blue-700 dark:text-blue-300 hover:underline">
Debugging common React performance bottlenecks
</a>
<p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 md:line-clamp-1 mt-1 sm:mt-0">
<span class="hidden sm:inline">Posted by </span><a href="#" class="font-medium hover:underline">David Kim</a> on October 24, 2023
</p>
</div>
<div class="flex-shrink-0 text-right md:text-left">
<div class="flex items-center space-x-4">
<span class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
<svg class="w-4 h-4 mr-1 text-blue-500" 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>
31
</span>
<span class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
<svg class="w-4 h-4 mr-1 text-blue-500" 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
1.5K
</span>
</div>
</div>
</div>
<!-- Pagination Placeholder -->
<div class="flex justify-center mt-8">
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-500 hover:bg-gray-50 dark:hover:bg-gray-700">
<span class="sr-only">Previous</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" aria-current="page" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-blue-600 text-sm font-medium text-white hover:bg-blue-700">
1
</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
2
</a>
<a href="#" class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
3
</a>
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-500 hover:bg-gray-50 dark:hover:bg-gray-700">
<span class="sr-only">Next</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</a>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>Composants associés
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.
Volet Forum communautaire (Bauhaus du commerce électronique)
Un composant de forum communautaire simple et réactif conçu pour le commerce électronique, avec des formes géométriques inspirées du Bauhaus et une palette de couleurs sourdes. Inclut la prise en charge du mode sombre.
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.