Watercolor/Artistic Neon Footer
A simple, responsive footer component with a watercolor/artistic aesthetic and a vibrant neon color scheme, suitable for a portfolio website. Includes dark mode support.
HTML Code
<footer class="relative bg-gradient-to-br from-purple-100 via-pink-100 to-blue-100 text-gray-800 py-8 px-4 sm:px-6 lg:px-8 overflow-hidden dark:from-gray-950 dark:via-gray-900 dark:to-gray-800 dark:text-gray-200">
<!-- Artistic Overlays (Simulated watercolor effect with gradients) -->
<div class="absolute inset-0 z-0 opacity-40 mix-blend-multiply">
<div class="absolute -top-1/4 -left-1/4 w-1/2 h-1/2 bg-blue-400 rounded-full filter blur-3xl opacity-60 dark:bg-blue-600"></div>
<div class="absolute -bottom-1/4 -right-1/4 w-1/2 h-1/2 bg-pink-400 rounded-full filter blur-3xl opacity-60 dark:bg-pink-600"></div>
<div class="absolute top-1/4 right-0 w-1/3 h-1/3 bg-lime-300 rounded-full filter blur-3xl opacity-60 dark:bg-lime-500"></div>
</div>
<div class="relative z-10 max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4 text-center md:text-left">
<div class="flex flex-col items-center md:items-start space-y-2">
<p class="text-3xl font-extrabold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-blue-600 via-pink-600 to-lime-600 dark:from-blue-400 dark:via-pink-400 dark:to-lime-400">
[Your Name/Studio]
</p>
<p class="text-sm text-gray-600 dark:text-gray-400">
© <span id="current-year"></span> All rights reserved.
</p>
</div>
<nav class="flex flex-wrap justify-center md:justify-end gap-x-6 gap-y-2">
<a href="#" class="text-sm font-medium hover:text-blue-500 transition duration-300 dark:hover:text-blue-300">Home</a>
<a href="#" class="text-sm font-medium hover:text-pink-500 transition duration-300 dark:hover:text-pink-300">Portfolio</a>
<a href="#" class="text-sm font-medium hover:text-lime-500 transition duration-300 dark:hover:text-lime-300">About</a>
<a href="#" class="text-sm font-medium hover:text-purple-500 transition duration-300 dark:hover:text-purple-300">Contact</a>
</nav>
</div>
<script>
document.getElementById('current-year').textContent = new Date().getFullYear();
</script>
</footer>
Related Components
Footer Component
A simple responsive footer component designed in a retro/vintage style with a dark theme support, using Tailwind CSS. It features a basic layout suitable for business/corporate websites.
Footer Component
A Footer component designed in a Neumorphism style, supporting responsive effects and dark themes using Tailwind CSS.