Componente de mapa del sitio
Un componente complejo del mapa del sitio que implementa un estilo de diseño de skeuomorfismo con una combinación de colores de tonos tierra, que admite un tema oscuro. Diseñado para fines de blog/contenido con elementos interactivos, utilizando Tailwind CSS.
Código HTML
<div class="bg-green-800 dark:bg-gray-900 p-8 rounded-lg shadow-lg space-y-6">
<h1 class="text-4xl font-bold text-white dark:text-gray-200">Site Map</h1>
<div class="p-6 bg-green-700 dark:bg-gray-800 rounded-lg shadow-md">
<h2 class="text-2xl font-semibold text-yellow-300 dark:text-yellow-400">Blog Sections</h2>
<ul class="space-y-2 mt-4">
<li class="p-4 bg-green-600 dark:bg-gray-700 rounded-md shadow">
<a href="#" class="flex items-center justify-between text-white dark:text-gray-200 hover:text-yellow-200">Home
<span class="text-xs bg-yellow-400 text-gray-800 px-2 rounded">New</span>
</a>
</li>
<li class="p-4 bg-green-600 dark:bg-gray-700 rounded-md shadow">
<a href="#" class="flex items-center justify-between text-white dark:text-gray-200 hover:text-yellow-200">About Us
<span class="text-xs bg-yellow-400 text-gray-800 px-2 rounded">Updated</span>
</a>
</li>
<li class="p-4 bg-green-600 dark:bg-gray-700 rounded-md shadow">
<a href="#" class="flex items-center justify-between text-white dark:text-gray-200 hover:text-yellow-200">Contact
<span class="text-xs bg-yellow-400 text-gray-800 px-2 rounded">New</span>
</a>
</li>
<li class="p-4 bg-green-600 dark:bg-gray-700 rounded-md shadow">
<a href="#" class="flex items-center justify-between text-white dark:text-gray-200 hover:text-yellow-200">Blog Posts
<span class="text-xs bg-yellow-400 text-gray-800 px-2 rounded">10</span>
</a>
</li>
</ul>
</div>
<div class="p-6 bg-green-700 dark:bg-gray-800 rounded-lg shadow-md">
<h2 class="text-2xl font-semibold text-yellow-300 dark:text-yellow-400">Featured Posts</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
<div class="bg-green-600 dark:bg-gray-700 rounded-md shadow p-4">
<img src="https://picsum.photos/200/100?random=1" alt="Featured Post" class="rounded-md mb-2" />
<h3 class="text-lg font-semibold text-white dark:text-gray-200">Post Title 1</h3>
<p class="text-sm text-gray-300 dark:text-gray-400">Brief description of the featured post...</p>
</div>
<div class="bg-green-600 dark:bg-gray-700 rounded-md shadow p-4">
<img src="https://picsum.photos/200/100?random=2" alt="Featured Post" class="rounded-md mb-2" />
<h3 class="text-lg font-semibold text-white dark:text-gray-200">Post Title 2</h3>
<p class="text-sm text-gray-300 dark:text-gray-400">Brief description of the featured post...</p>
</div>
</div>
</div>
<div class="p-6 bg-green-700 dark:bg-gray-800 rounded-lg shadow-md">
<h2 class="text-2xl font-semibold text-yellow-300 dark:text-yellow-400">Team</h2>
<div class="flex space-x-4 mt-4">
<div class="flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Team Member" class="rounded-full w-16 h-16 mb-2" />
<span class="text-white dark:text-gray-200">John Doe</span>
<span class="text-sm text-gray-300 dark:text-gray-400">Role</span>
</div>
<div class="flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Team Member" class="rounded-full w-16 h-16 mb-2" />
<span class="text-white dark:text-gray-200">Jane Doe</span>
<span class="text-sm text-gray-300 dark:text-gray-400">Role</span>
</div>
</div>
</div>
</div>
Componentes relacionados
Componente de mapa del sitio
Un componente de mapa del sitio interactivo diseñado con los principios de Material Design, con diseños basados en cuadrícula, sombras y compatibilidad con el modo oscuro.
Componente Mapa del Sitio - Finanzas Banca
Un componente de mapa del sitio simple y receptivo para interfaces financieras/bancarias, con una interfaz de usuario de modo oscuro con tonos sepia/marrón. Optimizado para computadoras de escritorio, tabletas y dispositivos móviles, con soporte completo para el modo oscuro.
Componente de mapa del sitio
Un componente de mapa del sitio neumórfico con diseño responsivo y compatibilidad con el modo oscuro.