用于社交媒体的野兽派风格选项卡组件,具有互补色和复杂的响应式设计,包括深色主题支持。
<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>
一个具有 glassmorphism 风格的响应式选项卡组件,专为社交媒体界面设计。它使用具有灰度配色方案的 Tailwind CSS 具有类似磨砂玻璃的效果。该设计支持深色模式。
一个考虑到暗黑模式的响应式标签组件,使用Tailwind CSS设计。
一个极简主义且充满活力的标签组件,用于电子商务,具有适度复杂性、响应式设计和深色主题支持,使用 Tailwind CSS 和 HTML 实现。