Componentes Mapa del sitio Componente de mapa del sitio

Componente de mapa del sitio

Un componente de mapa del sitio al estilo de Material Design para interfaces de redes sociales, con capacidad de respuesta y compatibilidad con el modo oscuro mediante Tailwind CSS. Incorpora tonos tierra y complejidad media para plataformas de redes sociales.

Vista previa

Código HTML

<div class="bg-stone-100 text-stone-800 p-8 dark:bg-stone-800 dark:text-stone-200">
  <div class="container mx-auto">
    <h2 class="text-3xl font-bold mb-6">Site Map</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div>
        <h3 class="text-xl font-semibold mb-4">General</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:underline">Home</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">About Us</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Contact</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Blog</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-xl font-semibold mb-4">Account</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:underline">Profile</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Settings</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Privacy</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Security</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-xl font-semibold mb-4">Social</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:underline">Feed</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Messages</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Friends</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Groups</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-xl font-semibold mb-4">Resources</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:underline">Help Center</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">FAQs</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Terms of Service</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Privacy Policy</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Componentes relacionados

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.

Abrir

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.

Abrir

Componente de mapa del sitio

Un componente de mapa del sitio receptivo diseñado para el modo oscuro con colores pastel, adecuado para tableros.

Abrir