Composant de plan du site
Un composant complexe de plan de site mettant en œuvre un style de conception skeuomorphism avec des couleurs de terre, prenant en charge un thème sombre. Conçu à des fins de blog/contenu avec des éléments interactifs, à l’aide de Tailwind CSS.
HTML Code
<div class="bg-green-800 dark:bg-gray-900 p-8 rounded-lg shadow-lg space-y-6">
<h1 class="text-4xl font-bold text-white dark:text-gray-200">Site Map</h1>
<div class="p-6 bg-green-700 dark:bg-gray-800 rounded-lg shadow-md">
<h2 class="text-2xl font-semibold text-yellow-300 dark:text-yellow-400">Blog Sections</h2>
<ul class="space-y-2 mt-4">
<li class="p-4 bg-green-600 dark:bg-gray-700 rounded-md shadow">
<a href="#" class="flex items-center justify-between text-white dark:text-gray-200 hover:text-yellow-200">Home
<span class="text-xs bg-yellow-400 text-gray-800 px-2 rounded">New</span>
</a>
</li>
<li class="p-4 bg-green-600 dark:bg-gray-700 rounded-md shadow">
<a href="#" class="flex items-center justify-between text-white dark:text-gray-200 hover:text-yellow-200">About Us
<span class="text-xs bg-yellow-400 text-gray-800 px-2 rounded">Updated</span>
</a>
</li>
<li class="p-4 bg-green-600 dark:bg-gray-700 rounded-md shadow">
<a href="#" class="flex items-center justify-between text-white dark:text-gray-200 hover:text-yellow-200">Contact
<span class="text-xs bg-yellow-400 text-gray-800 px-2 rounded">New</span>
</a>
</li>
<li class="p-4 bg-green-600 dark:bg-gray-700 rounded-md shadow">
<a href="#" class="flex items-center justify-between text-white dark:text-gray-200 hover:text-yellow-200">Blog Posts
<span class="text-xs bg-yellow-400 text-gray-800 px-2 rounded">10</span>
</a>
</li>
</ul>
</div>
<div class="p-6 bg-green-700 dark:bg-gray-800 rounded-lg shadow-md">
<h2 class="text-2xl font-semibold text-yellow-300 dark:text-yellow-400">Featured Posts</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
<div class="bg-green-600 dark:bg-gray-700 rounded-md shadow p-4">
<img src="https://picsum.photos/200/100?random=1" alt="Featured Post" class="rounded-md mb-2" />
<h3 class="text-lg font-semibold text-white dark:text-gray-200">Post Title 1</h3>
<p class="text-sm text-gray-300 dark:text-gray-400">Brief description of the featured post...</p>
</div>
<div class="bg-green-600 dark:bg-gray-700 rounded-md shadow p-4">
<img src="https://picsum.photos/200/100?random=2" alt="Featured Post" class="rounded-md mb-2" />
<h3 class="text-lg font-semibold text-white dark:text-gray-200">Post Title 2</h3>
<p class="text-sm text-gray-300 dark:text-gray-400">Brief description of the featured post...</p>
</div>
</div>
</div>
<div class="p-6 bg-green-700 dark:bg-gray-800 rounded-lg shadow-md">
<h2 class="text-2xl font-semibold text-yellow-300 dark:text-yellow-400">Team</h2>
<div class="flex space-x-4 mt-4">
<div class="flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Team Member" class="rounded-full w-16 h-16 mb-2" />
<span class="text-white dark:text-gray-200">John Doe</span>
<span class="text-sm text-gray-300 dark:text-gray-400">Role</span>
</div>
<div class="flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Team Member" class="rounded-full w-16 h-16 mb-2" />
<span class="text-white dark:text-gray-200">Jane Doe</span>
<span class="text-sm text-gray-300 dark:text-gray-400">Role</span>
</div>
</div>
</div>
</div>Composants associés
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 plan du site
Un composant de plan de site réactif conçu en mode sombre à l’aide de Tailwind CSS.
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.