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.
Codice HTML
<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>Componenti correlati
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.
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.
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.