Mapa del sitio

Componente de mapa del sitio

Un componente de mapa del sitio receptivo con microinteracciones, combinación de colores pastel y soporte para temas oscuros, adecuado para sitios web de comercio electrónico. Incluye un encabezado, una barra de búsqueda y varias categorías con enlaces.

Abrir vista previa

                
<div class="bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-900 dark:to-purple-950 min-h-screen p-8">
  <div class="container mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 transform transition duration-300 hover:scale-[1.01]">
    <h1 class="text-4xl font-extrabold text-gray-800 dark:text-white mb-8 text-center">Site Map</h1>

    <!-- Search Bar -->
    <div class="mb-8 relative">
      <input type="text" placeholder="Search sitemap..." class="w-full p-4 pl-12 rounded-full bg-purple-50 dark:bg-gray-700 text-gray-700 dark:text-white focus:outline-none focus:ring-4 focus:ring-purple-200 dark:focus:ring-purple-700 transition duration-300">
      <svg class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="11" cy="11" r="8"></circle>
        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
      </svg>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Category 1 -->
      <div class="bg-purple-100 dark:bg-gray-700 rounded-lg p-6 shadow-md transform transition duration-300 hover:shadow-lg hover:-translate-y-1">
        <h2 class="text-2xl font-semibold text-purple-800 dark:text-purple-300 mb-4">Shop</h2>
        <ul class="space-y-3">
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition duration-200 block">All Products</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition duration-200 block">New Arrivals</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition duration-200 block">Best Sellers</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition duration-200 block">On Sale</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition duration-200 block">Gift Cards</a></li>
        </ul>
      </div>

      <!-- Category 2 -->
      <div class="bg-pink-100 dark:bg-gray-700 rounded-lg p-6 shadow-md transform transition duration-300 hover:shadow-lg hover:-translate-y-1">
        <h2 class="text-2xl font-semibold text-pink-800 dark:text-pink-300 mb-4">My Account</h2>
        <ul class="space-y-3">
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-600 dark:hover:text-pink-400 transition duration-200 block">Dashboard</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-600 dark:hover:text-pink-400 transition duration-200 block">Order History</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-600 dark:hover:text-pink-400 transition duration-200 block">Wishlist</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-600 dark:hover:text-pink-400 transition duration-200 block">Addresses</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-600 dark:hover:text-pink-400 transition duration-200 block">Payment Methods</a></li>
        </ul>
      </div>

      <!-- Category 3 -->
      <div class="bg-blue-100 dark:bg-gray-700 rounded-lg p-6 shadow-md transform transition duration-300 hover:shadow-lg hover:-translate-y-1">
        <h2 class="text-2xl font-semibold text-blue-800 dark:text-blue-300 mb-4">Customer Service</h2>
        <ul class="space-y-3">
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-200 block">Contact Us</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-200 block">FAQs</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-200 block">Shipping & Returns</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-200 block">Privacy Policy</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-200 block">Terms of Service</a></li>
        </ul>
      </div>

      <!-- Category 4 -->
      <div class="bg-green-100 dark:bg-gray-700 rounded-lg p-6 shadow-md transform transition duration-300 hover:shadow-lg hover:-translate-y-1">
        <h2 class="text-2xl font-semibold text-green-800 dark:text-green-300 mb-4">About Us</h2>
        <ul class="space-y-3">
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-green-600 dark:hover:text-green-400 transition duration-200 block">Our Story</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-green-600 dark:hover:text-green-400 transition duration-200 block">Careers</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-green-600 dark:hover:text-green-400 transition duration-200 block">Blog</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-green-600 dark:hover:text-green-400 transition duration-200 block">Press</a></li>
        </ul>
      </div>

      <!-- Category 5 -->
      <div class="bg-yellow-100 dark:bg-gray-700 rounded-lg p-6 shadow-md transform transition duration-300 hover:shadow-lg hover:-translate-y-1">
        <h2 class="text-2xl font-semibold text-yellow-800 dark:text-yellow-300 mb-4">Connect</h2>
        <ul class="space-y-3">
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-yellow-600 dark:hover:text-yellow-400 transition duration-200 block">Facebook</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-yellow-600 dark:hover:text-yellow-400 transition duration-200 block">Instagram</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-yellow-600 dark:hover:text-yellow-400 transition duration-200 block">Twitter</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-yellow-600 dark:hover:text-yellow-400 transition duration-200 block">Pinterest</a></li>
        </ul>
      </div>

      <!-- Category 6 - Example of more links if needed -->
      <div class="bg-red-100 dark:bg-gray-700 rounded-lg p-6 shadow-md transform transition duration-300 hover:shadow-lg hover:-translate-y-1">
        <h2 class="text-2xl font-semibold text-red-800 dark:text-red-300 mb-4">Collaborations</h2>
        <ul class="space-y-3">
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-400 transition duration-200 block">Partnerships</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-400 transition duration-200 block">Affiliate Program</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-400 transition duration-200 block">Wholesale Inquiries</a></li>
        </ul>
      </div>

    </div>
  </div>
