아르데코 소셜 대시보드
데이트/소셜 플랫폼을 위한 중간 정도의 복잡성 대시보드 구성 요소로, 차분한/채도가 낮은 색상과 완전한 반응성을 갖춘 아르데코 디자인 스타일을 특징으로 합니다. 프로필 카드, 활동 피드 및 탐색이 포함되며 다크 모드가 지원됩니다.
HTML 코드
<div class="min-h-screen bg-stone-100 text-stone-800 font-serif dark:bg-stone-900 dark:text-stone-200 p-4 sm:p-6 lg:p-8">
<!-- Header -->
<header class="flex justify-between items-center mb-8 px-4 py-3 bg-stone-200 dark:bg-stone-800 shadow-md rounded-lg border border-stone-300 dark:border-stone-700">
<h1 class="text-2xl sm:text-3xl font-bold tracking-wider text-amber-800 dark:text-amber-500 uppercase">
<span class="hidden sm:inline">The</span> Social Soiree
</h1>
<div class="flex items-center space-x-4">
<a href="#" class="text-stone-700 dark:text-stone-300 hover:text-amber-800 dark:hover:text-amber-500 transition-colors duration-200">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path></svg>
</a>
<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-9 h-9 sm:w-10 sm:h-10 rounded-full border-2 border-amber-600 dark:border-amber-400 object-cover">
</div>
</header>
<!-- Main Content Area -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Left Sidebar / Navigation -->
<aside class="lg:col-span-1">
<nav class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700">
<ul class="space-y-4">
<li>
<a href="#" class="flex items-center space-x-3 text-lg text-stone-700 dark:text-stone-300 hover:text-amber-800 dark:hover:text-amber-500 transition-colors duration-200 group">
<svg class="w-6 h-6 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
<span>Dashboard</span>
</a>
</li>
<li>
<a href="#" class="flex items-center space-x-3 text-lg text-stone-700 dark:text-stone-300 hover:text-amber-800 dark:hover:text-amber-500 transition-colors duration-200 group">
<svg class="w-6 h-6 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>
<span>My Profile</span>
</a>
</li>
<li>
<a href="#" class="flex items-center space-x-3 text-lg text-stone-700 dark:text-stone-300 hover:text-amber-800 dark:hover:text-amber-500 transition-colors duration-200 group">
<svg class="w-6 h-6 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3 1h6v4H5V6zm6 6H5v2h6v-2zm7-2h-4v2h4V9zm-4-3h4v2h-4V6z" clip-rule="evenodd"></path></svg>
<span>Messages <span class="ml-2 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white bg-amber-600 rounded-full">3</span></span>
</a>
</li>
<li>
<a href="#" class="flex items-center space-x-3 text-lg text-stone-700 dark:text-stone-300 hover:text-amber-800 dark:hover:text-amber-500 transition-colors duration-200 group">
<svg class="w-6 h-6 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8c1.684 0 3.238-.606 4.455-1.621A4.004 4.004 0 0010.518 8H10a2 2 0 00-2 2H6a2 2 0 00-2-2h-.518C3.238 6.606 1.684 6 0 6s0 2 0 2h.518c.225-.972.637-1.895 1.13-2.732a3.996 3.996 0 015.352-1.282A4.004 4.004 0 008 4zM10 14a6 6 0 000-12H8a6 6 0 000 12h2zm-2 2a2 2 0 100-4 2 2 0 000 4zM12 4a4 4 0 100 8c1.684 0 3.238-.606 4.455-1.621A4.004 4.004 0 0014.518 8H14a2 2 0 00-2 2h-2a2 2 0 00-2-2h-.518C1.238 6.606 0 6 0 6s0 2 0 2h.518c.225-.972.637-1.895 1.13-2.732a3.996 3.996 0 015.352-1.282A4.004 4.004 0 008 4z" clip-rule="evenodd"></path></svg>
<span>Matches</span>
</a>
</li>
<li>
<a href="#" class="flex items-center space-x-3 text-lg text-stone-700 dark:text-stone-300 hover:text-amber-800 dark:hover:text-amber-500 transition-colors duration-200 group">
<svg class="w-6 h-6 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112.7 1.9L16 5.2a1 1 0 010 1.4L12.7 9.8a1 1 0 01-1.4-1.4L13.59 7H7a1 1 0 110-2h6.59l-2.29-2.29a1 1 0 010-1.414zM2 11h14a1 1 0 010 2H2a1 1 0 010-2z" clip-rule="evenodd"></path></svg>
<span>Settings</span>
</a>
</li>
</ul>
</nav>
</aside>
<!-- Main Content / Profile Cards & Activity Feed -->
<main class="lg:col-span-2 space-y-8">
<!-- Discover New Profiles -->
<section class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700">
<h2 class="text-xl sm:text-2xl font-bold mb-6 text-amber-800 dark:text-amber-500 border-b-2 border-amber-600 dark:border-amber-400 pb-2">
Discover New Profiles
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- Profile Card 1 -->
<div class="bg-stone-300 dark:bg-stone-700 rounded-lg shadow-inner overflow-hidden transform hover:scale-105 transition-transform duration-300 border-2 border-stone-400 dark:border-stone-600">
<img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Profile Image" class="w-full h-40 object-cover border-b-2 border-amber-600 dark:border-amber-400">
<div class="p-4 text-center relative">
<h3 class="text-lg font-semibold text-stone-900 dark:text-stone-100">Alice, 28</h3>
<p class="text-sm text-stone-700 dark:text-stone-300">Creative Soul</p>
<div class="mt-3 flex justify-center space-x-2">
<button class="p-2 rounded-full bg-amber-600 dark:bg-amber-400 text-white dark:text-stone-900 hover:bg-amber-700 dark:hover:bg-amber-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
</button>
<button class="p-2 rounded-full bg-stone-500 dark:bg-stone-600 text-white hover:bg-stone-600 dark:hover:bg-stone-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.214 3.737C8.423 4.298 7.551 4.707 6.643 4.977l-.608-.608c-.768-.768-2.146-.768-2.914 0-.768.768-.768 2.146 0 2.914l.608.608C3.707 7.551 4.298 8.423 4.859 9.214L10 14.355l5.141-5.141C15.702 8.449 16.293 7.577 16.643 6.669l.608-.608c.768-.768.768-2.146 0-2.914-.768-.768-2.146-.768-2.914 0l-.608.608C12.449 3.707 11.577 3.298 10.786 2.737L10 2.102l-.786.635z" /></svg>
</button>
</div>
</div>
</div>
<!-- Profile Card 2 -->
<div class="bg-stone-300 dark:bg-stone-700 rounded-lg shadow-inner overflow-hidden transform hover:scale-105 transition-transform duration-300 border-2 border-stone-400 dark:border-stone-600">
<img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Profile Image" class="w-full h-40 object-cover border-b-2 border-amber-600 dark:border-amber-400">
<div class="p-4 text-center relative">
<h3 class="text-lg font-semibold text-stone-900 dark:text-stone-100">Ben, 31</h3>
<p class="text-sm text-stone-700 dark:text-stone-300">Adventurer</p>
<div class="mt-3 flex justify-center space-x-2">
<button class="p-2 rounded-full bg-amber-600 dark:bg-amber-400 text-white dark:text-stone-900 hover:bg-amber-700 dark:hover:bg-amber-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
</button>
<button class="p-2 rounded-full bg-stone-500 dark:bg-stone-600 text-white hover:bg-stone-600 dark:hover:bg-stone-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.214 3.737C8.423 4.298 7.551 4.707 6.643 4.977l-.608-.608c-.768-.768-2.146-.768-2.914 0-.768.768-.768 2.146 0 2.914l.608.608C3.707 7.551 4.298 8.423 4.859 9.214L10 14.355l5.141-5.141C15.702 8.449 16.293 7.577 16.643 6.669l.608-.608c.768-.768.768-2.146 0-2.914-.768-.768-2.146-.768-2.914 0l-.608.608C12.449 3.707 11.577 3.298 10.786 2.737L10 2.102l-.786.635z" /></svg>
</button>
</div>
</div>
</div>
<!-- Profile Card 3 (hidden on smaller screens) -->
<div class="hidden lg:block bg-stone-300 dark:bg-stone-700 rounded-lg shadow-inner overflow-hidden transform hover:scale-105 transition-transform duration-300 border-2 border-stone-400 dark:border-stone-600">
<img src="https://randomuser.me/api/portraits/women/15.jpg" alt="Profile Image" class="w-full h-40 object-cover border-b-2 border-amber-600 dark:border-amber-400">
<div class="p-4 text-center relative">
<h3 class="text-lg font-semibold text-stone-900 dark:text-stone-100">Chloe, 26</h3>
<p class="text-sm text-stone-700 dark:text-stone-300">Musician</p>
<div class="mt-3 flex justify-center space-x-2">
<button class="p-2 rounded-full bg-amber-600 dark:bg-amber-400 text-white dark:text-stone-900 hover:bg-amber-700 dark:hover:bg-amber-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
</button>
<button class="p-2 rounded-full bg-stone-500 dark:bg-stone-600 text-white hover:bg-stone-600 dark:hover:bg-stone-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.214 3.737C8.423 4.298 7.551 4.707 6.643 4.977l-.608-.608c-.768-.768-2.146-.768-2.914 0-.768.768-.768 2.146 0 2.914l.608.608C3.707 7.551 4.298 8.423 4.859 9.214L10 14.355l5.141-5.141C15.702 8.449 16.293 7.577 16.643 6.669l.608-.608c.768-.768.768-2.146 0-2.914-.768-.768-2.146-.768-2.914 0l-.608.608C12.449 3.707 11.577 3.298 10.786 2.737L10 2.102l-.786.635z" /></svg>
</button>
</div>
</div>
</div>
<!-- Profile Card 4 (hidden on smaller screens) -->
<div class="hidden xl:block bg-stone-300 dark:bg-stone-700 rounded-lg shadow-inner overflow-hidden transform hover:scale-105 transition-transform duration-300 border-2 border-stone-400 dark:border-stone-600">
<img src="https://randomuser.me/api/portraits/women/88.jpg" alt="Profile Image" class="w-full h-40 object-cover border-b-2 border-amber-600 dark:border-amber-400">
<div class="p-4 text-center relative">
<h3 class="text-lg font-semibold text-stone-900 dark:text-stone-100">Diana, 29</h3>
<p class="text-sm text-stone-700 dark:text-stone-300">Philosopher</p>
<div class="mt-3 flex justify-center space-x-2">
<button class="p-2 rounded-full bg-amber-600 dark:bg-amber-400 text-white dark:text-stone-900 hover:bg-amber-700 dark:hover:bg-amber-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
</button>
<button class="p-2 rounded-full bg-stone-500 dark:bg-stone-600 text-white hover:bg-stone-600 dark:hover:bg-stone-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.214 3.737C8.423 4.298 7.551 4.707 6.643 4.977l-.608-.608c-.768-.768-2.146-.768-2.914 0-.768.768-.768 2.146 0 2.914l.608.608C3.707 7.551 4.298 8.423 4.859 9.214L10 14.355l5.141-5.141C15.702 8.449 16.293 7.577 16.643 6.669l.608-.608c.768-.768.768-2.146 0-2.914-.768-.768-2.146-.768-2.914 0l-.608.608C12.449 3.707 11.577 3.298 10.786 2.737L10 2.102l-.786.635z" /></svg>
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Recent Activity Feed -->
<section class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700">
<h2 class="text-xl sm:text-2xl font-bold mb-6 text-amber-800 dark:text-amber-500 border-b-2 border-amber-600 dark:border-amber-400 pb-2">
Recent Activity
</h2>
<div class="space-y-6">
<!-- Activity Item 1 -->
<div class="flex items-start space-x-4 pb-4 border-b border-stone-300 dark:border-stone-700 last:border-b-0 last:pb-0">
<img src="https://randomuser.me/api/portraits/women/7.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-amber-600 dark:border-amber-400 object-cover">
<div class="flex-1">
<p class="text-stone-900 dark:text-stone-100"><span class="font-semibold">Sophia</span> liked your profile.</p>
<span class="text-xs text-stone-600 dark:text-stone-400">2 hours ago</span>
</div>
</div>
<!-- Activity Item 2 -->
<div class="flex items-start space-x-4 pb-4 border-b border-stone-300 dark:border-stone-700 last:border-b-0 last:pb-0">
<img src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-amber-600 dark:border-amber-400 object-cover">
<div class="flex-1">
<p class="text-stone-900 dark:text-stone-100"><span class="font-semibold">Leo</span> sent you a new message.</p>
<span class="text-xs text-stone-600 dark:text-stone-400">4 hours ago</span>
</div>
</div>
<!-- Activity Item 3 -->
<div class="flex items-start space-x-4 pb-4 border-b border-stone-300 dark:border-stone-700 last:border-b-0 last:pb-0">
<img src="https://randomuser.me/api/portraits/women/33.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-amber-600 dark:border-amber-400 object-cover">
<div class="flex-1">
<p class="text-stone-900 dark:text-stone-100"><span class="font-semibold">Isabella</span> viewed your profile.</p>
<span class="text-xs text-stone-600 dark:text-stone-400">1 day ago</span>
</div>
</div>
</div>
</section>
</main>
</div>
</div>관련 구성 요소
Dashboards 구성 요소
포트폴리오 표시를 위해 설계된 간단하고 반응이 빠른 대시보드 구성 요소로, 마이크로 인터랙션을 통해 흙색에 초점을 맞춥니다. Tailwind CSS를 사용하여 어두운 테마를 지원합니다.
Dashboards 구성 요소
Tailwind CSS를 사용하여 구축된 마이크로 인터랙션과 트라이어딕 색 구성표를 특징으로 하는 소셜 미디어 애플리케이션을 위한 반응형 대시보드 구성 요소입니다.