Composant de plan du site
Un composant de plan de site rétro/vintage conçu pour les interfaces de médias sociaux, utilisant une palette de couleurs monochromatiques. Il présente une mise en page simple avec un thème sombre pour une meilleure lisibilité et un attrait esthétique.
HTML Code
<div class="max-w-4xl mx-auto p-6 bg-gray-900 dark:bg-gray-800 rounded-lg shadow-md">
<h1 class="text-4xl text-white font-bold text-center mb-6">Site Map</h1>
<ul class="list-disc list-inside space-y-4">
<li class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile Picture" class="w-12 h-12 rounded-full border-2 border-gray-600">
<div>
<a href="#" class="text-white hover:text-gray-400">Home</a>
<p class="text-gray-400 text-sm">Our homepage with latest updates</p>
</div>
</li>
<li class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Profile Picture" class="w-12 h-12 rounded-full border-2 border-gray-600">
<div>
<a href="#" class="text-white hover:text-gray-400">Profile</a>
<p class="text-gray-400 text-sm">Your personal profile page</p>
</div>
</li>
<li class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/33.jpg" alt="Profile Picture" class="w-12 h-12 rounded-full border-2 border-gray-600">
<div>
<a href="#" class="text-white hover:text-gray-400">Messages</a>
<p class="text-gray-400 text-sm">View your messages</p>
</div>
</li>
<li class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Profile Picture" class="w-12 h-12 rounded-full border-2 border-gray-600">
<div>
<a href="#" class="text-white hover:text-gray-400">Settings</a>
<p class="text-gray-400 text-sm">Manage your account settings</p>
</div>
</li>
</ul>
<div class="mt-6">
<h2 class="text-2xl text-white font-bold mb-2">Gallery</h2>
<div class="grid grid-cols-2 gap-4">
<img src="https://picsum.photos/200/200?random=1" alt="Gallery Image 1" class="rounded-lg">
<img src="https://picsum.photos/200/200?random=2" alt="Gallery Image 2" class="rounded-lg">
<img src="https://picsum.photos/200/200?random=3" alt="Gallery Image 3" class="rounded-lg">
<img src="https://picsum.photos/200/200?random=4" alt="Gallery Image 4" class="rounded-lg">
</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.
Plan du site - Finance Banque
Un composant de sitemap simple et réactif pour les interfaces finance/banque, doté d’une interface utilisateur en mode sombre avec des tons sépia/bruns. Optimisé pour les ordinateurs de bureau, les tablettes et les mobiles, avec une prise en charge complète 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.