Community Forum 구성 요소
부동산 플랫폼을 위한 간단한 사이버펑크 테마의 커뮤니티 포럼 구성 요소로, 어두운 배경, 네온 액센트, 다크 모드를 지원하는 반응형 디자인을 특징으로 합니다.
HTML 코드
<div class="font-sans bg-gray-950 text-gray-100 dark:bg-black p-4 sm:p-6 lg:p-8 rounded-lg shadow-lg border border-purple-800 dark:border-pink-700 max-w-4xl mx-auto neon-shadow">
<h2 class="text-2xl sm:text-3xl font-bold text-teal-400 dark:text-lime-400 mb-6 text-center tracking-wide uppercase leading-tight">
<span class="block">CYBERPUNK CONCLAVE</span>
<span class="block text-lg text-purple-400 dark:text-pink-400">// REAL ESTATE MATRIX //</span>
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<div class="bg-opacity-20 bg-blue-700 dark:bg-purple-700 p-4 rounded-md border border-b-2 border-blue-500 dark:border-purple-500 hover:border-blue-300 dark:hover:border-purple-300 transition-colors duration-300">
<h3 class="text-xl font-semibold text-blue-300 dark:text-purple-300 mb-2 ">Discussion Channels</h3>
<ul class="space-y-2 text-sm">
<li class="flex items-center text-gray-200 hover:text-teal-400 dark:hover:text-lime-400 transition-colors duration-200">
<svg class="w-4 h-4 mr-2 text-cyan-400 dark:text-fuchsia-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="M7 8h10M7 12h4m1.293 7.707A9 9 0 0110 21h4a9 9 0 00-9.707-16.707A9 9 0 007 8z"></path></svg>
General Property Chatter
</li>
<li class="flex items-center text-gray-200 hover:text-teal-400 dark:hover:text-lime-400 transition-colors duration-200">
<svg class="w-4 h-4 mr-2 text-cyan-400 dark:text-fuchsia-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="M7 8h10M7 12h4m1.293 7.707A9 9 0 0110 21h4a9 9 0 00-9.707-16.707A9 9 0 007 8z"></path></svg>
Investment Strategies
</li>
<li class="flex items-center text-gray-200 hover:text-teal-400 dark:hover:text-lime-400 transition-colors duration-200">
<svg class="w-4 h-4 mr-2 text-cyan-400 dark:text-fuchsia-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="M7 8h10M7 12h4m1.293 7.707A9 9 0 0110 21h4a9 9 0 00-9.707-16.707A9 9 0 007 8z"></path></svg>
Market Trends & Predictions
</li>
<li class="flex items-center text-gray-200 hover:text-teal-400 dark:hover:text-lime-400 transition-colors duration-200">
<svg class="w-4 h-4 mr-2 text-cyan-400 dark:text-fuchsia-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="M7 8h10M7 12h4m1.293 7.707A9 9 0 0110 21h4a9 9 0 00-9.707-16.707A9 9 0 007 8z"></path></svg>
Legal & Compliance
</li>
</ul>
</div>
<div class="bg-opacity-20 bg-purple-700 dark:bg-blue-700 p-4 rounded-md border border-b-2 border-purple-500 dark:border-blue-500 hover:border-purple-300 dark:hover:border-blue-300 transition-colors duration-300">
<h3 class="text-xl font-semibold text-purple-300 dark:text-blue-300 mb-2">Featured Threads</h3>
<ul class="space-y-3 text-sm">
<li class="flex items-center text-gray-200">
<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-6 h-6 rounded-full mr-3 border border-pink-400 dark:border-lime-400">
<a href="#" class="text-gray-100 hover:text-pink-400 dark:hover:text-lime-400 transition-colors duration-200">
"Optimized Smart Homes of 2077" <span class="text-xs text-gray-400">by DataGhost</span>
</a>
</li>
<li class="flex items-center text-gray-200">
<img src="https://randomuser.me/api/portraits/women/62.jpg" alt="User Avatar" class="w-6 h-6 rounded-full mr-3 border border-pink-400 dark:border-lime-400">
<a href="#" class="text-gray-100 hover:text-pink-400 dark:hover:text-lime-400 transition-colors duration-200">
"Neo-Tokyo District Price Forecast" <span class="text-xs text-gray-400">by Synthia_X</span>
</a>
</li>
<li class="flex items-center text-gray-200">
<img src="https://randomuser.me/api/portraits/men/12.jpg" alt="User Avatar" class="w-6 h-6 rounded-full mr-3 border border-pink-400 dark:border-lime-400">
<a href="#" class="text-gray-100 hover:text-pink-400 dark:hover:text-lime-400 transition-colors duration-200">
"AI-Powered Property Management" <span class="text-xs text-gray-400">by CyberBroker</span>
</a>
</li>
</ul>
</div>
</div>
<div class="flex flex-col sm:flex-row justify-between items-center bg-opacity-20 bg-gray-700 dark:bg-gray-800 p-4 rounded-md border border-gray-600 dark:border-gray-700">
<p class="mb-4 sm:mb-0 text-sm text-gray-300 dark:text-gray-400">
<span class="text-teal-400 dark:text-lime-400">1,245 Members Active</span> // 42 New Posts Today
</p>
<button class="flex items-center px-6 py-2 bg-gradient-to-r from-blue-600 to-purple-600 dark:from-pink-600 dark:to-fuchsia-600 text-white rounded-full font-semibold
shadow-lg hover:shadow-cyan-500/50 dark:hover:shadow-lime-500/50 transition-all duration-300
transform hover:-translate-y-0.5 glow-button">
<svg class="w-5 h-5 mr-2" 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 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
NEW THREAD
</button>
</div>
<style>
/* This is for the 'neon-shadow' and 'glow-button' effects */
.neon-shadow {
box-shadow:
0 0 5px rgba(59, 130, 246, 0.7),
0 0 10px rgba(168, 85, 247, 0.7),
0 0 15px rgba(59, 130, 246, 0.5),
0 0 20px rgba(168, 85, 247, 0.5);
}
.dark .neon-shadow {
box-shadow:
0 0 5px rgba(236, 72, 153, 0.7),
0 0 10px rgba(139, 92, 246, 0.7),
0 0 15px rgba(236, 72, 153, 0.5),
0 0 20px rgba(139, 92, 246, 0.5);
}
.glow-button {
position: relative;
overflow: hidden;
z-index: 1;
}
.glow-button:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgba(59, 130, 246, 0.6) 0%, rgba(168, 85, 247, 0.6) 100%);
mix-blend-mode: overlay;
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}
.dark .glow-button:before {
background: linear-gradient(45deg, rgba(236, 72, 153, 0.6) 0%, rgba(139, 92, 246, 0.6) 100%);
}
.glow-button:hover:before {
opacity: 1;
}
.glow-button:active {
transform: scale(0.98);
box-shadow: none;
}
</style>
</div>관련 구성 요소
Community Forum 구성 요소
스큐어모피즘(Skeuomorphism) 스타일과 음소거/채도가 낮은 색 구성표로 설계된 반응형 커뮤니티 포럼 구성 요소로, 다크 모드 지원을 포함하여 정부/공개 웹 사이트에 적합합니다.
커뮤니티 포럼 구성 요소(E-commerce Bauhaus)
전자 상거래를 위해 설계된 간단하고 반응이 빠른 커뮤니티 포럼 구성 요소로, Bauhaus에서 영감을 받은 기하학적 형태와 차분한 색상 팔레트를 특징으로 합니다. 다크 모드 지원이 포함됩니다.
Community Forum 구성 요소
그라데이션 전환이 있는 간단하고 활기찬 커뮤니티 포럼 구성 요소로, 엔터테인먼트/미디어 플랫폼을 위해 설계되었습니다. 다크 모드를 지원하는 반응형 레이아웃이 특징입니다.