Brutalist_Pastel_News_Footer
一个复杂的野兽派风格页脚导航组件，适用于新闻/新闻网站，具有柔和的色彩、高对比度和不寻常的布局。它是完全响应的，并支持深色模式。
HTML 代码
<footer class="bg-pink-100 text-purple-900 dark:bg-purple-900 dark:text-pink-100 font-mono border-t-8 border-r-8 border-b-8 border-l-8 border-purple-900 dark:border-pink-100 shadow-[10px_10px_0px_0px_rgba(109,40,217,0.7)] dark:shadow-[10px_10px_0px_0px_rgba(252,211,255,0.7)] transition-all duration-300">
<div class="container mx-auto px-4 py-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-12 lg:gap-16">
<!-- Section 1: Logo and Tagline -->
<div class="col-span-1 md:col-span-2 lg:col-span-1 flex flex-col items-start">
<a href="#" class="text-4xl lg:text-5xl font-black tracking-tighter hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200 uppercase transform -rotate-3 mb-4">
The Squawk
</a>
<p class="text-sm lg:text-base font-bold leading-tight uppercase border-l-4 border-b-4 border-purple-900 dark:border-pink-100 pl-2 pb-1 bg-pink-200 dark:bg-purple-800 inline-block rotate-1">
Unfiltered. Uncensored. Unequivocal.
</p>
</div>
<!-- Section 2: Quick Links -->
<div class="relative col-span-1 border-2 border-dashed border-purple-900 dark:border-pink-100 p-6 -rotate-1 hover:rotate-0 transform transition-transform duration-300">
<h3 class="text-xl lg:text-2xl font-extrabold uppercase mb-4 tracking-tighter absolute -top-4 -left-4 bg-purple-900 text-pink-100 dark:bg-pink-100 dark:text-purple-900 px-3 py-1 border-r-4 border-b-4 border-pink-100 dark:border-purple-900">
Explore
</h3>
<nav class="mt-6">
<ul class="space-y-3">
<li><a href="#" class="text-lg font-bold hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200 flex items-center group"><span class="text-3xl leading-none mr-2 group-hover:animate-bounce-y origin-bottom">➡</span> Breaking News</a></li>
<li><a href="#" class="text-lg font-bold hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200 flex items-center group"><span class="text-3xl leading-none mr-2 group-hover:animate-bounce-y origin-bottom">➡</span> Investigations</a></li>
<li><a href="#" class="text-lg font-bold hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200 flex items-center group"><span class="text-3xl leading-none mr-2 group-hover:animate-bounce-y origin-bottom">➡</span> Opinion Pieces</a></li>
<li><a href="#" class="text-lg font-bold hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200 flex items-center group"><span class="text-3xl leading-none mr-2 group-hover:animate-bounce-y origin-bottom">➡</span> World Affairs</a></li>
<li><a href="#" class="text-lg font-bold hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200 flex items-center group"><span class="text-3xl leading-none mr-2 group-hover:animate-bounce-y origin-bottom">➡</span> Local Report</a></li>
</ul>
</nav>
</div>
<!-- Section 3: Categories & Archives -->
<div class="relative col-span-1 bg-purple-200 dark:bg-purple-700 p-6 transform rotate-2 hover:rotate-0 transition-transform duration-300 border-l-4 border-t-4 border-purple-900 dark:border-pink-100">
<h3 class="text-xl lg:text-2xl font-extrabold uppercase mb-4 tracking-tighter absolute -bottom-4 -right-4 bg-purple-900 text-pink-100 dark:bg-pink-100 dark:text-purple-900 px-3 py-1 border-l-4 border-t-4 border-pink-100 dark:border-purple-900">
Archives
</h3>
<nav class="grid grid-cols-2 gap-4 text-sm lg:text-base font-semibold uppercase">
<ul class="space-y-2">
<li><a href="#" class="hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200">Politics</a></li>
<li><a href="#" class="hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200">Economy</a></li>
<li><a href="#" class="hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200">Science</a></li>
<li><a href="#" class="hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200">Culture</a></li>
</ul>
<ul class="space-y-2">
<li><a href="#" class="hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200">Sports</a></li>
<li><a href="#" class="hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200">Health</a></li>
<li><a href="#" class="hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200">Technology</a></li>
<li><a href="#" class="hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200">Environment</a></li>
</ul>
</nav>
</div>
<!-- Section 4: Contact & Social -->
<div class="col-span-1 flex flex-col items-center md:items-end lg:items-start p-4 border-4 border-double border-purple-900 dark:border-pink-100 transform -rotate-2 hover:rotate-0 transition-transform duration-300">
<h3 class="text-xl lg:text-2xl font-extrabold uppercase mb-4 text-center tracking-tighter bg-purple-900 leading-none p-2 text-pink-100 dark:bg-pink-100 dark:text-purple-900 border-b-4 border-r-4 border-pink-100 dark:border-purple-900">
Get In Touch
</h3>
<address class="not-italic text-sm lg:text-base text-center md:text-right lg:text-left leading-relaxed mb-4">
123 News Alley, Metropolis, NY 10001<br>
<a href="mailto:[email protected]" class="hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200">[email protected]</a><br>
<a href="tel:+15551234567" class="hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200">+1 (555) 123-4567</a>
</address>
<div class="flex space-x-4 mb-4">
<a href="#" class="text-2xl hover:scale-125 transition-transform duration-200 transform rotate-6 hover:rotate-0"><span aria-label="Facebook">📰</span></a>
<a href="#" class="text-2xl hover:scale-125 transition-transform duration-200 transform -rotate-6 hover:rotate-0"><span aria-label="Twitter">🐦</span></a>
<a href="#" class="text-2xl hover:scale-125 transition-transform duration-200 transform rotate-3 hover:rotate-0"><span aria-label="Instagram">📷</span></a>
</div>
<img src="https://picsum.photos/id/1005/100/100" alt="Placeholder image" class="w-16 h-16 object-cover border-4 border-purple-900 dark:border-pink-100 rounded-lg transform -rotate-6 blur-[1px] hover:blur-none transition-all duration-300">
</div>
</div>
<!-- Bottom Bar: Copyright & Impressum -->
<div class="bg-purple-900 text-pink-100 dark:bg-pink-100 dark:text-purple-900 py-4 px-4 text-center text-xs font-bold uppercase tracking-wide border-t-8 border-purple-900 dark:border-pink-100 relative overflow-hidden">
<p class="z-10 relative opacity-90">© 2023 THE SQUAWK. ALL RIGHTS RESERVED. <span class="hidden md:inline">A FREE PRESS INITIATIVE.</span></p>
<a href="#" class="text-pink-300 dark:text-purple-700 hover:underline z-10 relative block md:inline-block md:ml-4 mt-1 md:mt-0">PRIVACY POLICY</a>
<a href="#" class="text-pink-300 dark:text-purple-700 hover:underline z-10 relative block md:inline-block md:ml-4 mt-1 md:mt-0">TERMS OF SERVICE</a>
<div class="absolute inset-0 bg-yellow-300 dark:bg-blue-300 opacity-20 transform -skew-x-12 scale-150 rotate-3 animate-pulse-slow pointer-events-none"></div>
</div>
</footer>
<!-- Tailwind CSS extended configuration for custom animations (add to tailwind.config.js) -->
<style>
@keyframes bounce-y {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); /* Smaller bounce for subtle effect */}
}
.animate-bounce-y {
animation: bounce-y 0.6s infinite alternate ease-in-out;
}
@keyframes pulse-slow {
0%, 100% { opacity: 0.2; transform: -skew-x-12 scale-150 rotate(3); }
50% { opacity: 0.4; transform: -skew-x-12 scale-155 rotate(5); }
}
.animate-pulse-slow {
animation: pulse-slow 8s infinite ease-in-out;
}
</style>相关组件
页脚导航组件
具有深色主题的响应式页脚导航组件，适用于投资组合网站。它具有单色配色方案，具有单一颜色的不同阴影，中等复杂度和一些交互式功能，并使用 Tailwind CSS 进行样式设置，包括带有 dark： 前缀的深色模式支持。
Industrial_Rainbow_Footer_Navigation
一个简单、响应式的页脚导航组件，具有工业美学、裸露的元素和多色彩虹渐变背景，专为金融/银行界面量身定制。包括深色模式支持。