Volet Forum communautaire
Un composant de forum communautaire complexe, inspiré du papier/de l’impression, pour les discussions sur la météo et le climat, utilisant une palette de couleurs complémentaires et une réactivité totale avec la prise en charge du mode sombre.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-4 sm:p-6 lg:p-8 font-serif">
<!-- Outer 'Paper' Container -->
<div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden
border border-gray-200 dark:border-gray-700
flex flex-col lg:flex-row">
<!-- Left Sidebar: Categories/Navigation -->
<aside class="w-full lg:w-1/4 bg-blue-50 dark:bg-gray-700 p-6 border-b lg:border-b-0 lg:border-r
border-gray-200 dark:border-gray-600 flex-shrink-0">
<h2 class="text-2xl font-bold mb-6 text-blue-800 dark:text-blue-300 tracking-wide">Forum Topics</h2>
<ul class="space-y-3">
<li><a href="#" class="block text-lg py-2 px-3 rounded-md transition-colors duration-200
font-semibold text-blue-700 dark:text-blue-400
hover:bg-blue-100 dark:hover:bg-gray-600
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Latest Forecasts</a></li>
<li><a href="#" class="block text-lg py-2 px-3 rounded-md transition-colors duration-200
text-gray-700 dark:text-gray-300
hover:bg-blue-100 dark:hover:bg-gray-600
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Climate Change Discussion</a></li>
<li><a href="#" class="block text-lg py-2 px-3 rounded-md transition-colors duration-200
text-gray-700 dark:text-gray-300
hover:bg-blue-100 dark:hover:bg-gray-600
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Extreme Weather Events</a></li>
<li><a href="#" class="block text-lg py-2 px-3 rounded-md transition-colors duration-200
text-gray-700 dark:text-gray-300
hover:bg-blue-100 dark:hover:bg-gray-600
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Weather Photography</a></li>
<li><a href="#" class="block text-lg py-2 px-3 rounded-md transition-colors duration-200
text-gray-700 dark:text-gray-300
hover:bg-blue-100 dark:hover:bg-gray-600
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Science & Research</a></li>
<li><a href="#" class="block text-lg py-2 px-3 rounded-md transition-colors duration-200
text-gray-700 dark:text-gray-300
hover:bg-blue-100 dark:hover:bg-gray-600
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Regional Weather Watch</a></li>
</ul>
<div class="mt-8 pt-6 border-t border-gray-300 dark:border-gray-500">
<h3 class="text-xl font-bold mb-4 text-blue-800 dark:text-blue-300">Popular Tags</h3>
<div class="flex flex-wrap gap-2">
<span class="bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-sm px-3 py-1 rounded-full">#Hurricane</span>
<span class="bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-sm px-3 py-1 rounded-full">#ClimateModeling</span>
<span class="bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-sm px-3 py-1 rounded-full">#ElNino</span>
<span class="bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-sm px-3 py-1 rounded-full">#Drought</span>
<span class="bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-sm px-3 py-1 rounded-full">#SolarPower</span>
</div>
</div>
</aside>
<!-- Main Content Area: Threads List -->
<main class="flex-1 p-6 lg:p-8">
<h1 class="text-3xl font-bold mb-8 text-indigo-900 dark:text-indigo-200 tracking-wide">Current Discussions</h1>
<!-- Search and Sort -->
<div class="flex flex-col sm:flex-row justify-between items-center mb-6 space-y-4 sm:space-y-0 sm:space-x-4">
<div class="relative w-full sm:w-1/2 lg:w-1/3">
<input type="text" placeholder="Search discussions..." class="w-full px-4 py-2 pr-10 rounded-md
border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-blue-500
bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 shadow-sm">
<svg class="absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 dark:text-gray-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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</div>
<div class="flex w-full sm:w-auto space-x-4">
<select class="px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-blue-500
bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 shadow-sm">
<option>Sort by: Latest</option>
<option>Sort by: Popular</option>
<option>Sort by: Unanswered</option>
</select>
<button class="px-5 py-2 rounded-md bg-green-600 dark:bg-green-700 text-white font-semibold shadow-md
hover:bg-green-700 dark:hover:bg-green-800 transition-colors duration-200
focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
New Thread
</button>
</div>
</div>
<!-- Thread List -->
<div class="space-y-5">
<!-- Thread Item 1 -->
<article class="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg shadow-sm
border border-gray-200 dark:border-gray-600 hover:shadow-md transition-shadow duration-200">
<div class="sm:flex sm:justify-between sm:items-start mb-3">
<h3 class="text-xl font-bold text-indigo-800 dark:text-indigo-300 mb-2 sm:mb-0">
<a href="#" class="hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-700">Impact of La Niña on Global Crop Yields This Year</a>
</h3>
<span class="text-sm text-gray-500 dark:text-gray-400 flex-shrink-0">2 days ago</span>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-4 line-clamp-2">Discussing the latest climate models and their predictions for agricultural productivity based on La Niña's influence...</p>
<div class="flex items-center text-sm text-gray-600 dark:text-gray-400">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-3 border border-gray-300 dark:border-gray-500">
<span>Posted by <span class="font-medium text-blue-700 dark:text-blue-300">ClimateMaster</span></span>
<span class="mx-3 text-gray-400 dark:text-gray-500">|</span>
<span>15 Replies</span>
<span class="ml-auto flex items-center">
<svg class="w-5 h-5 mr-1 text-gray-500 dark:text-gray-400" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
32 Likes
</span>
</div>
</article>
<!-- Thread Item 2 -->
<article class="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg shadow-sm
border border-gray-200 dark:border-gray-600 hover:shadow-md transition-shadow duration-200">
<div class="sm:flex sm:justify-between sm:items-start mb-3">
<h3 class="text-xl font-bold text-indigo-800 dark:text-indigo-300 mb-2 sm:mb-0">
<a href="#" class="hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-700">How accurate are long-range hurricane season predictions?</a>
</h3>
<span class="text-sm text-gray-500 dark:text-gray-400 flex-shrink-0">1 week ago</span>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-4 line-clamp-2">Exploring the methodologies behind seasonal hurricane forecasts and their historical reliability, with insights from meteorologists...</p>
<div class="flex items-center text-sm text-gray-600 dark:text-gray-400">
<img src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-3 border border-gray-300 dark:border-gray-500">
<span>Posted by <span class="font-medium text-blue-700 dark:text-blue-300">StormChaser88</span></span>
<span class="mx-3 text-gray-400 dark:text-gray-500">|</span>
<span>8 Replies</span>
<span class="ml-auto flex items-center">
<svg class="w-5 h-5 mr-1 text-gray-500 dark:text-gray-400" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
21 Likes
</span>
</div>
</article>
<!-- Thread Item 3 -->
<article class="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg shadow-sm
border border-gray-200 dark:border-gray-600 hover:shadow-md transition-shadow duration-200">
<div class="sm:flex sm:justify-between sm:items-start mb-3">
<h3 class="text-xl font-bold text-indigo-800 dark:text-indigo-300 mb-2 sm:mb-0">
<a href="#" class="hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-700">Your local weather station setup - share tips!</a>
</h3>
<span class="text-sm text-gray-500 dark:text-gray-400 flex-shrink-0">1 month ago</span>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-4 line-clamp-2">A thread for enthusiasts to share their personal weather station configurations, sensor recommendations, and data analysis software...</p>
<div class="flex items-center text-sm text-gray-600 dark:text-gray-400">
<img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-3 border border-gray-300 dark:border-gray-500">
<span>Posted by <span class="font-medium text-blue-700 dark:text-blue-300">WeatherGeek</span></span>
<span class="mx-3 text-gray-400 dark:text-gray-500">|</span>
<span>24 Replies</span>
<span class="ml-auto flex items-center">
<svg class="w-5 h-5 mr-1 text-gray-500 dark:text-gray-400" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
48 Likes
</span>
</div>
</article>
</div>
<!-- Pagination -->
<nav class="mt-8 flex justify-center" aria-label="Pagination">
<ul class="flex items-center space-x-2">
<li>
<a href="#" class="px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600
bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 transition-colors duration-200
hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
<span class="sr-only">Previous</span>
«
</a>
</li>
<li>
<a href="#" class="px-3 py-2 rounded-md border border-blue-500 dark:border-blue-600
bg-blue-500 dark:bg-blue-600 text-white font-medium transition-colors duration-200
hover:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
1
</a>
</li>
<li>
<a href="#" class="px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600
bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 transition-colors duration-200
hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
2
</a>
</li>
<li>
<a href="#" class="px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600
bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 transition-colors duration-200
hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
3
</a>
</li>
<li>
<a href="#" class="px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600
bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 transition-colors duration-200
hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
<span class="sr-only">Next</span>
»
</a>
</li>
</ul>
</nav>
</main>
</div>
</div>Composants associés
Volet Forum communautaire
Un composant de forum communautaire réactif et interactif avec le style de conception Neumorphism, adapté aux sites Web d’entreprise/d’entreprise, prenant en charge les thèmes clairs et sombres.
Volet Forum communautaire
Composant de forum communautaire conçu avec des éléments skeuomorphes, avec un design réactif, la prise en charge du thème sombre et des images d’avatar et d’espace réservé.
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.