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.
HTML Code
<div class="min-h-screen bg-gray-900 dark:bg-gray-800 flex flex-col items-center justify-center p-6">
<div class="bg-white dark:bg-gray-900 rounded-xl shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-30 border border-gray-200 dark:border-gray-700 p-8 mb-6">
<h1 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Site Map</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
<img src="https://picsum.photos/200/100" alt="Project Thumbnail" class="rounded-lg mb-2">
<h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 1</h2>
<p class="text-gray-600 dark:text-gray-300">Brief description of Project 1.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
<img src="https://picsum.photos/200/100?random=1" alt="Project Thumbnail" class="rounded-lg mb-2">
<h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 2</h2>
<p class="text-gray-600 dark:text-gray-300">Brief description of Project 2.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
<img src="https://picsum.photos/200/100?random=2" alt="Project Thumbnail" class="rounded-lg mb-2">
<h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 3</h2>
<p class="text-gray-600 dark:text-gray-300">Brief description of Project 3.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
<img src="https://picsum.photos/200/100?random=3" alt="Project Thumbnail" class="rounded-lg mb-2">
<h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 4</h2>
<p class="text-gray-600 dark:text-gray-300">Brief description of Project 4.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
<img src="https://picsum.photos/200/100?random=4" alt="Project Thumbnail" class="rounded-lg mb-2">
<h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 5</h2>
<p class="text-gray-600 dark:text-gray-300">Brief description of Project 5.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
<img src="https://picsum.photos/200/100?random=5" alt="Project Thumbnail" class="rounded-lg mb-2">
<h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 6</h2>
<p class="text-gray-600 dark:text-gray-300">Brief description of Project 6.</p>
</div>
</div>
</div>
<footer class="text-center text-gray-600 dark:text-gray-400">
<p class="text-sm">© 2023 Your Name. All Rights Reserved.</p>
<p>Follow me on <a href="#" class="text-green-500 hover:underline">LinkedIn</a> | <a href="#" class="text-blue-500 hover:underline">Twitter</a></p>
</footer>
</div>Composants associés
Composant de plan du site
Un composant de plan de site complexe et réactif avec un style d’entreprise/professionnel et une palette de couleurs de terre, adapté aux sites Web d’entreprise. Inclut la prise en charge du mode sombre.
Composant de plan du site
Un composant de sitemap simple et réactif pour les applications technologiques/SaaS avec une interface utilisateur en mode sombre et un accent de dégradé arc-en-ciel. Optimisé pour un minimum d’éléments et une navigation claire.
Neumorphic_Real_Estate_Sitemap_Component
Un composant de plan de site neumorphique simple et réactif pour les plateformes immobilières avec un schéma de couleurs arc-en-ciel dégradé et la prise en charge du mode sombre.