Brutalist_Dating_Dashboard
Un composant de tableau de bord de style brutaliste pour les plateformes de rencontres et les réseaux sociaux, avec un design audacieux, un contraste élevé et une palette de couleurs violet/violet. Réactif avec prise en charge du mode sombre.
HTML Code
<div class="min-h-screen bg-purple-100 dark:bg-gray-900 text-purple-900 dark:text-purple-100 font-mono p-4 sm:p-8">
<!-- Brutalist Header -->
<header class="flex flex-col sm:flex-row justify-between items-start sm:items-center py-4 border-b-4 border-purple-900 dark:border-purple-600 mb-8">
<h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold uppercase tracking-wide leading-none mb-4 sm:mb-0">
<span class="block -skew-x-12 bg-purple-900 dark:bg-purple-600 text-purple-100 dark:text-purple-900 px-3 py-1 mr-2 inline-block">Crush</span><span class="block sm:inline-block">Link</span>
</h1>
<nav class="text-lg sm:text-xl font-bold flex flex-wrap gap-x-6 gap-y-2 uppercase">
<a href="#" class="relative group hover:text-purple-700 dark:hover:text-purple-300 transition-colors duration-200">
Profiles
<span class="absolute bottom-0 left-0 w-full h-1 bg-purple-900 dark:bg-purple-600 scale-x-0 group-hover:scale-x-100 origin-left transition-transform duration-300"></span>
</a>
<a href="#" class="relative group hover:text-purple-700 dark:hover:text-purple-300 transition-colors duration-200">
Messages
<span class="absolute bottom-0 left-0 w-full h-1 bg-purple-900 dark:bg-purple-600 scale-x-0 group-hover:scale-x-100 origin-left transition-transform duration-300"></span>
</a>
<a href="#" class="relative group hover:text-purple-700 dark:hover:text-purple-300 transition-colors duration-200">
Likes
<span class="absolute bottom-0 left-0 w-full h-1 bg-purple-900 dark:bg-purple-600 scale-x-0 group-hover:scale-x-100 origin-left transition-transform duration-300"></span>
</a>
<a href="#" class="relative group hover:text-purple-700 dark:hover:text-purple-300 transition-colors duration-200">
Settings
<span class="absolute bottom-0 left-0 w-full h-1 bg-purple-900 dark:bg-purple-600 scale-x-0 group-hover:scale-x-100 origin-left transition-transform duration-300"></span>
</a>
</nav>
</header>
<!-- Main Content Grid -->
<main class="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8">
<!-- Left Sidebar / Profile Section -->
<section class="md:col-span-1 bg-purple-300 dark:bg-purple-800 border-4 border-purple-900 dark:border-purple-600 p-4 sm:p-6 shadow-[8px_8px_0px_0px_rgba(76,29,149,1)] dark:shadow-[8px_8px_0px_0px_rgba(168,85,247,1)]">
<h2 class="text-2xl sm:text-3xl font-extrabold mb-4 uppercase">My Profile</h2>
<div class="flex flex-col items-center text-center">
<div class="w-32 h-32 sm:w-40 sm:h-40 bg-purple-500 dark:bg-purple-900 border-4 border-purple-900 dark:border-purple-600 overflow-hidden relative mb-4 flex items-center justify-center">
<img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Profile Avatar" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-300">
<div class="absolute bottom-2 right-2 w-6 h-6 sm:w-8 sm:h-8 bg-green-500 border-2 border-purple-900 dark:border-purple-600"></div>
</div>
<h3 class="text-xl sm:text-2xl font-bold mb-2 uppercase">Synthya 'Violet' Wave</h3>
<p class="text-lg sm:text-xl font-bold mb-4 bg-purple-900 dark:bg-purple-600 text-purple-100 dark:text-purple-900 px-3 py-1 -skew-x-12 inline-block">28, Musician</p>
<p class="text-base mb-6 italic">"Seeking a connection as deep as a synth bassline. Let's make some noise together."</p>
<div class="flex gap-4">
<button class="px-4 py-2 bg-purple-900 text-purple-100 dark:bg-purple-600 dark:text-purple-900 font-bold uppercase border-2 border-purple-900 dark:border-purple-600 hover:bg-purple-700 dark:hover:bg-purple-500 transition-colors duration-200 shadow-[4px_4px_0px_0px_#4c1d95] dark:shadow-[4px_4px_0px_0px_#a855f7]">Edit Profile</button>
<button class="px-4 py-2 bg-purple-500 text-purple-900 dark:bg-purple-400 dark:text-purple-900 font-bold uppercase border-2 border-purple-900 dark:border-purple-600 hover:bg-purple-400 dark:hover:bg-purple-300 transition-colors duration-200 shadow-[4px_4px_0px_0px_#4c1d95] dark:shadow-[4px_4px_0px_0px_#a855f7]">View Public</button>
</div>
</div>
</section>
<!-- Main Content Area -->
<section class="md:col-span-2 grid grid-cols-1 lg:grid-cols-2 gap-6 sm:gap-8">
<!-- New Matches / Recommendations -->
<div class="bg-purple-300 dark:bg-purple-800 border-4 border-purple-900 dark:border-purple-600 p-4 sm:p-6 shadow-[8px_8px_0px_0px_rgba(76,29,149,1)] dark:shadow-[8px_8px_0px_0px_rgba(168,85,247,1)]">
<h2 class="text-2xl sm:text-3xl font-extrabold mb-4 uppercase">New Crushes</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<!-- Match Card 1 -->
<article class="bg-purple-500 dark:bg-purple-900 border-2 border-purple-900 dark:border-purple-600 p-3 flex flex-col items-center text-center shadow-[4px_4px_0px_0px_rgba(76,29,149,1)] dark:shadow-[4px_4px_0px_0px_rgba(168,85,247,1)]">
<div class="w-24 h-24 sm:w-28 sm:h-28 bg-purple-700 dark:bg-purple-700 border-2 border-purple-900 dark:border-purple-600 overflow-hidden mb-3 relative flex items-center justify-center">
<img src="https://randomuser.me/api/portraits/men/82.jpg" alt="User Avatar" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-300">
<div class="absolute bottom-1 right-1 w-4 h-4 bg-green-500 border border-purple-900 dark:border-purple-600"></div>
</div>
<h3 class="text-lg sm:text-xl font-bold uppercase mb-1 bg-purple-900 dark:bg-purple-600 text-purple-100 dark:text-purple-900 px-2 -skew-x-6 inline-block">Alex 'Byte' Flow</h3>
<p class="text-sm mb-3">29, Developer</p>
<button class="px-3 py-1 bg-purple-900 text-purple-100 dark:bg-purple-600 dark:text-purple-900 font-bold uppercase border-2 border-purple-900 dark:border-purple-600 hover:bg-purple-700 dark:hover:bg-purple-500 transition-colors duration-200 shadow-[2px_2px_0px_0px_#4c1d95] dark:shadow-[2px_2px_0px_0px_#a855f7]">Connect</button>
</article>
<!-- Match Card 2 -->
<article class="bg-purple-500 dark:bg-purple-900 border-2 border-purple-900 dark:border-purple-600 p-3 flex flex-col items-center text-center shadow-[4px_4px_0px_0px_rgba(76,29,149,1)] dark:shadow-[4px_4px_0px_0px_rgba(168,85,247,1)]">
<div class="w-24 h-24 sm:w-28 sm:h-28 bg-purple-700 dark:bg-purple-700 border-2 border-purple-900 dark:border-purple-600 overflow-hidden mb-3 relative flex items-center justify-center">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-300">
<div class="absolute bottom-1 right-1 w-4 h-4 bg-green-500 border border-purple-900 dark:border-purple-600"></div>
</div>
<h3 class="text-lg sm:text-xl font-bold uppercase mb-1 bg-purple-900 dark:bg-purple-600 text-purple-100 dark:text-purple-900 px-2 -skew-x-6 inline-block">Luna 'Rift' Star</h3>
<p class="text-sm mb-3">31, Artist</p>
<button class="px-3 py-1 bg-purple-900 text-purple-100 dark:bg-purple-600 dark:text-purple-900 font-bold uppercase border-2 border-purple-900 dark:border-purple-600 hover:bg-purple-700 dark:hover:bg-purple-500 transition-colors duration-200 shadow-[2px_2px_0px_0px_#4c1d95] dark:shadow-[2px_2px_0px_0px_#a855f7]">Connect</button>
</article>
</div>
<button class="mt-6 w-full px-4 py-2 bg-purple-900 text-purple-100 dark:bg-purple-600 dark:text-purple-900 font-bold uppercase border-2 border-purple-900 dark:border-purple-600 hover:bg-purple-700 dark:hover:bg-purple-500 transition-colors duration-200 shadow-[4px_4px_0px_0px_#4c1d95] dark:shadow-[4px_4px_0px_0px_#a855f7]">Discover More</button>
</div>
<!-- Recent Activity / Messages -->
<div class="bg-purple-300 dark:bg-purple-800 border-4 border-purple-900 dark:border-purple-600 p-4 sm:p-6 shadow-[8px_8px_0px_0px_rgba(76,29,149,1)] dark:shadow-[8px_8px_0px_0px_rgba(168,85,247,1)]">
<h2 class="text-2xl sm:text-3xl font-extrabold mb-4 uppercase">Recent Waves</h2>
<ul class="space-y-4">
<!-- Activity Item 1 -->
<li class="flex items-start gap-3 p-3 bg-purple-500 dark:bg-purple-900 border-2 border-purple-900 dark:border-purple-600 shadow-[2px_2px_0px_0px_rgba(76,29,149,1)] dark:shadow-[2px_2px_0px_0px_rgba(168,85,247,1)]">
<img src="https://randomuser.me/api/portraits/men/21.jpg" alt="User Avatar" class="w-12 h-12 sm:w-16 sm:h-16 border-2 border-purple-900 dark:border-purple-600 object-cover grayscale hover:grayscale-0 transition-all duration-300">
<div>
<p class="font-bold text-lg uppercase bg-purple-900 dark:bg-purple-600 text-purple-100 dark:text-purple-900 px-2 -skew-x-6 inline-block">Kai 'Glitch' Spark</p>
<p class="text-sm mt-1">Sent you a <span class="font-bold text-purple-900 dark:text-purple-300">new message</span>: "Hey, loved your bio! Wanna chat?"</p>
<span class="text-xs text-purple-800 dark:text-purple-200 block mt-1">2 minutes ago</span>
</div>
</li>
<!-- Activity Item 2 -->
<li class="flex items-start gap-3 p-3 bg-purple-500 dark:bg-purple-900 border-2 border-purple-900 dark:border-purple-600 shadow-[2px_2px_0px_0px_rgba(76,29,149,1)] dark:shadow-[2px_2px_0px_0px_rgba(168,85,247,1)]">
<img src="https://randomuser.me/api/portraits/women/33.jpg" alt="User Avatar" class="w-12 h-12 sm:w-16 sm:h-16 border-2 border-purple-900 dark:border-purple-600 object-cover grayscale hover:grayscale-0 transition-all duration-300">
<div>
<p class="font-bold text-lg uppercase bg-purple-900 dark:bg-purple-600 text-purple-100 dark:text-purple-900 px-2 -skew-x-6 inline-block">Zara 'Pulse' Beat</p>
<p class="text-sm mt-1">Liked your <span class="font-bold text-purple-900 dark:text-purple-300">recent photo</span>.</p>
<span class="text-xs text-purple-800 dark:text-purple-200 block mt-1">1 hour ago</span>
</div>
</li>
<!-- Activity Item 3 -->
<li class="flex items-start gap-3 p-3 bg-purple-500 dark:bg-purple-900 border-2 border-purple-900 dark:border-purple-600 shadow-[2px_2px_0px_0px_rgba(76,29,149,1)] dark:shadow-[2px_2px_0px_0px_rgba(168,85,247,1)]">
<img src="https://randomuser.me/api/portraits/men/55.jpg" alt="User Avatar" class="w-12 h-12 sm:w-16 sm:h-16 border-2 border-purple-900 dark:border-purple-600 object-cover grayscale hover:grayscale-0 transition-all duration-300">
<div>
<p class="font-bold text-lg uppercase bg-purple-900 dark:bg-purple-600 text-purple-100 dark:text-purple-900 px-2 -skew-x-6 inline-block">Neo 'Code' Matrix</p>
<p class="text-sm mt-1">Viewed your <span class="font-bold text-purple-900 dark:text-purple-300">profile</span>.</p>
<span class="text-xs text-purple-800 dark:text-purple-200 block mt-1">5 hours ago</span>
</div>
</li>
</ul>
<button class="mt-6 w-full px-4 py-2 bg-purple-900 text-purple-100 dark:bg-purple-600 dark:text-purple-900 font-bold uppercase border-2 border-purple-900 dark:border-purple-600 hover:bg-purple-700 dark:hover:bg-purple-500 transition-colors duration-200 shadow-[4px_4px_0px_0px_#4c1d95] dark:shadow-[4px_4px_0px_0px_#a855f7]">View All Activity</button>
</div>
<!-- Statistics / Quick Links -->
<div class="lg:col-span-2 bg-purple-300 dark:bg-purple-800 border-4 border-purple-900 dark:border-purple-600 p-4 sm:p-6 shadow-[8px_8px_0px_0px_rgba(76,29,149,1)] dark:shadow-[8px_8px_0px_0px_rgba(168,85,247,1)]">
<h2 class="text-2xl sm:text-3xl font-extrabold mb-4 uppercase">Your Stats // Quick Access</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
<!-- Stat Card 1 -->
<div class="bg-purple-500 dark:bg-purple-900 border-2 border-purple-900 dark:border-purple-600 p-3 text-center shadow-[2px_2px_0px_0px_rgba(76,29,149,1)] dark:shadow-[2px_2px_0px_0px_rgba(168,85,247,1)]">
<p class="text-4xl sm:text-5xl font-extrabold text-purple-900 dark:text-purple-300 -skew-y-3">42</p>
<p class="text-sm sm:text-base uppercase">New Likes</p>
</div>
<!-- Stat Card 2 -->
<div class="bg-purple-500 dark:bg-purple-900 border-2 border-purple-900 dark:border-purple-600 p-3 text-center shadow-[2px_2px_0px_0px_rgba(76,29,149,1)] dark:shadow-[2px_2px_0px_0px_rgba(168,85,247,1)]">
<p class="text-4xl sm:text-5xl font-extrabold text-purple-900 dark:text-purple-300 -skew-y-3">18</p>
<p class="text-sm sm:text-base uppercase">Unread Messages</p>
</div>
<!-- Stat Card 3 -->
<div class="bg-purple-500 dark:bg-purple-900 border-2 border-purple-900 dark:border-purple-600 p-3 text-center shadow-[2px_2px_0px_0px_rgba(76,29,149,1)] dark:shadow-[2px_2px_0px_0px_rgba(168,85,247,1)]">
<p class="text-4xl sm:text-5xl font-extrabold text-purple-900 dark:text-purple-300 -skew-y-3">5</p>
<p class="text-sm sm:text-base uppercase">New Matches</p>
</div>
<!-- Stat Card 4 -->
<div class="bg-purple-500 dark:bg-purple-900 border-2 border-purple-900 dark:border-purple-600 p-3 text-center shadow-[2px_2px_0px_0px_rgba(76,29,149,1)] dark:shadow-[2px_2px_0px_0px_rgba(168,85,247,1)]">
<p class="text-4xl sm:text-5xl font-extrabold text-purple-900 dark:text-purple-300 -skew-y-3">124</p>
<p class="text-sm sm:text-base uppercase">Profile Views</p>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<button class="px-4 py-2 bg-purple-900 text-purple-100 dark:bg-purple-600 dark:text-purple-900 font-bold uppercase border-2 border-purple-900 dark:border-purple-600 hover:bg-purple-700 dark:hover:bg-purple-500 transition-colors duration-200 shadow-[4px_4px_0px_0px_#4c1d95] dark:shadow-[4px_4px_0px_0px_#a855f7]">Boost Profile</button>
<button class="px-4 py-2 bg-purple-500 text-purple-900 dark:bg-purple-400 dark:text-purple-900 font-bold uppercase border-2 border-purple-900 dark:border-purple-600 hover:bg-purple-400 dark:hover:bg-purple-300 transition-colors duration-200 shadow-[4px_4px_0px_0px_#4c1d95] dark:shadow-[4px_4px_0px_0px_#a855f7]">Go Incognito</button>
</div>
</div>
</section>
</main>
<!-- Brutalist Footer -->
<footer class="mt-8 py-4 text-center border-t-4 border-purple-900 dark:border-purple-600 text-sm sm:text-base uppercase font-bold">
<p>© 2023 CrushLink Inc. All Rights Reserved. <span class="font-normal italic">No love lost.</span></p>
</footer>
</div>Composants associés
Composant Tableaux de bord
Un composant de tableau de bord minimaliste présentant un design plat avec des effets réactifs et une prise en charge du thème sombre, construit à l’aide de Tailwind CSS.
Dashboard_Event_Conference
Un tableau de bord complexe, sur le thème du monospace/développeur, pour la gestion d’événements et de conférences, avec une palette de couleurs bonbon/sucré et une réactivité totale avec prise en charge du mode sombre.
Composant de tableau de bord
Un composant de tableau de bord simple avec un design 3D et une palette de couleurs pastel, réactif et avec prise en charge du mode sombre.