Componente del forum della community
Un complesso componente del forum della community, ispirato alla carta/stampa, per le discussioni sul meteo e sul clima, che utilizza una combinazione di colori complementari e una reattività completa con il supporto della modalità scura.
Codice HTML
<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>Componenti correlati
Componente del forum della community
Componente del forum della comunità con design Glassmorphism, combinazione di colori vibranti, livello di complessità complesso, per scopi di blog/contenuti, design reattivo con supporto per temi scuri, utilizzando Tailwind CSS.
Componente del forum della community
Un semplice componente del forum della comunità con una combinazione di colori pastello, influenze del Material Design e supporto per la modalità scura. Dispone di un layout reattivo per il consumo di blog/contenuti.
Componente del forum di finanza Art Deco
Un componente semplice e reattivo del forum della community, progettato in uno stile Art Déco tenue, adatto per interfacce finanziarie e bancarie, con supporto per la modalità oscura.