Footer Component
Responsive Footer Component with Skeuomorphism style, Earth tones color scheme, and dark theme support, designed for Social Media."
HTML Code
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Footer Component</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 dark:bg-gray-900">
<footer class="bg-gradient-to-b from-yellow-800 to-yellow-900 text-gray-200 py-8 dark:from-gray-800 dark:to-gray-900">
<div class="container mx-auto px-4 flex flex-col items-center">
<!-- Social Media Links (Skeuomorphism style) -->
<div class="flex space-x-6 mb-6">
<a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-110
bg-gradient-to-br from-yellow-700 to-yellow-800 dark:from-gray-700 dark:to-gray-800
px-4 py-2 rounded-lg shadow-md hover:shadow-lg">
Facebook
</a>
<a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-110
bg-gradient-to-br from-yellow-700 to-yellow-800 dark:from-gray-700 dark:to-gray-800
px-4 py-2 rounded-lg shadow-md hover:shadow-lg">
Twitter
</a>
<a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-110
bg-gradient-to-br from-yellow-700 to-yellow-800 dark:from-gray-700 dark:to-gray-800
px-4 py-2 rounded-lg shadow-md hover:shadow-lg">
Instagram
</a>
</div>
<!-- Copyright Information -->
<p class="text-sm text-gray-400 dark:text-gray-600">& Animations Copyright © 2023 Your Company. All rights reserved.</p>
</div>
</footer>
</body>
</html>Related Components
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.
Luxury_Premium_Crypto_Footer
An elegant, responsive footer component for cryptocurrency/blockchain applications, featuring a limited number of links, copyright, and social media icons. Uses a corporate blue color scheme with dark mode support.
Footer Component
A Neumorphic Footer Component for a Blog/Content Website, Monochromatic color scheme, with dark mode support. It is a moderately complex component. It is responsive.