</div>

Componente de mapa del sitio

Un componente de mapa del sitio retro/vintage diseñado para interfaces de redes sociales, utilizando un esquema de color monocromático. Presenta un diseño simple con un tema oscuro para una mejor legibilidad y atractivo estético.

Abrir vista previa

                <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>

Componente de mapa del sitio

Un componente de mapa del sitio adaptable diseñado con los principios de Material Design y optimizado para el comercio electrónico, con colores pastel y compatibilidad con el modo oscuro.

Abrir vista previa

                <div class="bg-white dark:bg-gray-800 p-6 rounded-md shadow-md">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-100">Site Map</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="p-4 bg-blue-100 dark:bg-blue-900 rounded shadow">
            <h3 class="font-semibold text-lg text-blue-800 dark:text-blue-200">Products</h3>
            <ul class="mt-2">
                <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">New Arrivals</a></li>
                <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Featured</a></li>
                <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Best Sellers</a></li>
                <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Sales</a></li>
            </ul>
        </div>
        <div class="p-4 bg-green-100 dark:bg-green-900 rounded shadow">
            <h3 class="font-semibold text-lg text-green-800 dark:text-green-200">Categories</h3>
            <ul class="mt-2">
                <li><a href="#" class="text-green-600 dark:text-green-400 hover:underline">Men</a></li>
                <li><a href="#" class="text-green-600 dark:text-green-400 hover:underline">Women</a></li>
                <li><a href="#" class="text-green-600 dark:text-green-400 hover:underline">Kids</a></li>
                <li><a href="#" class="text-green-600 dark:text-green-400 hover:underline">Accessories</a></li>
            </ul>
        </div>
        <div class="p-4 bg-pink-100 dark:bg-pink-900 rounded shadow">
            <h3 class="font-semibold text-lg text-pink-800 dark:text-pink-200">Support</h3>
            <ul class="mt-2">
                <li><a href="#" class="text-pink-600 dark:text-pink-400 hover:underline">Customer Service</a></li>
                <li><a href="#" class="text-pink-600 dark:text-pink-400 hover:underline">Returns</a></li>
                <li><a href="#" class="text-pink-600 dark:text-pink-400 hover:underline">FAQs</a></li>
                <li><a href="#" class="text-pink-600 dark:text-pink-400 hover:underline">Contact Us</a></li>
            </ul>
        </div>
    </div>
    <div class="mt-8">
        <h3 class="font-semibold text-lg text-gray-800 dark:text-gray-100">User Profile</h3>
        <div class="flex items-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <div class="ml-3">
                <p class="text-gray-800 dark:text-gray-100">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">[email protected]</p>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="font-semibold text-lg text-gray-800 dark:text-gray-100">Featured Image</h3>
        <img src="https://picsum.photos/300/200" alt="Featured" class="mt-2 rounded-md shadow">
    </div>
</div>

Componente de mapa del sitio

Un componente de mapa del sitio responsivo diseñado en un estilo brutalista con un tema oscuro para sitios web comerciales / corporativos, que incorpora funciones interactivas.

