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 구성 요소
Brutalism 스타일로 디자인된 커뮤니티 포럼 구성 요소로, 생생한 색 구성표가 있어 전자 상거래 경험에 적합합니다. 여기에는 게시물, 댓글 및 사용자 프로필과 같은 다양한 대화형 요소가 포함되어 있으며, 모두 어두운 테마를 지원하는 반응형 디자인을 위해 Tailwind CSS로 스타일이 지정되었습니다.
Community Forum 구성 요소
다크 모드를 지원하는 미니멀리스트 커뮤니티 포럼 구성 요소입니다. 이 구성 요소는 포트폴리오용으로 설계되었으며 흙색 색상의 간단한 레이아웃을 특징으로 합니다.
Community Forum 구성 요소
머티리얼 디자인 원칙을 활용하는 간단한 커뮤니티 포럼 구성 요소로, 어스 톤 색 구성표와 함께 블로그 콘텐츠 소비에 맞게 조정되고 다크 모드 지원을 위한 반응형 디자인입니다.