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 simple y receptivo con un diseño inspirado en papel/impresión y un esquema de color análogo, adecuado para sitios web industriales/de fabricación, incluida la compatibilidad con el modo oscuro.
Componente de mapa del sitio
Un componente de mapa del sitio diseñado en un estilo brutalista con un tema oscuro, ideal para sitios web comerciales profesionales. Presenta un diseño audaz con elementos interactivos y de alto contraste.
Componente de mapa del sitio
Un componente de mapa del sitio simple y receptivo para aplicaciones de tecnología/SaaS con una interfaz de usuario de modo oscuro y un acento de degradado de arco iris. Optimizado para elementos mínimos y una navegación clara.