Компонент карты сайта
Компонент карты сайта в стиле ретро/винтаж, разработанный для интерфейсов социальных сетей, с использованием монохроматической цветовой схемы. Он отличается простой версткой с темной темой для лучшей читабельности и эстетической привлекательности.
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>Связанные компоненты
Retro_Healthcare_Sitemap_Component
Простой, отзывчивый компонент карты сайта с ретро/винтажной эстетикой, аналогичной цветовой схемой, подходящий для приложений здравоохранения, включая поддержку темного режима.
Компонент карты сайта
Адаптивный компонент карты сайта с микровзаимодействиями, пастельной цветовой гаммой и поддержкой темной темы, подходящий для веб-сайтов электронной коммерции. Он включает в себя заголовок, строку поиска и несколько категорий со ссылками.
Компонент карты сайта
Сложный, адаптивный компонент карты сайта с корпоративным/профессиональным стилем и цветовой гаммой земляных тонов, подходящий для бизнес-сайтов. Включает поддержку темного режима.