사이트 맵 구성 요소
단색 색 구성표를 사용하여 소셜 미디어 인터페이스용으로 설계된 레트로/빈티지 사이트 맵 구성 요소입니다. 더 나은 가독성과 미적 매력을 위해 어두운 테마의 간단한 레이아웃이 특징입니다.
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>관련 구성 요소
사이트 맵 구성 요소
glassmorphism으로 설계된 반응형 사이트 맵 구성 요소로, 반투명 유리와 같은 반투명 효과와 흐림 효과를 특징으로 하여 작업 또는 제품을 보여주는 포트폴리오를 제공합니다. 어두운 테마를 지원하고 보색을 사용하면서 적당한 복잡성을 유지합니다.
사이트 맵 구성 요소
포트폴리오를 위한 단순하고 생생한 3D에서 영감을 받은 사이트 맵 구성 요소로, Tailwind CSS를 사용하여 반응형 디자인과 다크 모드를 지원합니다.