Composant Onglets
Un composant d’onglets de style brutaliste pour les médias sociaux, avec des couleurs complémentaires et un design complexe et réactif, y compris la prise en charge du thème sombre.
HTML Code
<div class="font-mono bg-amber-200 text-purple-900 min-h-screen p-8 dark:bg-purple-900 dark:text-amber-200">
<div class="max-w-4xl mx-auto border-4 border-purple-900 dark:border-amber-200">
<!-- Brutalist Header/Title -->
<h1 class="text-5xl font-extrabold p-4 bg-purple-900 text-amber-200 text-center uppercase tracking-widest border-b-4 border-amber-200 dark:bg-amber-200 dark:text-purple-900 dark:border-purple-900">
Social Feed
</h1>
<!-- Tabs Navigation -->
<div class="flex border-b-4 border-purple-900 dark:border-amber-200">
<button class="flex-1 p-4 text-center text-2xl font-bold uppercase border-r-4 border-purple-900 bg-amber-300 hover:bg-amber-400 dark:border-amber-200 dark:bg-purple-800 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out">
<span class="block transform -skew-x-12">Latest</span>
</button>
<button class="flex-1 p-4 text-center text-2xl font-bold uppercase border-r-4 border-purple-900 bg-amber-300 hover:bg-amber-400 dark:border-amber-200 dark:bg-purple-800 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out">
<span class="block transform -skew-x-12">Popular</span>
</button>
<button class="flex-1 p-4 text-center text-2xl font-bold uppercase bg-amber-300 hover:bg-amber-400 dark:bg-purple-800 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out">
<span class="block transform -skew-x-12">Friends</span>
</button>
</div>
<!-- Tab Content Area -->
<div class="p-4 space-y-8">
<!-- Example Post 1 -->
<div class="border-4 border-purple-900 p-6 bg-amber-100 dark:border-amber-200 dark:bg-purple-700 relative group">
<div class="absolute inset-0 bg-gradient-to-br from-amber-300 to-purple-400 opacity-20 group-hover:opacity-40 transition-opacity duration-300 dark:from-purple-600 dark:to-amber-300"></div>
<div class="relative z-10 flex items-start space-x-4 mb-4">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-purple-900 dark:border-amber-200 object-cover">
<div>
<p class="text-3xl font-extrabold uppercase">@PixelPunk</p>
<p class="text-lg">2 hours ago</p>
</div>
</div>
<p class="text-2xl leading-relaxed mb-4 border-t-2 border-b-2 border-purple-900 py-2 dark:border-amber-200">
Just dropped my new brutalist-inspired digital art piece! Check it out and tell me what you think. #BrutalArt #DigitalDesign #NewWork
</p>
<img src="https://picsum.photos/id/1040/800/400" alt="Post Image" class="w-full h-auto object-cover border-4 border-purple-900 dark:border-amber-200 mb-4">
<div class="flex justify-between items-center text-lg">
<span class="font-bold">1.2K Likes</span>
<a href="#" class="px-6 py-2 bg-purple-900 text-amber-200 border-2 border-amber-200 uppercase font-bold text-center hover:bg-amber-200 hover:text-purple-900 dark:bg-amber-200 dark:text-purple-900 dark:border-purple-900 dark:hover:bg-purple-900 dark:hover:text-amber-200 transition-all duration-200 ease-in-out transform skew-x-12">
Comment
</a>
</div>
</div>
<!-- Example Post 2 -->
<div class="border-4 border-purple-900 p-6 bg-amber-100 dark:border-amber-200 dark:bg-purple-700 relative group">
<div class="absolute inset-0 bg-gradient-to-br from-amber-300 to-purple-400 opacity-20 group-hover:opacity-40 transition-opacity duration-300 dark:from-purple-600 dark:to-amber-300"></div>
<div class="relative z-10 flex items-start space-x-4 mb-4">
<img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-purple-900 dark:border-amber-200 object-cover">
<div>
<p class="text-3xl font-extrabold uppercase">@CodeCrusher</p>
<p class="text-lg">4 hours ago</p>
</div>
</div>
<p class="text-2xl leading-relaxed mb-4 border-t-2 border-b-2 border-purple-900 py-2 dark:border-amber-200">
Just finished coding a new brutalist UI for my dev portfolio. Loving the raw, unrefined aesthetic! #WebDev #BrutalistUI #CodingLife
</p>
<img src="https://picsum.photos/id/1043/800/400" alt="Post Image" class="w-full h-auto object-cover border-4 border-purple-900 dark:border-amber-200 mb-4">
<div class="flex justify-between items-center text-lg">
<span class="font-bold">987 Likes</span>
<a href="#" class="px-6 py-2 bg-purple-900 text-amber-200 border-2 border-amber-200 uppercase font-bold text-center hover:bg-amber-200 hover:text-purple-900 dark:bg-amber-200 dark:text-purple-900 dark:border-purple-900 dark:hover:bg-purple-900 dark:hover:text-amber-200 transition-all duration-200 ease-in-out transform skew-x-12">
Comment
</a>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant Onglets
Un composant d’onglets réactifs avec des micro-interactions pour les sites Web d’entreprise, avec des couleurs complémentaires et la prise en charge du mode sombre.
Composant Onglets
Un composant d’onglets réactifs conçu pour les interfaces de médias sociaux, avec des micro-interactions et un thème sombre. Le composant comprend plusieurs éléments interactifs et utilise Tailwind CSS.
Composant Tabs skeuomorphic
Un composant d’onglets réactifs stylisé avec un skeuomorphisme, utilisant Tailwind CSS pour imiter les éléments de conception du monde réel. Il inclut la prise en charge du thème sombre et des images de remplacement.