Rechercher des composants

Catégories

Composants Plan du site

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

Composant de plan du site

Un composant de plan de site conçu dans un style brutaliste avec un thème sombre, idéal pour les sites Web d’entreprise professionnels. Il présente une mise en page audacieuse avec un contraste élevé et des éléments interactifs.

Ouvrir Aperçu

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

Composant de plan du site

Composant de plan de site réactif avec prise en charge du mode sombre pour le commerce électronique. Utilise Tailwind CSS pour le coiffage. Suit une palette de couleurs analogue. Images de picsum.photos.

Ouvrir Aperçu

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

Composant de plan du site

Un composant de sitemap de style Material Design pour les interfaces de médias sociaux, avec une prise en charge de la réactivité et du mode sombre à l’aide de Tailwind CSS. Intègre des tons de terre et une complexité moyenne pour les plateformes de réseaux sociaux.

Ouvrir Aperçu

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

Composant de plan du site

Composant de plan de site réactif avec micro-interactions, schéma de couleurs monochromatiques, conception complexe, prise en charge du thème sombre et CSS Tailwind.

Ouvrir Aperçu

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

Composant de plan du site

Un composant de plan de site réactif conçu avec glassmorphism, avec un effet translucide et un flou semblable à du verre dépoli pour un portfolio présentant des travaux ou des produits. Il prend en charge un thème sombre et utilise des couleurs complémentaires tout en conservant une complexité modérée.

Ouvrir Aperçu

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

Composant de plan du site

Un composant de sitemap simple et réactif pour les sites de commerce électronique avec des couleurs vives et des micro-interactions, et une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 text-white dark:bg-gradient-to-r dark:from-gray-700 dark:via-gray-800 dark:to-gray-900 py-12 px-6">
  <div class="container mx-auto">
    <h2 class="text-3xl font-bold text-center mb-8">Site Map</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
      <div class="p-4 bg-white bg-opacity-20 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 hover:bg-opacity-30">
        <h3 class="font-semibold text-xl mb-4">Shop</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:underline">All Products</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Categories</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Sale Items</a></li>
        </ul>
      </div>
      <div class="p-4 bg-white bg-opacity-20 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 hover:bg-opacity-30">
        <h3 class="font-semibold text-xl mb-4">Customer Service</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:underline">Contact Us</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">FAQs</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Shipping Information</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Returns & Exchanges</a></li>
        </ul>
      </div>
      <div class="p-4 bg-white bg-opacity-20 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 hover:bg-opacity-30">
        <h3 class="font-semibold text-xl mb-4">About Us</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:underline">Our Story</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Careers</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 class="p-4 bg-white bg-opacity-20 rounded-lg shadow-lg transform transition duration-300 hover:scale-105 hover:bg-opacity-30">
        <h3 class="font-semibold text-xl mb-4">Follow Us</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:underline">Facebook</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Instagram</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Twitter</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Composant de plan du site

Un composant de plan de site réactif conçu pour le mode sombre utilisant des couleurs pastel, adapté aux tableaux de bord.

Ouvrir Aperçu

                <div class="bg-gray-800 text-gray-200 dark:bg-gray-900 dark:text-gray-300 p-6 rounded-lg shadow-lg max-w-4xl mx-auto">
    <h2 class="text-2xl font-bold mb-4">Site Map</h2>
    <p class="mb-4">Overview of the main sections:</p>
    <ul class="space-y-2">
        <li class="bg-gray-700 dark:bg-gray-800 rounded p-4 shadow hover:bg-gray-600 dark:hover:bg-gray-700 transition duration-300">
            <a href="#" class="flex items-center">
                <img src="https://picsum.photos/30" alt="Icon" class="rounded-full mr-3">
                <span>Dashboard</span>
            </a>
        </li>
        <li class="bg-gray-700 dark:bg-gray-800 rounded p-4 shadow hover:bg-gray-600 dark:hover:bg-gray-700 transition duration-300">
            <a href="#" class="flex items-center">
                <img src="https://picsum.photos/30" alt="Icon" class="rounded-full mr-3">
                <span>User Management</span>
            </a>
        </li>
        <li class="bg-gray-700 dark:bg-gray-800 rounded p-4 shadow hover:bg-gray-600 dark:hover:bg-gray-700 transition duration-300">
            <a href="#" class="flex items-center">
                <img src="https://picsum.photos/30" alt="Icon" class="rounded-full mr-3">
                <span>Reports</span>
            </a>
        </li>
        <li class="bg-gray-700 dark:bg-gray-800 rounded p-4 shadow hover:bg-gray-600 dark:hover:bg-gray-700 transition duration-300">
            <a href="#" class="flex items-center">
                <img src="https://picsum.photos/30" alt="Icon" class="rounded-full mr-3">
                <span>Settings</span>
            </a>
        </li>
    </ul>
    <div class="mt-6">
        <p class="font-bold">User Profile</p>
        <div class="flex items-center bg-gray-700 dark:bg-gray-800 rounded p-4 mt-2">
            <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="rounded-full mr-3">
            <span>John Doe</span>
        </div>
    </div>
