Composant de plan du site
Un composant de plan de site réactif conçu dans un style brutaliste avec un thème sombre pour les sites Web d’entreprise, intégrant des fonctionnalités interactives.
HTML Code
<div class="bg-gray-800 dark:bg-gray-900 p-4">
<h1 class="text-3xl font-bold text-white mb-4">Site Map</h1>
<ul class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Home</h2>
<p class="text-gray-600 dark:text-gray-400">Welcome to our website.</p>
</li>
<li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">About Us</h2>
<p class="text-gray-600 dark:text-gray-400">Learn more about our company.</p>
</li>
<li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Services</h2>
<p class="text-gray-600 dark:text-gray-400">Discover our services.</p>
</li>
<li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Portfolio</h2>
<p class="text-gray-600 dark:text-gray-400">View our work.</p>
</li>
<li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Blog</h2>
<p class="text-gray-600 dark:text-gray-400">Read our latest posts.</p>
</li>
<li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Contact</h2>
<p class="text-gray-600 dark:text-gray-400">Get in touch with us.</p>
</li>
</ul>
<div class="mt-8">
<h2 class="text-xl font-bold text-white mb-2">Team Members</h2>
<div class="flex flex-wrap gap-4">
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg flex flex-col items-center">
<img class="w-24 h-24 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Team Member">
<h3 class="text-lg font-bold text-gray-800 dark:text-gray-200">John Doe</h3>
<p class="text-gray-600 dark:text-gray-400">CEO</p>
</div>
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg flex flex-col items-center">
<img class="w-24 h-24 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Team Member">
<h3 class="text-lg font-bold text-gray-800 dark:text-gray-200">Jane Smith</h3>
<p class="text-gray-600 dark:text-gray-400">CTO</p>
</div>
</div>
</div>
<div class="mt-8">
<h2 class="text-xl font-bold text-white mb-2">Gallery</h2>
<div class="grid grid-cols-2 md:grid-cols-3 gap-2">
<img class="w-full h-32 object-cover rounded-lg bg-gray-300 dark:bg-gray-600" src="https://picsum.photos/200/300?random=1" alt="Gallery Image">
<img class="w-full h-32 object-cover rounded-lg bg-gray-300 dark:bg-gray-600" src="https://picsum.photos/200/300?random=2" alt="Gallery Image">
<img class="w-full h-32 object-cover rounded-lg bg-gray-300 dark:bg-gray-600" src="https://picsum.photos/200/300?random=3" alt="Gallery Image">
<img class="w-full h-32 object-cover rounded-lg bg-gray-300 dark:bg-gray-600" src="https://picsum.photos/200/300?random=4" alt="Gallery Image">
</div>
</div>
</div>Composants associés
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.
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.
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.