사이트 맵 구성 요소
단색 색 구성표를 사용하여 소셜 미디어 인터페이스용으로 설계된 레트로/빈티지 사이트 맵 구성 요소입니다. 더 나은 가독성과 미적 매력을 위해 어두운 테마의 간단한 레이아웃이 특징입니다.
HTML 코드
<div class="max-w-4xl mx-auto p-6 bg-gray-900 dark:bg-gray-800 rounded-lg shadow-md">
<h1 class="text-4xl text-white font-bold text-center mb-6">Site Map</h1>
<ul class="list-disc list-inside space-y-4">
<li class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile Picture" class="w-12 h-12 rounded-full border-2 border-gray-600">
<div>
<a href="#" class="text-white hover:text-gray-400">Home</a>
<p class="text-gray-400 text-sm">Our homepage with latest updates</p>
</div>
</li>
<li class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Profile Picture" class="w-12 h-12 rounded-full border-2 border-gray-600">
<div>
<a href="#" class="text-white hover:text-gray-400">Profile</a>
<p class="text-gray-400 text-sm">Your personal profile page</p>
</div>
</li>
<li class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/33.jpg" alt="Profile Picture" class="w-12 h-12 rounded-full border-2 border-gray-600">
<div>
<a href="#" class="text-white hover:text-gray-400">Messages</a>
<p class="text-gray-400 text-sm">View your messages</p>
</div>
</li>
<li class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Profile Picture" class="w-12 h-12 rounded-full border-2 border-gray-600">
<div>
<a href="#" class="text-white hover:text-gray-400">Settings</a>
<p class="text-gray-400 text-sm">Manage your account settings</p>
</div>
</li>
</ul>
<div class="mt-6">
<h2 class="text-2xl text-white font-bold mb-2">Gallery</h2>
<div class="grid grid-cols-2 gap-4">
<img src="https://picsum.photos/200/200?random=1" alt="Gallery Image 1" class="rounded-lg">
<img src="https://picsum.photos/200/200?random=2" alt="Gallery Image 2" class="rounded-lg">
<img src="https://picsum.photos/200/200?random=3" alt="Gallery Image 3" class="rounded-lg">
<img src="https://picsum.photos/200/200?random=4" alt="Gallery Image 4" class="rounded-lg">
</div>
</div>
</div>