</div>

Composant de plan du site

Un composant de plan de site de style 3D avec un design réactif et une prise en charge du mode sombre. Il comporte des éléments tridimensionnels pour plus de profondeur et d’engagement, en utilisant des images et des avatars aléatoires.

Ouvrir Aperçu

                <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg max-w-4xl mx-auto p-6">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Site Map</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Home</h3>
            <img src="https://picsum.photos/200/100?random=1" alt="Home Image" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">About Us</h3>
            <img src="https://picsum.photos/200/100?random=2" alt="About Us Image" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Services</h3>
            <img src="https://picsum.photos/200/100?random=3" alt="Services Image" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Contact</h3>
            <img src="https://picsum.photos/200/100?random=4" alt="Contact Image" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Blog</h3>
            <img src="https://picsum.photos/200/100?random=5" alt="Blog Image" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transition-transform transform hover:scale-105 hover:shadow-lg">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Portfolio</h3>
            <img src="https://picsum.photos/200/100?random=6" alt="Portfolio Image" class="rounded-lg mt-2">
        </div>
    </div>
</div>

Composant de plan du site

Un composant de plan de site conçu selon les principes de conception matérielle à l’aide de Tailwind CSS, avec des mises en page réactives, des animations et la prise en charge des thèmes sombres.

Ouvrir Aperçu

                <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg">  <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white">Site Map</h2>  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow">      <h3 class="font-semibold text-lg text-gray-700 dark:text-gray-200">Section 1</h3>      <ul class="mt-2">        <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Home</a></li>        <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">About Us</a></li>        <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Services</a></li>        <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Contact</a></li>      </ul>    </div>    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow">      <h3 class="font-semibold text-lg text-gray-700 dark:text-gray-200">Section 2</h3>      <ul class="mt-2">        <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Blog</a></li>        <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Pricing</a></li>        <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Testimonials</a></li>      </ul>    </div>    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow">      <h3 class="font-semibold text-lg text-gray-700 dark:text-gray-200">Section 3</h3>      <ul class="mt-2">        <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">FAQs</a></li>        <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Support</a></li>        <li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Privacy Policy</a></li>      </ul>    </div>  </div>  <div class="mt-8">    <h3 class="font-semibold text-lg text-gray-700 dark:text-gray-200">Team</h3>    <div class="flex space-x-4 mt-2">      <div class="bg-gray-100 dark:bg-gray-700 rounded-full p-2 w-16 h-16 flex justify-center items-center shadow">        <img src="https://picsum.photos/seed/pic1/100/100" alt="Avatar" class="rounded-full">      </div>      <div class="bg-gray-100 dark:bg-gray-700 rounded-full p-2 w-16 h-16 flex justify-center items-center shadow">        <img src="https://picsum.photos/seed/pic2/100/100" alt="Avatar" class="rounded-full">      </div>      <div class="bg-gray-100 dark:bg-gray-700 rounded-full p-2 w-16 h-16 flex justify-center items-center shadow">        <img src="https://picsum.photos/seed/pic3/100/100" alt="Avatar" class="rounded-full">      </div>    </div>  </div></div>