Abrir vista previa

                <div class="bg-gray-800 dark:bg-gray-900 p-4">
    <h1 class="text-3xl font-bold text-white mb-4">Site Map</h1>
    <ul class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">
            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Home</h2>
            <p class="text-gray-600 dark:text-gray-400">Welcome to our website.</p>
        </li>
        <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">
            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">About Us</h2>
            <p class="text-gray-600 dark:text-gray-400">Learn more about our company.</p>
        </li>
        <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">
            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Services</h2>
            <p class="text-gray-600 dark:text-gray-400">Discover our services.</p>
        </li>
        <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">
            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Portfolio</h2>
            <p class="text-gray-600 dark:text-gray-400">View our work.</p>
        </li>
        <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">
            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Blog</h2>
            <p class="text-gray-600 dark:text-gray-400">Read our latest posts.</p>
        </li>
        <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">
            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Contact</h2>
            <p class="text-gray-600 dark:text-gray-400">Get in touch with us.</p>
        </li>
    </ul>
    <div class="mt-8">
        <h2 class="text-xl font-bold text-white mb-2">Team Members</h2>
        <div class="flex flex-wrap gap-4">
            <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg flex flex-col items-center">
                <img class="w-24 h-24 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Team Member">
                <h3 class="text-lg font-bold text-gray-800 dark:text-gray-200">John Doe</h3>
                <p class="text-gray-600 dark:text-gray-400">CEO</p>
            </div>
            <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg flex flex-col items-center">
                <img class="w-24 h-24 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Team Member">
                <h3 class="text-lg font-bold text-gray-800 dark:text-gray-200">Jane Smith</h3>
                <p class="text-gray-600 dark:text-gray-400">CTO</p>
            </div>
        </div>
    </div>
    <div class="mt-8">
        <h2 class="text-xl font-bold text-white mb-2">Gallery</h2>
        <div class="grid grid-cols-2 md:grid-cols-3 gap-2">
            <img class="w-full h-32 object-cover rounded-lg bg-gray-300 dark:bg-gray-600" src="https://picsum.photos/200/300?random=1" alt="Gallery Image">
            <img class="w-full h-32 object-cover rounded-lg bg-gray-300 dark:bg-gray-600" src="https://picsum.photos/200/300?random=2" alt="Gallery Image">
            <img class="w-full h-32 object-cover rounded-lg bg-gray-300 dark:bg-gray-600" src="https://picsum.photos/200/300?random=3" alt="Gallery Image">
            <img class="w-full h-32 object-cover rounded-lg bg-gray-300 dark:bg-gray-600" src="https://picsum.photos/200/300?random=4" alt="Gallery Image">
        </div>
    </div>
</div>

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 vista previa

                <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>

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.

Abrir vista previa

                <div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg transition duration-300 ease-in-out">
    <h2 class="text-3xl font-bold mb-4">Site Map</h2>
    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
        <div class="bg-gray-700 p-4 rounded-lg">
            <h3 class="text-xl font-semibold mb-2">About Us</h3>
            <p class="text-gray-300">Learn more about our company and values.</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg">
            <h3 class="text-xl font-semibold mb-2">Services</h3>
            <p class="text-gray-300">Explore the services we offer to our clients.</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg">
            <h3 class="text-xl font-semibold mb-2">Contact</h3>
            <p class="text-gray-300">Get in touch with us for inquiries.</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg">
            <h3 class="text-xl font-semibold mb-2">Blog</h3>
            <p class="text-gray-300">Read our latest articles and updates.</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg">
            <h3 class="text-xl font-semibold mb-2">FAQ</h3>
            <p class="text-gray-300">Find answers to common questions.</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg">
            <h3 class="text-xl font-semibold mb-2">Careers</h3>
            <p class="text-gray-300">Join our team and grow your career with us.</p>
        </div>
    </div>
    <div class="mt-6 border-t border-gray-600 pt-4">
        <h3 class="text-xl font-bold mb-2">Team</h3>
        <div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" class="w-12 h-12 rounded-full mr-3">
                <div>
                    <p class="font-semibold">John Doe</p>
                    <p class="text-gray-400">CEO</p>
                </div>
            </div>
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" class="w-12 h-12 rounded-full mr-3">
                <div>
                    <p class="font-semibold">Jane Smith</p>
                    <p class="text-gray-400">CTO</p>
                </div>
            </div>
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" class="w-12 h-12 rounded-full mr-3">
                <div>
                    <p class="font-semibold">Mike Johnson</p>
                    <p class="text-gray-400">CFO</p>
                </div>
            </div>
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/women/4.jpg" class="w-12 h-12 rounded-full mr-3">
                <div>
                    <p class="font-semibold">Emily Davis</p>
                    <p class="text-gray-400">CMO</p>
                </div>
            </div>
        </div>
    </div>
    <div class="mt-6 border-t border-gray-600 pt-4">
        <h3 class="text-xl font-bold mb-2">Resources</h3>
        <a href="#" class="text-blue-400 hover:underline">Documentation</a><br>
        <a href="#" class="text-blue-400 hover:underline">Sitemap</a><br>
        <a href="#" class="text-blue-400 hover:underline">Support</a>
    </div>
</div>

Componente de mapa del sitio

Componente de mapa del sitio receptivo con soporte de modo oscuro para comercio electrónico. Utiliza Tailwind CSS para el estilo. Sigue un esquema de color análogo. Imágenes de picsum.photos.

