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
Neumorphic_Industrial_Sitemap
Un composant de plan de site neumorphique réactif pour les entreprises industrielles et manufacturières, doté d’une palette de couleurs monochromatiques et d’une prise en charge du mode sombre. Les éléments semblent s’extruder de l’arrière-plan à l’aide d’ombres subtiles.
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.
Composant de plan du site
Un composant complexe de plan de site mettant en œuvre un style de conception skeuomorphism avec des couleurs de terre, prenant en charge un thème sombre. Conçu à des fins de blog/contenu avec des éléments interactifs, à l’aide de Tailwind CSS.