커뮤니티 포럼 구성 요소 - Glassmorphism E-commerce
전자 상거래를 위한 glassmorphism 스타일의 커뮤니티 포럼 구성 요소로, 반투명 요소, 흐림 효과 및 트라이어딕 색 구성표를 특징으로 합니다. 다크 모드 지원으로 반응형.
HTML 코드
<div class="min-h-screen bg-gradient-to-br from-blue-300 via-pink-300 to-purple-400 dark:from-gray-900 dark:via-blue-950 dark:to-purple-950 p-4 sm:p-8 flex items-center justify-center font-sans">
<div class="w-full max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
<!-- Left Panel: Categories / Navigation -->
<div class="md:col-span-1 bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-3xl shadow-xl border border-white border-opacity-30 p-6 sm:p-8 dark:bg-gray-800 dark:bg-opacity-30 dark:border-gray-700 dark:border-opacity-50 flex flex-col space-y-6">
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-4 drop-shadow-md">Forum Categories</h2>
<nav class="space-y-3">
<a href="#" class="flex items-center space-x-3 p-3 rounded-xl hover:bg-white hover:bg-opacity-30 transition duration-300 dark:hover:bg-gray-700 dark:hover:bg-opacity-40">
<svg class="h-6 w-6 text-gray-800 dark:text-gray-100" 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="M9.75 17L9 20l-1 1h8l-1-1l-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
<span class="text-lg font-medium text-gray-800 dark:text-gray-100">General Discussion</span>
</a>
<a href="#" class="flex items-center space-x-3 p-3 rounded-xl hover:bg-white hover:bg-opacity-30 transition duration-300 dark:hover:bg-gray-700 dark:hover:bg-opacity-40">
<svg class="h-6 w-6 text-gray-800 dark:text-gray-100" 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="M7 4v16M17 4v16M3 8h4m-4 8h4m10-8h4m-4 8h4M7 8a4 4 0 11-8 0 4 4 0 018 0zM17 8a4 4 0 11-8 0 4 4 0 018 0zM7 16a4 4 0 11-8 0 4 4 0 018 0zM17 16a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
<span class="text-lg font-medium text-gray-800 dark:text-gray-100">Product Reviews</span>
</a>
<a href="#" class="flex items-center space-x-3 p-3 rounded-xl hover:bg-white hover:bg-opacity-30 transition duration-300 dark:hover:bg-gray-700 dark:hover:bg-opacity-40">
<svg class="h-6 w-6 text-gray-800 dark:text-gray-100" 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="M12 8c-1.657 0-3 .895-3 2v2.219a2 2 0 00.5 1.625l1.625 1.625A2 2 0 0113.219 20H18a2 2 0 002-2V7.89l-3.24-3.24M12 8V7a4 4 0 00-4-4H5a2 2 0 00-2 2v3a2 2 0 002 2h3a2 2 0 002-2zM18 10a2 2 0 012-2h1a2 2 0 012 2v3a2 2 0 01-2 2h-1a2 2 0 01-2-2z"></path></svg>
<span class="text-lg font-medium text-gray-800 dark:text-gray-100">Technical Support</span>
</a>
<a href="#" class="flex items-center space-x-3 p-3 rounded-xl hover:bg-white hover:bg-opacity-30 transition duration-300 dark:hover:bg-gray-700 dark:hover:bg-opacity-40">
<svg class="h-6 w-6 text-gray-800 dark:text-gray-100" 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="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path></svg>
<span class="text-lg font-medium text-gray-800 dark:text-gray-100">Shopping Tips & Deals</span>
</a>
<a href="#" class="flex items-center space-x-3 p-3 rounded-xl bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-40">
<svg class="h-6 w-6 text-gray-800 dark:text-gray-100" 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
<span class="text-lg font-medium text-gray-800 dark:text-gray-100">New Topic</span>
</a>
</nav>
<div class="mt-auto">
<p class="text-sm text-gray-700 dark:text-gray-300">Community Guidelines & Rules</p>
<a href="#" class="text-blue-700 dark:text-blue-400 hover:underline text-sm">Read More</a>
</div>
</div>
<!-- Main Content: Forum Topics -->
<div class="md:col-span-2 bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-3xl shadow-xl border border-white border-opacity-30 p-6 sm:p-8 dark:bg-gray-800 dark:bg-opacity-30 dark:border-gray-700 dark:border-opacity-50 flex flex-col space-y-6">
<h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-4 drop-shadow-md">Recent Discussions</h2>
<!-- Search and Filter -->
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 mb-4">
<input type="text" placeholder="Search discussions..." class="flex-1 p-3 rounded-xl bg-white bg-opacity-40 border border-white border-opacity-50 text-gray-900 placeholder-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:bg-opacity-50 dark:border-gray-600 dark:text-gray-100 dark:placeholder-gray-400">
<select class="p-3 rounded-xl bg-white bg-opacity-40 border border-white border-opacity-50 text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:bg-opacity-50 dark:border-gray-600 dark:text-gray-100">
<option>Sort by: Latest</option>
<option>Sort by: Popular</option>
<option>Sort by: Unanswered</option>
</select>
</div>
<!-- Topic List -->
<div class="space-y-4 flex-grow">
<!-- Topic Card 1 -->
<a href="#" class="block p-4 rounded-xl bg-white bg-opacity-30 hover:bg-opacity-50 transition duration-300 border border-white border-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 dark:hover:bg-opacity-60 dark:border-gray-600">
<div class="flex items-center space-x-3 mb-2">
<img class="w-9 h-9 rounded-full object-cover border-2 border-purple-500 dark:border-purple-400" src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar">
<div>
<p class="text-lg font-semibold text-gray-900 dark:text-white">Best Vacuum Cleaner for Pet Hair?</p>
<p class="text-sm text-gray-700 dark:text-gray-300">by SarahL, 2 hours ago in <span class="font-medium text-blue-700 dark:text-blue-400">Product Reviews</span></p>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200 line-clamp-2">Looking for recommendations on a powerful vacuum cleaner that can handle heavy pet shedding. Any suggestions or experiences?</p>
<div class="flex items-center space-x-4 text-sm mt-3 text-gray-700 dark:text-gray-300">
<span class="flex items-center"><svg class="w-4 h-4 mr-1" 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="M7 8h10M7 12h4m1-8v4m-4 8v4m-6-12H4a2 2 0 00-2 2v10a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2H8l-4-4v4z"></path></svg> 24 Replies</span>
<span class="flex items-center"><svg class="w-4 h-4 mr-1" 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><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"></path></svg> 1.2K Views</span>
</div>
</a>
<!-- Topic Card 2 -->
<a href="#" class="block p-4 rounded-xl bg-white bg-opacity-30 hover:bg-opacity-50 transition duration-300 border border-white border-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 dark:hover:bg-opacity-60 dark:border-gray-600">
<div class="flex items-center space-x-3 mb-2">
<img class="w-9 h-9 rounded-full object-cover border-2 border-sky-500 dark:border-sky-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div>
<p class="text-lg font-semibold text-gray-900 dark:text-white">Tips for finding the best online deals</p>
<p class="text-sm text-gray-700 dark:text-gray-300">by DealHunter, 5 hours ago in <span class="font-medium text-purple-700 dark:text-purple-400">Shopping Tips & Deals</span></p>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200 line-clamp-2">Share your secret tips and tricks for snagging the best discounts and promotions online.</p>
<div class="flex items-center space-x-4 text-sm mt-3 text-gray-700 dark:text-gray-300">
<span class="flex items-center"><svg class="w-4 h-4 mr-1" 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="M7 8h10M7 12h4m1-8v4m-4 8v4m-6-12H4a2 2 0 00-2 2v10a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2H8l-4-4v4z"></path></svg> 48 Replies</span>
<span class="flex items-center"><svg class="w-4 h-4 mr-1" 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><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"></path></svg> 2.5K Views</span>
</div>
</a>
<!-- Topic Card 3 -->
<a href="#" class="block p-4 rounded-xl bg-white bg-opacity-30 hover:bg-opacity-50 transition duration-300 border border-white border-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 dark:hover:bg-opacity-60 dark:border-gray-600">
<div class="flex items-center space-x-3 mb-2">
<img class="w-9 h-9 rounded-full object-cover border-2 border-red-500 dark:border-red-400" src="https://randomuser.me/api/portraits/women/15.jpg" alt="User Avatar">
<div>
<p class="text-lg font-semibold text-gray-900 dark:text-white">Trouble with account login after update</p>
<p class="text-sm text-gray-700 dark:text-gray-300">by TechNoob, 1 day ago in <span class="font-medium text-pink-700 dark:text-pink-400">Technical Support</span></p>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200 line-clamp-2">Anyone else having issues logging into their account after the recent website update? Keeps saying invalid credentials.</p>
<div class="flex items-center space-x-4 text-sm mt-3 text-gray-700 dark:text-gray-300">
<span class="flex items-center"><svg class="w-4 h-4 mr-1" 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="M7 8h10M7 12h4m1-8v4m-4 8v4m-6-12H4a2 2 0 00-2 2v10a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2H8l-4-4v4z"></path></svg> 18 Replies</span>
<span class="flex items-center"><svg class="w-4 h-4 mr-1" 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><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"></path></svg> 980 Views</span>
</div>
</a>
</div>
<!-- Pagination -->
<div class="flex justify-center items-center space-x-2 mt-6">
<button class="p-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-white hover:bg-opacity-30 dark:hover:bg-gray-700 dark:hover:bg-opacity-40 transition duration-200">
Previous
</button>
<button class="px-4 py-2 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-50 text-gray-900 dark:text-white font-bold">
1
</button>
<button class="px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-white hover:bg-opacity-30 dark:hover:bg-gray-700 dark:hover:bg-opacity-40 transition duration-200">
2
</button>
<button class="px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-white hover:bg-opacity-30 dark:hover:bg-gray-700 dark:hover:bg-opacity-40 transition duration-200">
3
</button>
<button class="p-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-white hover:bg-opacity-30 dark:hover:bg-gray-700 dark:hover:bg-opacity-40 transition duration-200">
Next
</button>
</div>
</div>
</div>
</div>관련 구성 요소
Community Forum 구성 요소
머티리얼 디자인 원칙을 활용하는 간단한 커뮤니티 포럼 구성 요소로, 어스 톤 색 구성표와 함께 블로그 콘텐츠 소비에 맞게 조정되고 다크 모드 지원을 위한 반응형 디자인입니다.
Brutalist Community Forum 구성 요소
소셜 미디어를 위한 브루탈리즘 스타일의 커뮤니티 포럼 구성 요소는 생생한 색상, 적당한 복잡성 및 다크 모드 지원을 제공합니다. 대담한 타이포그래피, 고대비 요소, 브루탈리즘 디자인의 전형적인 비대칭 레이아웃이 포함된 포럼 게시물 목록이 있습니다. 사용자 아바타, 상호 작용 버튼, 생생한 색상 악센트가 있는 원시적이고 의도적으로 조잡한 미학이 있는 게시물 항목이 포함됩니다.
Art Deco Finance Forum 구성 요소
금융 및 은행 인터페이스에 적합한 차분한 아르데코 스타일로 설계된 간단하고 반응이 빠른 커뮤니티 포럼 구성 요소이며 다크 모드를 지원합니다.