Components : Footer Component

Preview content adapted to proportion

Footer Component

Footer

The footer is used to display essential information and navigation options at the bottom of a webpage, helping users find important links and contact details easily.

This footer component provides a structured layout for various sections including quick links, contact information, legal notices, and social media connections. It features hover effects and responsive design to enhance user interaction.

Users can navigate through quick links, contact details, and social media icons. Hover effects on links and icons provide visual feedback, enhancing the user experience.


The footer adjusts its layout based on screen size. On smaller screens, it stacks vertically, while on larger screens, it uses a grid layout to display content in multiple columns.

Date : June 12, 2025
Views : 18
Copys : 0

fa-tags

Corporate websites, E-commerce platforms, Blogs, Portfolio sites

Code

<footer class="bg-[#2D3436] text-gray-300 py-12 px-4 sm:px-6 lg:px-8">
 <div class="max-w-[1440px] mx-auto space-y-8">
  <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-8 pb-8 border-b border-gradient-to-r from-[#6C91C2] to-transparent">
   <div class="space-y-4">
    <h3 class="text-xl font-semibold text-white">
     Quick Links
    </h3>
    <nav class="flex flex-col space-y-2">
     <a class="hover:text-[#6C91C2] transition-all duration-300 hover:underline underline-offset-4" href="#">
      Home
     </a>
     <a class="hover:text-[#6C91C2] transition-all duration-300 hover:underline underline-offset-4" href="#">
      Products
     </a>
     <a class="hover:text-[#6C91C2] transition-all duration-300 hover:underline underline-offset-4" href="#">
      Services
     </a>
     <a class="hover:text-[#6C91C2] transition-all duration-300 hover:underline underline-offset-4" href="#">
      About
     </a>
    </nav>
   </div>
   <div class="space-y-4">
    <h3 class="text-xl font-semibold text-white">
     Contact
    </h3>
    <div class="flex flex-col space-y-2">
     <p>
      123 Business Street
     </p>
     <p>
      New York, NY 10001
     </p>
     <p>
      Email: [email protected]
     </p>
     <p>
      Phone: (555) 123-4567
     </p>
    </div>
   </div>
   <div class="space-y-4">
    <h3 class="text-xl font-semibold text-white">
     Legal
    </h3>
    <nav class="flex flex-col space-y-2">
     <a class="hover:text-[#6C91C2] transition-all duration-300" href="#">
      Privacy Policy
     </a>
     <a class="hover:text-[#6C91C2] transition-all duration-300" href="#">
      Terms of Service
     </a>
     <a class="hover:text-[#6C91C2] transition-all duration-300" href="#">
      Cookie Policy
     </a>
    </nav>
   </div>
   <div class="space-y-4">
    <h3 class="text-xl font-semibold text-white">
     Connect
    </h3>
    <div class="grid grid-cols-3 gap-4">
     <a class="p-3 bg-gray-700 rounded-lg hover:bg-[#6C91C2] transition-all duration-300 hover:scale-102 flex items-center justify-center" href="#">
      🐦
     </a>
     <a class="p-3 bg-gray-700 rounded-lg hover:bg-[#6C91C2] transition-all duration-300 hover:scale-102 flex items-center justify-center" href="#">
      📸
     </a>
     <a class="p-3 bg-gray-700 rounded-lg hover:bg-[#6C91C2] transition-all duration-300 hover:scale-102 flex items-center justify-center" href="#">
      💼
     </a>
     <a class="p-3 bg-gray-700 rounded-lg hover:bg-[#6C91C2] transition-all duration-300 hover:scale-102 flex items-center justify-center" href="#">
      📘
     </a>
     <a class="p-3 bg-gray-700 rounded-lg hover:bg-[#6C91C2] transition-all duration-300 hover:scale-102 flex items-center justify-center" href="#">
      🎥
     </a>
     <a class="p-3 bg-gray-700 rounded-lg hover:bg-[#6C91C2] transition-all duration-300 hover:scale-102 flex items-center justify-center" href="#">
      💬
     </a>
    </div>
   </div>
  </div>
  <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
   <div class="flex space-x-4">
    <p class="text-sm">
     © 2024 Your Company
    </p>
    <a class="text-sm hover:text-[#6C91C2] transition-all duration-300" href="#">
     Sitemap
    </a>
   </div>
   <div class="flex space-x-4">
    <span class="text-sm">
     Secure Payment:
    </span>
    <div class="flex space-x-2">
     <span>
      💳
     </span>
     <span>
      🔒
     </span>
     <span>
      💰
     </span>
    </div>
   </div>
  </div>
 </div>
</footer>


<template>
 <footer class="bg-[#2D3436] text-gray-300 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-[1440px] mx-auto space-y-8">
   <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-8 pb-8 border-b border-gradient-to-r from-[#6C91C2] to-transparent">
    <div class="space-y-4">
     <h3 class="text-xl font-semibold text-white">
      Quick Links
     </h3>
     <nav class="flex flex-col space-y-2">
      <a class="hover:text-[#6C91C2] transition-all duration-300 hover:underline underline-offset-4" href="#">
       Home
      </a>
      <a class="hover:text-[#6C91C2] transition-all duration-300 hover:underline underline-offset-4" href="#">
       Products
      </a>
      <a class="hover:text-[#6C91C2] transition-all duration-300 hover:underline underline-offset-4" href="#">
       Services
      </a>
      <a class="hover:text-[#6C91C2] transition-all duration-300 hover:underline underline-offset-4" href="#">
       About
      </a>
     </nav>
    </div>
    <div class="space-y-4">
     <h3 class="text-xl font-semibold text-white">
      Contact
     </h3>
     <div class="flex flex-col space-y-2">
      <p>
       123 Business Street
      </p>
      <p>
       New York, NY 10001
      </p>
      <p>
       Email: [email protected]
      </p>
      <p>
       Phone: (555) 123-4567
      </p>
     </div>
    </div>
    <div class="space-y-4">
     <h3 class="text-xl font-semibold text-white">
      Legal
     </h3>
     <nav class="flex flex-col space-y-2">
      <a class="hover:text-[#6C91C2] transition-all duration-300" href="#">
       Privacy Policy
      </a>
      <a class="hover:text-[#6C91C2] transition-all duration-300" href="#">
       Terms of Service
      </a>
      <a class="hover:text-[#6C91C2] transition-all duration-300" href="#">
       Cookie Policy
      </a>
     </nav>
    </div>
    <div class="space-y-4">
     <h3 class="text-xl font-semibold text-white">
      Connect
     </h3>
     <div class="grid grid-cols-3 gap-4">
      <a class="p-3 bg-gray-700 rounded-lg hover:bg-[#6C91C2] transition-all duration-300 hover:scale-102 flex items-center justify-center" href="#">
       🐦
      </a>
      <a class="p-3 bg-gray-700 rounded-lg hover:bg-[#6C91C2] transition-all duration-300 hover:scale-102 flex items-center justify-center" href="#">
       📸
      </a>
      <a class="p-3 bg-gray-700 rounded-lg hover:bg-[#6C91C2] transition-all duration-300 hover:scale-102 flex items-center justify-center" href="#">
       💼
      </a>
      <a class="p-3 bg-gray-700 rounded-lg hover:bg-[#6C91C2] transition-all duration-300 hover:scale-102 flex items-center justify-center" href="#">
       📘
      </a>
      <a class="p-3 bg-gray-700 rounded-lg hover:bg-[#6C91C2] transition-all duration-300 hover:scale-102 flex items-center justify-center" href="#">
       🎥
      </a>
      <a class="p-3 bg-gray-700 rounded-lg hover:bg-[#6C91C2] transition-all duration-300 hover:scale-102 flex items-center justify-center" href="#">
       💬
      </a>
     </div>
    </div>
   </div>
   <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
    <div class="flex space-x-4">
     <p class="text-sm">
      © 2024 Your Company
     </p>
     <a class="text-sm hover:text-[#6C91C2] transition-all duration-300" href="#">
      Sitemap
     </a>
    </div>
    <div class="flex space-x-4">
     <span class="text-sm">
      Secure Payment:
     </span>
     <div class="flex space-x-2">
      <span>
       💳
      </span>
      <span>
       🔒
      </span>
      <span>
       💰
      </span>
     </div>
    </div>
   </div>
  </div>
 </footer>
</template>
<script>
 export default {
    name: 'MyFooterComponent',
    data() {
        return {
        
        }
    },
    methods: {
    },
    mounted() {
    },
    beforeUnmount() {
    }
}
</script>
<style scoped="">
</style>



import React from "react";
const MyFooterComponent = () => {
    return (
<div>
<footer class="bg-[#2D3436] text-gray-300 py-12 px-4 sm:px-6 lg:px-8">
 <div class="max-w-[1440px] mx-auto space-y-8">
  <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-8 pb-8 border-b border-gradient-to-r from-[#6C91C2] to-transparent">
   <div class="space-y-4">
    <h3 class="text-xl font-semibold text-white">
     Quick Links
    </h3>
    <nav class="flex flex-col space-y-2">
     <a class="hover:text-[#6C91C2] transition-all duration-300 hover:underline underline-offset-4" href="#">
      Home
     </a>
     <a class="hover:text-[#6C91C2] transition-all duration-300 hover:underline underline-offset-4" href="#">
      Products
     </a>
     <a class="hover:text-[#6C91C2] transition-all duration-300 hover:underline underline-offset-4" href="#">
      Services
     </a>
     <a class="hover:text-[#6C91C2] transition-all duration-300 hover:underline underline-offset-4" href="#">
      About
     </a>
    </nav>
   </div>
   <div class="space-y-4">
    <h3 class="text-xl font-semibold text-white">
     Contact
    </h3>
    <div class="flex flex-col space-y-2">
     <p>
      123 Business Street
     </p>
     <p>
      New York, NY 10001
     </p>
     <p>
      Email: [email protected]
     </p>
     <p>
      Phone: (555) 123-4567
     </p>
    </div>
   </div>
   <div class="space-y-4">
    <h3 class="text-xl font-semibold text-white">
     Legal
    </h3>
    <nav class="flex flex-col space-y-2">
     <a class="hover:text-[#6C91C2] transition-all duration-300" href="#">
      Privacy Policy
     </a>
     <a class="hover:text-[#6C91C2] transition-all duration-300" href="#">
      Terms of Service
     </a>
     <a class="hover:text-[#6C91C2] transition-all duration-300" href="#">
      Cookie Policy
     </a>
    </nav>
   </div>
   <div class="space-y-4">
    <h3 class="text-xl font-semibold text-white">
     Connect
    </h3>
    <div class="grid grid-cols-3 gap-4">
     <a class="p-3 bg-gray-700 rounded-lg hover:bg-[#6C91C2] transition-all duration-300 hover:scale-102 flex items-center justify-center" href="#">
      🐦
     </a>
     <a class="p-3 bg-gray-700 rounded-lg hover:bg-[#6C91C2] transition-all duration-300 hover:scale-102 flex items-center justify-center" href="#">
      📸
     </a>
     <a class="p-3 bg-gray-700 rounded-lg hover:bg-[#6C91C2] transition-all duration-300 hover:scale-102 flex items-center justify-center" href="#">
      💼
     </a>
     <a class="p-3 bg-gray-700 rounded-lg hover:bg-[#6C91C2] transition-all duration-300 hover:scale-102 flex items-center justify-center" href="#">
      📘
     </a>
     <a class="p-3 bg-gray-700 rounded-lg hover:bg-[#6C91C2] transition-all duration-300 hover:scale-102 flex items-center justify-center" href="#">
      🎥
     </a>
     <a class="p-3 bg-gray-700 rounded-lg hover:bg-[#6C91C2] transition-all duration-300 hover:scale-102 flex items-center justify-center" href="#">
      💬
     </a>
    </div>
   </div>
  </div>
  <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
   <div class="flex space-x-4">
    <p class="text-sm">
     © 2024 Your Company
    </p>
    <a class="text-sm hover:text-[#6C91C2] transition-all duration-300" href="#">
     Sitemap
    </a>
   </div>
   <div class="flex space-x-4">
    <span class="text-sm">
     Secure Payment:
    </span>
    <div class="flex space-x-2">
     <span>
      💳
     </span>
     <span>
      🔒
     </span>
     <span>
      💰
     </span>
    </div>
   </div>
  </div>
 </div>
</footer>

</div>
    )
}
export default MyFooterComponent;

Recommended Related Components

More+

Footer Component

The footer is used to display essential information and links at the bottom of a webpage, enhancing user experience and providing additional <span style="color:red !important">nav</span>igation options.

40
0

Footer Component

It is used to display essential information and <span style="color:red !important">nav</span>igation options at the bottom of a webpage.

37
0

Footer Component

The footer is used to display essential information and navigation options at the bottom of a webpage, helping users find important links and contact details easily.

18
0

Footer Component

The footer is used to display essential information and links at the bottom of a webpage, enhancing user experience and providing access to important resources.

10
0