Abrir vista previa

                <footer class="bg-gray-900 text-gray-300 py-12">
  <div class="container mx-auto px-4">
    <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
      <div>
        <h4 class="text-lg font-semibold mb-4 text-blue-400">Shop</h4>
        <ul class="space-y-2">
          <li><a href="#" class="hover:text-blue-600">All Products</a></li>
          <li><a href="#" class="hover:text-blue-600">Categories</a></li>
          <li><a href="#" class="hover:text-blue-600">New Arrivals</a></li>
          <li><a href="#" class="hover:text-blue-600">Best Sellers</a></li>
          <li><a href="#" class="hover:text-blue-600">On Sale</a></li>
        </ul>
      </div>
      <div>
        <h4 class="text-lg font-semibold mb-4 text-blue-400">Account</h4>
        <ul class="space-y-2">
          <li><a href="#" class="hover:text-blue-600">My Account</a></li>
          <li><a href="#" class="hover:text-blue-600">Order History</a></li>
          <li><a href="#" class="hover:text-blue-600">Wishlist</a></li>
          <li><a href="#" class="hover:text-blue-600">Track Order</a></li>
        </ul>
      </div>
      <div>
        <h4 class="text-lg font-semibold mb-4 text-blue-400">Information</h4>
        <ul class="space-y-2">
          <li><a href="#" class="hover:text-blue-600">About Us</a></li>
          <li><a href="#" class="hover:text-blue-600">Contact Us</a></li>
          <li><a href="#" class="hover:text-blue-600">Privacy Policy</a></li>
          <li><a href="#" class="hover:text-blue-600">Terms of Service</a></li>
          <li><a href="#" class="hover:text-blue-600">Shipping & Returns</a></li>
        </ul>
      </div>
      <div>
        <h4 class="text-lg font-semibold mb-4 text-blue-400">Connect</h4>
        <div class="flex space-x-4">
          <a href="#" class="text-gray-400 hover:text-blue-600"><i class="fab fa-facebook-f"></i></a>
          <a href="#" class="text-gray-400 hover:text-blue-600"><i class="fab fa-twitter"></i></a>
          <a href="#" class="text-gray-400 hover:text-blue-600"><i class="fab fa-instagram"></i></a>
          <a href="#" class="text-gray-400 hover:text-blue-600"><i class="fab fa-linkedin-in"></i></a>
        </div>
        <div class="mt-6">
          <h5 class="text-md font-semibold mb-3 text-blue-400">Subscribe to our Newsletter</h5>
          <form class="flex">
            <input type="email" placeholder="Enter your email" class="py-2 px-4 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-600 bg-gray-800 text-gray-200 w-full">
            <button type="submit" class="bg-blue-600 text-white py-2 px-4 rounded-r-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600">Subscribe</button>
          </form>
        </div>
      </div>
    </div>
    <hr class="my-8 border-gray-700">
    <div class="text-center text-gray-500">
      &copy; 2023 Your E-commerce Store. All rights reserved.
    </div>
  </div>
</footer>

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.

Abrir vista previa

                <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>

Componente de mapa del sitio

Componente de mapa del sitio responsivo con microinteracciones, combinación de colores monocromática, diseño complejo, compatibilidad con temas oscuros y CSS de viento de cola.

