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
Neumorphisme Vibrant Plan du site Composant
Un composant de plan de site simple et réactif conçu avec un style neumorphique et une palette de couleurs vives, adapté à la documentation ou aux sites wiki. Inclut la prise en charge du mode sombre.
Composant de carte de site neumorphique
Un composant de plan de site complexe et réactif conçu dans un style neumorphe avec des tons de bijoux, adapté aux sites Web gouvernementaux ou de services publics, y compris la prise en charge du mode sombre.
Neumorphic_Real_Estate_Sitemap_Component
Un composant de plan de site neumorphique simple et réactif pour les plateformes immobilières avec un schéma de couleurs arc-en-ciel dégradé et la prise en charge du mode sombre.