Composant de plan du site
Un composant de plan de site de style rétro/vintage avec des effets réactifs et une prise en charge du thème sombre.
HTML Code
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-3xl mx-auto mt-10">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200 mb-4">Site Map</h2>
<ul class="space-y-4">
<li class="bg-gray-100 dark:bg-gray-700 p-4 rounded-md flex items-center justify-between">
<div class="flex items-center">
<img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full mr-3">
<span class="text-gray-600 dark:text-gray-300">Home</span>
</div>
<a href="#" class="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">Visit</a>
</li>
<li class="bg-gray-100 dark:bg-gray-700 p-4 rounded-md flex items-center justify-between">
<div class="flex items-center">
<img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full mr-3">
<span class="text-gray-600 dark:text-gray-300">About Us</span>
</div>
<a href="#" class="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">Visit</a>
</li>
<li class="bg-gray-100 dark:bg-gray-700 p-4 rounded-md flex items-center justify-between">
<div class="flex items-center">
<img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full mr-3">
<span class="text-gray-600 dark:text-gray-300">Services</span>
</div>
<a href="#" class="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">Visit</a>
</li>
<li class="bg-gray-100 dark:bg-gray-700 p-4 rounded-md flex items-center justify-between">
<div class="flex items-center">
<img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full mr-3">
<span class="text-gray-600 dark:text-gray-300">Contact</span>
</div>
<a href="#" class="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">Visit</a>
</li>
</ul>
</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
Un composant de plan de site réactif conçu selon les principes de Material Design, avec des mises en page basées sur une grille, des ombres et la prise en charge du mode sombre.
Retro_Healthcare_Sitemap_Component
Un composant de sitemap simple et réactif avec une esthétique rétro/vintage, une palette de couleurs analogue, adapté aux applications de santé, y compris la prise en charge du mode sombre.