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 simple et dynamique inspiré de la 3D pour les portfolios, avec un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.
Composant de plan du site
Un composant de plan de site conçu selon les principes de conception matérielle à l’aide de Tailwind CSS, avec des mises en page réactives, des animations et la prise en charge des thèmes sombres.
Glassmorphism Composant de plan du site
Un composant de plan de site réactif avec un design de glassmorphism, une palette de couleurs analogue et une prise en charge du mode sombre, adapté aux sites Web d’entreprise et d’entreprise.