Composant Composants de mise en page
Un composant de mise en page de tableau de bord réactif avec le style Glassmorphism, une palette de couleurs vives et une prise en charge du thème sombre à l’aide de Tailwind CSS. Il comporte une barre latérale et une zone de contenu principale avec des éléments translucides givrés ressemblant à du verre et des effets de flou.
HTML Code
<div class="min-h-screen bg-gradient-to-br from-purple-900 to-indigo-900 dark:from-gray-900 dark:to-black text-gray-200 dark:text-gray-300">
<div class="flex flex-col md:flex-row">
<!-- Sidebar -->
<aside class="w-full md:w-64 p-6 space-y-6 bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg m-4 shadow-lg md:h-screen md:sticky md:top-4">
<div class="text-2xl font-bold text-white dark:text-purple-300">Dashboard</div>
<nav class="space-y-4">
<a href="#" class="block p-3 rounded-lg text-lg font-semibold hover:bg-white hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-30 transition ease-in-out duration-300 flex items-center">
<svg class="h-6 w-6 mr-3 text-purple-300 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l.01.01M17 10v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
Home
</a>
<a href="#" class="block p-3 rounded-lg text-lg font-semibold hover:bg-white hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-30 transition ease-in-out duration-300 flex items-center">
<svg class="h-6 w-6 mr-3 text-purple-300 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.592 1M12 8c-.11 0-.22-.02-.33-.03M2.985 19.845A6.5 6.5 0 019 12.5v-1.1c0 .991.737 1.838 1.83 2 2.204.306 3.659 1.815 3.659 3.093l-.004.004A6.5 6.5 0 0112 21a6.5 6.5 0 01-6.015-3.155M1.015 19.845C2.107 18.067 4 16.5 6.5 16.5c1.442-.016 2.875-.521 3.864-1.413M7.5 14a.5.5 0 100-1 .5.5 0 000 1z"></path></svg>
Analytics
</a>
<a href="#" class="block p-3 rounded-lg text-lg font-semibold hover:bg-white hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-30 transition ease-in-out duration-300 flex items-center">
<svg class="h-6 w-6 mr-3 text-purple-300 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 14v6m-3-3h6M6 10h2a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2zm10 0h2a2 2 0 002-2V6a2 2 0 00-2-2h-2a2 2 0 00-2 2v2a2 2 0 002 2zM6 20h2a2 2 0 002-2v-2a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2z"></path></svg>
Reports
</a>
<a href="#" class="block p-3 rounded-lg text-lg font-semibold hover:bg-white hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-30 transition ease-in-out duration-300 flex items-center">
<svg class="h-6 w-6 mr-3 text-purple-300 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
Settings
</a>
</nav>
</aside>
<!-- Main Content -->
<main class="flex-1 p-6 md:p-10">
<header class="flex items-center justify-between mb-8">
<h1 class="text-4xl font-extrabold text-white dark:text-purple-300">Overview</h1>
<div class="flex items-center space-x-4">
<span class="text-white dark:text-purple-300">Welcome, User!</span>
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="h-10 w-10 rounded-full border-2 border-purple-400 dark:border-purple-600">
</div>
</header>
<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card 1 -->
<div class="bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg transform transition duration-500 hover:scale-105">
<h2 class="text-xl font-bold text-white dark:text-purple-300 mb-4">Total Sales</h2>
<p class="text-3xl font-extrabold text-purple-400 dark:text-purple-500">$12,345</p>
<p class="text-green-300 mt-2 flex items-center"><svg class="h-5 w-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11h10m-5-5v12"></path></svg> +15% from last month</p>
</div>
<!-- Card 2 -->
<div class="bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg transform transition duration-500 hover:scale-105">
<h2 class="text-xl font-bold text-white dark:text-purple-300 mb-4">New Users</h2>
<p class="text-3xl font-extrabold text-teal-300 dark:text-teal-400">876</p>
<p class="text-red-300 mt-2 flex items-center"><svg class="h-5 w-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 17h6m-3-3v6m5-10a1 1 0 01-1 1H4a1 1 0 01-1-1V5a1 1 0 011-1h16a1 1 0 011 1v4z"></path></svg>-5% from last month</p>
</div>
<!-- Card 3 -->
<div class="bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg transform transition duration-500 hover:scale-105">
<h2 class="text-xl font-bold text-white dark:text-purple-300 mb-4">Orders Pending</h2>
<p class="text-3xl font-extrabold text-yellow-300 dark:text-yellow-400">42</p>
<p class="text-green-300 mt-2 flex items-center"><svg class="h-5 w-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg> +8% from last week</p>
</div>
</section>
<section class="mt-8">
<div class="bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg">
<h2 class="text-xl font-bold text-white dark:text-purple-300 mb-4">Recent Activity</h2>
<ul class="space-y-4">
<li class="flex items-center bg-white bg-opacity-5 dark:bg-gray-700 dark:bg-opacity-10 p-3 rounded-md">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="h-8 w-8 rounded-full mr-3 border border-purple-300 dark:border-purple-500">
<p><span class="font-semibold text-purple-200 dark:text-purple-300">Jane Doe</span> purchased <span class="font-semibold text-blue-200 dark:text-blue-300">Premium Subscription</span>.</p>
<span class="ml-auto text-sm text-gray-300 dark:text-gray-400">2 hours ago</span>
</li>
<li class="flex items-center bg-white bg-opacity-5 dark:bg-gray-700 dark:bg-opacity-10 p-3 rounded-md">
<img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Avatar" class="h-8 w-8 rounded-full mr-3 border border-purple-300 dark:border-purple-500">
<p><span class="font-semibold text-purple-200 dark:text-purple-300">John Smith</span> commented on <span class="font-semibold text-pink-200 dark:text-pink-300">Marketing Report Q3</span>.</p>
<span class="ml-auto text-sm text-gray-300 dark:text-gray-400">1 day ago</span>
</li>
<li class="flex items-center bg-white bg-opacity-5 dark:bg-gray-700 dark:bg-opacity-10 p-3 rounded-md">
<img src="https://randomuser.me/api/portraits/women/60.jpg" alt="Avatar" class="h-8 w-8 rounded-full mr-3 border border-purple-300 dark:border-purple-500">
<p><span class="font-semibold text-purple-200 dark:text-purple-300">Emily White</span> uploaded <span class="font-semibold text-green-200 dark:text-green-300">New Product Images</span>.</p>
<span class="ml-auto text-sm text-gray-300 dark:text-gray-400">3 days ago</span>
</li>
</ul>
</div>
</section>
</main>
</div>
</div>Composants associés
Composant Composants de mise en page
Un composant de mise en page inspiré du brutalisme pour la consommation de contenu avec une palette de couleurs pastel et une complexité modérée, avec un design réactif et une prise en charge du mode sombre.
Mise en page de blog avec barre latérale dégradée
Un composant de mise en page de blog réactif avec une zone de contenu principale et une barre latérale dégradée, avec des couleurs sourdes subtiles, des transitions fluides et une prise en charge complète du mode sombre. Conçu pour la consommation de contenu sur différentes tailles d’écran.
Mise en page rétro des médias sociaux
Une mise en page simple et monochrome à thème rétro pour les réseaux sociaux, avec prise en charge du mode sombre.