Mappa del sito | Code Components Hub

Componente Mappa del sito

Un componente sitemap reattivo con microinterazioni, combinazione di colori pastello e supporto per temi scuri, adatto per siti Web di e-commerce. Include un'intestazione, una barra di ricerca e diverse categorie con link.

Apri anteprima

                
<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 Mappa del sito

Un componente della mappa del sito retrò/vintage progettato per le interfacce dei social media, utilizzando una combinazione di colori monocromatica. Presenta un layout semplice con un tema scuro per una migliore leggibilità e un aspetto estetico.

Apri anteprima

                <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 Mappa del sito

Un componente della mappa del sito reattivo con i principi di Material Design e ottimizzato per l'e-commerce, con colori pastello e supporto per la modalità scura.

Apri anteprima

                <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 Mappa del sito

Un componente della mappa del sito reattivo progettato in stile brutalista con un tema scuro per siti Web aziendali/aziendali, che incorpora funzionalità interattive.

Apri anteprima

                <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 Mappa del sito

Un complesso componente della mappa del sito che implementa lo stile di progettazione scheumorfismo con una combinazione di colori dei toni della terra, supportando un tema scuro. Progettato per scopi di blog/contenuti con elementi interattivi, utilizzando Tailwind CSS.

Apri anteprima

                <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 Mappa del sito

Un componente della mappa del sito progettato in stile brutalismo con un tema scuro, ideale per siti Web aziendali professionali. Presenta un layout audace con contrasto elevato ed elementi interattivi.

Apri anteprima

                <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 Mappa del sito

Componente Mappa del sito reattiva con supporto della modalità scura per l'e-commerce. Utilizza Tailwind CSS per lo stile. Segue una combinazione di colori analoga. Immagini da picsum.photos.

Apri anteprima

                <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 Mappa del sito

Un componente sitemap in stile Material Design per le interfacce dei social media, con reattività e supporto per la modalità oscura utilizzando Tailwind CSS. Incorpora i toni della terra e la complessità media per le piattaforme di social networking.

Apri anteprima

                <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 Mappa del sito

Componente della mappa del sito reattiva con microinterazioni, combinazione di colori monocromatici, design complesso, supporto per temi scuri e CSS Tailwind.

Apri anteprima

                <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 Mappa del sito

Un componente reattivo della mappa del sito progettato con glassmorphism, caratterizzato da un effetto traslucido smerigliato simile al vetro e sfocatura per un portfolio che mostra lavori o prodotti. Supporta un tema scuro e utilizza colori complementari pur mantenendo una complessità moderata.

Apri anteprima

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