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.
HTML Code
<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>Composants associés
Composant de plan du site
Composant de plan de site avec design minimaliste/plat, effets réactifs et prise en charge du thème sombre.
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.
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.