Abrir vista previa

                <div class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen p-8">
  <div class="max-w-4xl mx-auto">
    <h1 class="text-3xl font-bold mb-8 text-center">Site Map</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Section 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition duration-300 hover:scale-105 hover:shadow-xl">
        <h2 class="text-xl font-semibold mb-4 dark:text-white">Section 1</h2>
        <ul>
          <li class="mb-2 transform transition duration-300 hover:translate-x-2">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 1.1</a>
          </li>
          <li class="mb-2 transform transition duration-300 hover:translate-x-2">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 1.2</a>
          </li>
          <li class="mb-2 transform transition duration-300 hover:translate-x-2">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 1.3</a>
          </li>
        </ul>
      </div>

      <!-- Section 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition duration-300 hover:scale-105 hover:shadow-xl">
        <h2 class="text-xl font-semibold mb-4 dark:text-white">Section 2</h2>
        <ul>
          <li class="mb-2 transform transition duration-300 hover:translate-x-2">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 2.1</a>
          </li>
          <li class="mb-2 transform transition duration-300 hover:translate-x-2">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 2.2</a>
          </li>
          <li class="mb-2 transform transition duration-300 hover:translate-x-2">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 2.3</a>
          </li>
        </ul>
      </div>

      <!-- Section 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition duration-300 hover:scale-105 hover:shadow-xl">
        <h2 class="text-xl font-semibold mb-4 dark:text-white">Section 3</h2>
        <ul>
          <li class="mb-2 transform transition duration-300 hover:translate-x-2">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 3.1</a>
          </li>
          <li class="mb-2 transform transition duration-300 hover:translate-x-2">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 3.2</a>
          </li>
          <li class="mb-2 transform transition duration-300 hover:translate-x-2">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 3.3</a>
          </li>
        </ul>
      </div>

      <!-- Section 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition duration-300 hover:scale-105 hover:shadow-xl">
        <h2 class="text-xl font-semibold mb-4 dark:text-white">Section 4</h2>
        <ul>
          <li class="mb-2 transform transition duration-300 hover:translate-x-2">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 4.1</a>
          </li>
          <li class="mb-2 transform transition duration-300 hover:translate-x-2">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 4.2</a>
          </li>
          <li class="mb-2 transform transition duration-300 hover:translate-x-2">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 4.3</a>
          </li>
        </ul>
      </div>

      <!-- Section 5 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition duration-300 hover:scale-105 hover:shadow-xl">
        <h2 class="text-xl font-semibold mb-4 dark:text-white">Section 5</h2>
        <ul>
          <li class="mb-2 transform transition duration-300 hover:translate-x-2">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 5.1</a>
          </li>
          <li class="mb-2 transform transition duration-300 hover:translate-x-2">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 5.2</a>
          </li>
          <li class="mb-2 transform transition duration-300 hover:translate-x-2">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 5.3</a>
          </li>
        </ul>
      </div>

       <!-- Section 6 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition duration-300 hover:scale-105 hover:shadow-xl">
        <h2 class="text-xl font-semibold mb-4 dark:text-white">Section 6</h2>
        <ul>
          <li class="mb-2 transform transition duration-300 hover:translate-x-2">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 6.1</a>
          </li>
          <li class="mb-2 transform transition duration-300 hover:translate-x-2">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 6.2</a>
          </li>
          <li class="mb-2 transform transition duration-300 hover:translate-x-2">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 6.3</a>
          </li>
        </ul>
      </div>

    </div>
  </div>
</div>

Componente de mapa del sitio

Un componente de mapa del sitio interactivo diseñado con morfismo de vidrio, con un efecto translúcido y desenfoque similar al vidrio esmerilado para un portafolio que muestra trabajos o productos. Admite un tema oscuro y utiliza colores complementarios mientras mantiene una complejidad moderada.

Abrir vista previa

                <div class="min-h-screen bg-gray-900 dark:bg-gray-800 flex flex-col items-center justify-center p-6">
    <div class="bg-white dark:bg-gray-900 rounded-xl shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-30 border border-gray-200 dark:border-gray-700 p-8 mb-6">
        <h1 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Site Map</h1>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
                <img src="https://picsum.photos/200/100" alt="Project Thumbnail" class="rounded-lg mb-2">
                <h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 1</h2>
                <p class="text-gray-600 dark:text-gray-300">Brief description of Project 1.</p>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
                <img src="https://picsum.photos/200/100?random=1" alt="Project Thumbnail" class="rounded-lg mb-2">
                <h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 2</h2>
                <p class="text-gray-600 dark:text-gray-300">Brief description of Project 2.</p>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
                <img src="https://picsum.photos/200/100?random=2" alt="Project Thumbnail" class="rounded-lg mb-2">
                <h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 3</h2>
                <p class="text-gray-600 dark:text-gray-300">Brief description of Project 3.</p>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
                <img src="https://picsum.photos/200/100?random=3" alt="Project Thumbnail" class="rounded-lg mb-2">
                <h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 4</h2>
                <p class="text-gray-600 dark:text-gray-300">Brief description of Project 4.</p>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
                <img src="https://picsum.photos/200/100?random=4" alt="Project Thumbnail" class="rounded-lg mb-2">
                <h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 5</h2>
                <p class="text-gray-600 dark:text-gray-300">Brief description of Project 5.</p>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
                <img src="https://picsum.photos/200/100?random=5" alt="Project Thumbnail" class="rounded-lg mb-2">
                <h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 6</h2>
                <p class="text-gray-600 dark:text-gray-300">Brief description of Project 6.</p>
            </div>
        </div>
    </div>
    <footer class="text-center text-gray-600 dark:text-gray-400">
        <p class="text-sm">© 2023 Your Name. All Rights Reserved.</p>
        <p>Follow me on <a href="#" class="text-green-500 hover:underline">LinkedIn</a> | <a href="#" class="text-blue-500 hover:underline">Twitter</a></p>
    </footer>
</div>

Categorías