Neumorphic_Forum_Dashboard
포레스트/그린 색상 팔레트가 있는 간단하고 반응이 빠른 뉴모픽 대시보드 구성 요소로, 포럼 및 커뮤니티 플랫폼용으로 설계되었으며 다크 모드 지원이 포함되어 있습니다.
HTML 코드
<div class="min-h-screen bg-gradient-to-br from-green-50 to-green-100 text-gray-800 dark:from-gray-900 dark:to-gray-800 dark:text-gray-200 p-4 sm:p-6 lg:p-8 flex items-center justify-center font-sans">
<div class="w-full max-w-4xl">
<!-- Main Neumorphic Card -->
<div class="bg-gradient-to-br from-green-100 to-green-200 dark:from-gray-800 dark:to-gray-700 shadow-xl shadow-green-200/50 dark:shadow-gray-950/50 rounded-3xl p-6 sm:p-8 md:p-10 transition-all duration-300 ease-in-out">
<h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-green-800 dark:text-green-300 mb-6 text-center">Forum Dashboard</h1>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Discussions Card -->
<div class="bg-green-100 dark:bg-gray-700 rounded-2xl p-5 shadow-inner shadow-green-50/50 dark:shadow-gray-900/50 transition-all duration-300 ease-in-out hover:shadow-lg hover:shadow-green-200/50 dark:hover:shadow-gray-900/50">
<h2 class="text-xl font-semibold text-green-700 dark:text-green-400 mb-3">Latest Discussions</h2>
<ul class="space-y-3">
<li>
<a href="#" class="block p-3 bg-green-50 dark:bg-gray-600 rounded-xl shadow-md shadow-green-100/50 dark:shadow-gray-800/50 flex items-center group transition-all duration-200 ease-in-out hover:bg-green-100 dark:hover:bg-gray-700 hover:scale-105">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-9 h-9 rounded-full mr-3 border-2 border-green-300 dark:border-green-600">
<span class="flex-1 text-green-800 dark:text-gray-300 group-hover:text-green-900 dark:group-hover:text-green-400 text-sm sm:text-base">"New ideas for community events"</span>
<span class="text-xs text-green-600 dark:text-green-500 ml-2">3h ago</span>
</a>
</li>
<li>
<a href="#" class="block p-3 bg-green-50 dark:bg-gray-600 rounded-xl shadow-md shadow-green-100/50 dark:shadow-gray-800/50 flex items-center group transition-all duration-200 ease-in-out hover:bg-green-100 dark:hover:bg-gray-700 hover:scale-105">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-9 h-9 rounded-full mr-3 border-2 border-green-300 dark:border-green-600">
<span class="flex-1 text-green-800 dark:text-gray-300 group-hover:text-green-900 dark:group-hover:text-green-400 text-sm sm:text-base">"Feedback on the new forum features"</span>
<span class="text-xs text-green-600 dark:text-green-500 ml-2">1d ago</span>
</a>
</li>
<li>
<a href="#" class="block p-3 bg-green-50 dark:bg-gray-600 rounded-xl shadow-md shadow-green-100/50 dark:shadow-gray-800/50 flex items-center group transition-all duration-200 ease-in-out hover:bg-green-100 dark:hover:bg-gray-700 hover:scale-105">
<img src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar" class="w-9 h-9 rounded-full mr-3 border-2 border-green-300 dark:border-green-600">
<span class="flex-1 text-green-800 dark:text-gray-300 group-hover:text-green-900 dark:group-hover:text-green-400 text-sm sm:text-base">"General chat about web development"</span>
<span class="text-xs text-green-600 dark:text-green-500 ml-2">2d ago</span>
</a>
</li>
</ul>
</div>
<!-- Quick Stats Card -->
<div class="bg-green-100 dark:bg-gray-700 rounded-2xl p-5 shadow-inner shadow-green-50/50 dark:shadow-gray-900/50 transition-all duration-300 ease-in-out hover:shadow-lg hover:shadow-green-200/50 dark:hover:shadow-gray-900/50">
<h2 class="text-xl font-semibold text-green-700 dark:text-green-400 mb-3">Community Stats</h2>
<div class="grid grid-cols-2 gap-4">
<div class="p-4 bg-green-50 dark:bg-gray-600 rounded-xl shadow-md shadow-green-100/50 dark:shadow-gray-800/50 text-center transition-all duration-200 ease-in-out hover:scale-105">
<p class="text-3xl font-bold text-green-800 dark:text-green-300">1,234</p>
<p class="text-sm text-green-700 dark:text-green-400">Total Users</p>
</div>
<div class="p-4 bg-green-50 dark:bg-gray-600 rounded-xl shadow-md shadow-green-100/50 dark:shadow-gray-800/50 text-center transition-all duration-200 ease-in-out hover:scale-105">
<p class="text-3xl font-bold text-green-800 dark:text-green-300">567</p>
<p class="text-sm text-green-700 dark:text-green-400">Active Today</p>
</div>
<div class="p-4 bg-green-50 dark:bg-gray-600 rounded-xl shadow-md shadow-green-100/50 dark:shadow-gray-800/50 text-center transition-all duration-200 ease-in-out hover:scale-105">
<p class="text-3xl font-bold text-green-800 dark:text-green-300">89</p>
<p class="text-sm text-green-700 dark:text-green-400">New Topics</p>
</div>
<div class="p-4 bg-green-50 dark:bg-gray-600 rounded-xl shadow-md shadow-green-100/50 dark:shadow-gray-800/50 text-center transition-all duration-200 ease-in-out hover:scale-105">
<p class="text-3xl font-bold text-green-800 dark:text-green-300">2,456</p>
<p class="text-sm text-green-700 dark:text-green-400">Total Posts</p>
</div>
</div>
</div>
</div>
<!-- Call to Action / Button -->
<div class="mt-8 text-center">
<button class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-green-400 to-green-600 group-hover:from-green-400 group-hover:to-green-600 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 transition-all duration-300 ease-in-out shadow-lg shadow-green-400/50 dark:shadow-green-800/50 active:shadow-inner active:shadow-green-500/50 dark:active:shadow-green-900/50">
<span class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-gradient-to-br from-green-100 to-green-200 dark:from-gray-700 dark:to-gray-600 rounded-md group-hover:from-green-400 group-hover:to-green-600 group-hover:bg-opacity-0">
Start New Discussion
</span>
</button>
</div>
</div>
</div>
</div>관련 구성 요소
Dashboards 구성 요소
포트폴리오 표시를 위해 설계된 간단하고 반응이 빠른 대시보드 구성 요소로, 마이크로 인터랙션을 통해 흙색에 초점을 맞춥니다. Tailwind CSS를 사용하여 어두운 테마를 지원합니다.
Dashboard_Agriculture_ForestGreen_Luxury
농업 및 농업 웹 사이트를 위해 설계된 복잡한 럭셔리 테마의 대시보드 구성 요소로, 우아한 숲/녹색 색상 팔레트와 다크 모드 지원으로 완벽한 응답성을 제공합니다.