Community Forum 구성 요소
날씨 및 기후 토론을 위한 종이/인쇄물에서 영감을 받은 복잡한 커뮤니티 포럼 구성 요소로, 보색 구성표와 다크 모드 지원으로 완전한 응답성을 사용합니다.
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>관련 구성 요소
Community Forum 구성 요소
커뮤니티 포럼 Glassmorphism 디자인, 생생한 색 구성표, 복잡한 복잡성 수준, 블로그/콘텐츠 목적, 어두운 테마를 지원하는 반응형 디자인, Tailwind CSS 사용
커뮤니티 포럼 구성 요소 9
커뮤니티 포럼 구성 요소로, 젖빛 유리와 같은 반투명 요소, 반응형 효과 및 어두운 테마 지원이 있는 glassmorphism 디자인을 특징으로 합니다.
Community Forum 구성 요소
레트로/빈티지 Community Forum 생동감 넘치는 색 구성표로 전자 상거래를 위한 구성 요소입니다. 어두운 테마를 지원하는 반응형 디자인.