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 구성 요소
스위스/국제 타이포그래피 스타일로 디자인된 간단하고 깔끔하며 반응이 빠른 커뮤니티 포럼 구성 요소로, 미묘한 멀티 컬러 그라디언트 및 다크 모드 지원을 특징으로 하며 비즈니스/기업 웹 사이트에 적합합니다.
Community Forum 구성 요소
Tailwind CSS로 구축된 소셜 미디어 목적을 위해 Skeuomorphism 디자인, 트라이어드 색 구성표 및 단순 복잡성을 갖춘 커뮤니티 포럼 구성 요소입니다. 반응형 디자인과 어두운 테마 지원이 포함됩니다.
Community Forum 구성 요소
스큐어모픽 요소로 디자인된 커뮤니티 포럼 구성 요소로, 반응형 디자인, 어두운 테마 지원, 아바타 및 플레이스홀더 이미지를 제공합니다.