Volet Forum communautaire
Un composant de forum communautaire réactif conçu avec les principes de Material Design, schéma de couleurs d’automne, adapté aux plateformes éducatives. Inclut la prise en charge du mode sombre, une disposition en grille, des sujets de discussion et des avatars utilisateur.
HTML Code
<div class="p-4 sm:p-6 md:p-8 bg-amber-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen font-sans">
<div class="max-w-7xl mx-auto">
<!-- Header -->
<div class="flex flex-col sm:flex-row justify-between items-center mb-6 sm:mb-8 bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
<h1 class="text-2xl sm:text-3xl font-bold text-amber-800 dark:text-amber-300 mb-2 sm:mb-0">Community Discussions</h1>
<div class="flex items-center space-x-2">
<button class="px-4 py-2 bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 text-white rounded-md shadow-sm transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-1" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
</svg>
New Topic
</button>
<select class="border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-amber-500">
<option>Sort by: Latest</option>
<option>Sort by: Popular</option>
<option>Sort by: Unanswered</option>
</select>
</div>
</div>
<!-- Main Content Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
<!-- Categories/Topics Sidebar (md:col-span-1 for desktop) -->
<aside class="md:col-span-1">
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md mb-6">
<h2 class="text-lg font-semibold text-amber-700 dark:text-amber-400 mb-4">Categories</h2>
<ul class="space-y-2 text-gray-700 dark:text-gray-300">
<li><a href="#" class="block px-3 py-2 rounded-md hover:bg-amber-100 dark:hover:bg-gray-700 transition duration-200">General Discussion</a></li>
<li><a href="#" class="block px-3 py-2 rounded-md hover:bg-amber-100 dark:hover:bg-gray-700 transition duration-200">Course Q&A</a></li>
<li><a href="#" class="block px-3 py-2 rounded-md hover:bg-amber-100 dark:hover:bg-gray-700 transition duration-200">Project Showcases</a></li>
<li><a href="#" class="block px-3 py-2 rounded-md hover:bg-amber-100 dark:hover:bg-gray-700 transition duration-200">Study Groups</a></li>
<li><a href="#" class="block px-3 py-2 rounded-md hover:bg-amber-100 dark:hover:bg-gray-700 transition duration-200">Announcements</a></li>
</ul>
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
<h2 class="text-lg font-semibold text-amber-700 dark:text-amber-400 mb-4">Popular Tags</h2>
<div class="flex flex-wrap gap-2">
<a href="#" class="inline-block bg-amber-100 dark:bg-gray-700 text-amber-800 dark:text-amber-300 text-xs px-3 py-1 rounded-full hover:bg-amber-200 dark:hover:bg-gray-600 transition">#Python</a>
<a href="#" class="inline-block bg-amber-100 dark:bg-gray-700 text-amber-800 dark:text-amber-300 text-xs px-3 py-1 rounded-full hover:bg-amber-200 dark:hover:bg-gray-600 transition">#WebDev</a>
<a href="#" class="inline-block bg-amber-100 dark:bg-gray-700 text-amber-800 dark:text-amber-300 text-xs px-3 py-1 rounded-full hover:bg-amber-200 dark:hover:bg-gray-600 transition">#DataScience</a>
<a href="#" class="inline-block bg-amber-100 dark:bg-gray-700 text-amber-800 dark:text-amber-300 text-xs px-3 py-1 rounded-full hover:bg-amber-200 dark:hover:bg-gray-600 transition">#MachineLearning</a>
<a href="#" class="inline-block bg-amber-100 dark:bg-gray-700 text-amber-800 dark:text-amber-300 text-xs px-3 py-1 rounded-full hover:bg-amber-200 dark:hover:bg-gray-600 transition">#Algorithms</a>
</div>
</div>
</aside>
<!-- Discussion Topics List (md:col-span-2 or 3 for desktop) -->
<section class="md:col-span-2 lg:col-span-3 space-y-4">
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md transition duration-300 hover:shadow-lg">
<div class="flex items-center mb-2">
<img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div>
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">John Doe</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Posted 2 hours ago in <span class="text-amber-700 dark:text-amber-400">Course Q&A</span></p>
</div>
</div>
<h3 class="text-lg font-semibold text-amber-800 dark:text-amber-300 mb-2">Understanding Recursion in Python</h3>
<p class="text-sm text-gray-700 dark:text-gray-300 mb-3 line-clamp-2">I'm struggling to grasp the concept of recursion. Can someone explain it with a simple example? Especially how the call stack works...</p>
<div class="flex items-center justify-between text-xs text-gray-600 dark:text-gray-400">
<div class="flex items-center space-x-3">
<span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" /></svg>15 Replies</span>
<span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><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" /></svg>230 Views</span>
</div>
<a href="#" class="text-amber-700 dark:text-amber-400 hover:underline">Read More</a>
</div>
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md transition duration-300 hover:shadow-lg">
<div class="flex items-center mb-2">
<img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div>
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">Jane Smith</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Posted 5 hours ago in <span class="text-amber-700 dark:text-amber-400">Project Showcases</span></p>
</div>
</div>
<h3 class="text-lg font-semibold text-amber-800 dark:text-amber-300 mb-2">My First Machine Learning Project: Predicting House Prices</h3>
<p class="text-sm text-gray-700 dark:text-gray-300 mb-3 line-clamp-2">I just finished my first end-to-end ML project and wanted to share it with the community! Any feedback or suggestions would be greatly appreciated...</p>
<div class="flex items-center justify-between text-xs text-gray-600 dark:text-gray-400">
<div class="flex items-center space-x-3">
<span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" /></svg>28 Replies</span>
<span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><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" /></svg>480 Views</span>
</div>
<a href="#" class="text-amber-700 dark:text-amber-400 hover:underline">Read More</a>
</div>
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md transition duration-300 hover:shadow-lg">
<div class="flex items-center mb-2">
<img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/21.jpg" alt="User Avatar">
<div>
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">Emily White</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Posted 1 day ago in <span class="text-amber-700 dark:text-amber-400">Study Groups</span></p>
</div>
</div>
<h3 class="text-lg font-semibold text-amber-800 dark:text-amber-300 mb-2">Looking for Study Group for Advanced Algorithms</h3>
<p class="text-sm text-gray-700 dark:text-gray-300 mb-3 line-clamp-2">Hi everyone, I'm taking the Advanced Algorithms course and would love to form a study group to go over concepts and practice problems...</p>
<div class="flex items-center justify-between text-xs text-gray-600 dark:text-gray-400">
<div class="flex items-center space-x-3">
<span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" /></svg>8 Replies</span>
<span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><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" /></svg>190 Views</span>
</div>
<a href="#" class="text-amber-700 dark:text-amber-400 hover:underline">Read More</a>
</div>
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md transition duration-300 hover:shadow-lg">
<div class="flex items-center mb-2">
<img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div>
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">Michael Brown</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Posted 2 days ago in <span class="text-amber-700 dark:text-amber-400">General Discussion</span></p>
</div>
</div>
<h3 class="text-lg font-semibold text-amber-800 dark:text-amber-300 mb-2">Best Resources for Learning React Hooks?</h3>
<p class="text-sm text-gray-700 dark:text-gray-300 mb-3 line-clamp-2">I'm looking for recommendations on the best online resources, tutorials, or courses to learn React Hooks effectively. Any suggestions?</p>
<div class="flex items-center justify-between text-xs text-gray-600 dark:text-gray-400">
<div class="flex items-center space-x-3">
<span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" /></svg>20 Replies</span>
<span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><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" /></svg>350 Views</span>
</div>
<a href="#" class="text-amber-700 dark:text-amber-400 hover:underline">Read More</a>
</div>
</div>
</section>
</div>
</div>
</div>Composants associés
Composante du Forum financier Art Déco
Un composant de forum communautaire simple et réactif, conçu dans un style Art déco discret, adapté aux interfaces financières et bancaires, avec prise en charge du mode sombre.
Volet Forum communautaire
Un composant de forum communautaire minimaliste avec prise en charge du mode sombre. Ce composant est conçu pour les portfolios et présente une mise en page simple avec des couleurs de terre.
Volet Forum communautaire
Un composant de forum communautaire réactif stylisé en mode sombre à l’aide de Tailwind CSS. Le composant présente un arrière-plan sombre pour réduire la fatigue oculaire et comprend des images de remplacement pour les avatars et les messages de forum.