Components : Footer Component

Preview content adapted to proportion

Footer Component

Footer

It is used to display essential information and navigation options at the bottom of a webpage.

This component provides a structured and visually appealing footer for a website, featuring contact information, quick links, and social media icons.

The footer includes interactive elements such as a mobile menu button, hoverable links, and social media icons that change appearance on interaction.


The design is responsive, with a single column layout on mobile devices and a multi-column layout on larger screens. The mobile menu button collapses the footer content for smaller screens.

Date : June 06, 2025
Views : 37
Copys : 0

fa-tags

Corporate websites E-commerce platforms Portfolio sites Blog platforms

Code

<footer class="relative bg-gradient-to-r from-[#1e3a8a] to-[#4b7cbf] shadow-2xl">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-12 pb-20">
  <div class="md:hidden mb-8">
   <button class="text-white w-full flex justify-end">
    <div class="space-y-2">
     <span class="block w-6 h-0.5 bg-white">
     </span>
     <span class="block w-6 h-0.5 bg-white">
     </span>
     <span class="block w-4 h-0.5 bg-white">
     </span>
    </div>
   </button>
  </div>
  <div class="grid grid-cols-1 md:grid-cols-6 gap-8">
   <div class="md:col-span-2">
    <h3 class="text-white font-bold text-xl mb-4">
     Contact Us
    </h3>
    <div class="flex flex-col space-y-3">
     <div class="flex items-center space-x-2">
      <span class="bg-white p-2 rounded-full">
       📍
      </span>
      <span class="text-gray-200">
       123 Business Street
      </span>
     </div>
     <div class="flex items-center space-x-2">
      <span class="bg-white p-2 rounded-full">
       📞
      </span>
      <span class="text-gray-200">
       +1 (555) 123-4567
      </span>
     </div>
     <div class="flex items-center space-x-2">
      <span class="bg-white p-2 rounded-full">
       📧
      </span>
      <span class="text-gray-200">
       [email protected]
      </span>
     </div>
    </div>
   </div>
   <div class="md:col-span-3 hidden md:block">
    <h3 class="text-white font-bold text-xl mb-4">
     Quick Links
    </h3>
    <ul class="grid grid-cols-2 gap-4">
     <li>
      <a class="text-gray-200 hover:text-white transition-colors duration-300" href="#">
       About Us
      </a>
     </li>
     <li>
      <a class="text-gray-200 hover:text-white transition-colors duration-300" href="#">
       Services
      </a>
     </li>
     <li>
      <a class="text-gray-200 hover:text-white transition-colors duration-300" href="#">
       Portfolio
      </a>
     </li>
     <li>
      <a class="text-gray-200 hover:text-white transition-colors duration-300" href="#">
       Careers
      </a>
     </li>
     <li>
      <a class="text-gray-200 hover:text-white transition-colors duration-300" href="#">
       Blog
      </a>
     </li>
     <li>
      <a class="text-gray-200 hover:text-white transition-colors duration-300" href="#">
       Support
      </a>
     </li>
    </ul>
   </div>
   <div class="md:col-span-1">
    <h3 class="text-white font-bold text-xl mb-4">
     Follow Us
    </h3>
    <div class="flex space-x-4">
     <a class="bg-white/20 p-2 rounded-full hover:bg-white/30 transition-all duration-300" href="#">
      📘
     </a>
     <a class="bg-white/20 p-2 rounded-full hover:bg-white/30 transition-all duration-300" href="#">
      📷
     </a>
     <a class="bg-white/20 p-2 rounded-full hover:bg-white/30 transition-all duration-300" href="#">
      💼
     </a>
     <a class="bg-white/20 p-2 rounded-full hover:bg-white/30 transition-all duration-300" href="#">
      🌐
     </a>
    </div>
   </div>
  </div>
  <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 text-center text-gray-300 text-sm">
   © 2024 Company Name. All rights reserved.
  </div>
 </div>
</footer>


<template>
 <footer class="relative bg-gradient-to-r from-[#1e3a8a] to-[#4b7cbf] shadow-2xl">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-12 pb-20">
   <div class="md:hidden mb-8">
    <button class="text-white w-full flex justify-end">
     <div class="space-y-2">
      <span class="block w-6 h-0.5 bg-white">
      </span>
      <span class="block w-6 h-0.5 bg-white">
      </span>
      <span class="block w-4 h-0.5 bg-white">
      </span>
     </div>
    </button>
   </div>
   <div class="grid grid-cols-1 md:grid-cols-6 gap-8">
    <div class="md:col-span-2">
     <h3 class="text-white font-bold text-xl mb-4">
      Contact Us
     </h3>
     <div class="flex flex-col space-y-3">
      <div class="flex items-center space-x-2">
       <span class="bg-white p-2 rounded-full">
        📍
       </span>
       <span class="text-gray-200">
        123 Business Street
       </span>
      </div>
      <div class="flex items-center space-x-2">
       <span class="bg-white p-2 rounded-full">
        📞
       </span>
       <span class="text-gray-200">
        +1 (555) 123-4567
       </span>
      </div>
      <div class="flex items-center space-x-2">
       <span class="bg-white p-2 rounded-full">
        📧
       </span>
       <span class="text-gray-200">
        [email protected]
       </span>
      </div>
     </div>
    </div>
    <div class="md:col-span-3 hidden md:block">
     <h3 class="text-white font-bold text-xl mb-4">
      Quick Links
     </h3>
     <ul class="grid grid-cols-2 gap-4">
      <li>
       <a class="text-gray-200 hover:text-white transition-colors duration-300" href="#">
        About Us
       </a>
      </li>
      <li>
       <a class="text-gray-200 hover:text-white transition-colors duration-300" href="#">
        Services
       </a>
      </li>
      <li>
       <a class="text-gray-200 hover:text-white transition-colors duration-300" href="#">
        Portfolio
       </a>
      </li>
      <li>
       <a class="text-gray-200 hover:text-white transition-colors duration-300" href="#">
        Careers
       </a>
      </li>
      <li>
       <a class="text-gray-200 hover:text-white transition-colors duration-300" href="#">
        Blog
       </a>
      </li>
      <li>
       <a class="text-gray-200 hover:text-white transition-colors duration-300" href="#">
        Support
       </a>
      </li>
     </ul>
    </div>
    <div class="md:col-span-1">
     <h3 class="text-white font-bold text-xl mb-4">
      Follow Us
     </h3>
     <div class="flex space-x-4">
      <a class="bg-white/20 p-2 rounded-full hover:bg-white/30 transition-all duration-300" href="#">
       📘
      </a>
      <a class="bg-white/20 p-2 rounded-full hover:bg-white/30 transition-all duration-300" href="#">
       📷
      </a>
      <a class="bg-white/20 p-2 rounded-full hover:bg-white/30 transition-all duration-300" href="#">
       💼
      </a>
      <a class="bg-white/20 p-2 rounded-full hover:bg-white/30 transition-all duration-300" href="#">
       🌐
      </a>
     </div>
    </div>
   </div>
   <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 text-center text-gray-300 text-sm">
    © 2024 Company Name. All rights reserved.
   </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="relative bg-gradient-to-r from-[#1e3a8a] to-[#4b7cbf] shadow-2xl">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-12 pb-20">
  <div class="md:hidden mb-8">
   <button class="text-white w-full flex justify-end">
    <div class="space-y-2">
     <span class="block w-6 h-0.5 bg-white">
     </span>
     <span class="block w-6 h-0.5 bg-white">
     </span>
     <span class="block w-4 h-0.5 bg-white">
     </span>
    </div>
   </button>
  </div>
  <div class="grid grid-cols-1 md:grid-cols-6 gap-8">
   <div class="md:col-span-2">
    <h3 class="text-white font-bold text-xl mb-4">
     Contact Us
    </h3>
    <div class="flex flex-col space-y-3">
     <div class="flex items-center space-x-2">
      <span class="bg-white p-2 rounded-full">
       📍
      </span>
      <span class="text-gray-200">
       123 Business Street
      </span>
     </div>
     <div class="flex items-center space-x-2">
      <span class="bg-white p-2 rounded-full">
       📞
      </span>
      <span class="text-gray-200">
       +1 (555) 123-4567
      </span>
     </div>
     <div class="flex items-center space-x-2">
      <span class="bg-white p-2 rounded-full">
       📧
      </span>
      <span class="text-gray-200">
       [email protected]
      </span>
     </div>
    </div>
   </div>
   <div class="md:col-span-3 hidden md:block">
    <h3 class="text-white font-bold text-xl mb-4">
     Quick Links
    </h3>
    <ul class="grid grid-cols-2 gap-4">
     <li>
      <a class="text-gray-200 hover:text-white transition-colors duration-300" href="#">
       About Us
      </a>
     </li>
     <li>
      <a class="text-gray-200 hover:text-white transition-colors duration-300" href="#">
       Services
      </a>
     </li>
     <li>
      <a class="text-gray-200 hover:text-white transition-colors duration-300" href="#">
       Portfolio
      </a>
     </li>
     <li>
      <a class="text-gray-200 hover:text-white transition-colors duration-300" href="#">
       Careers
      </a>
     </li>
     <li>
      <a class="text-gray-200 hover:text-white transition-colors duration-300" href="#">
       Blog
      </a>
     </li>
     <li>
      <a class="text-gray-200 hover:text-white transition-colors duration-300" href="#">
       Support
      </a>
     </li>
    </ul>
   </div>
   <div class="md:col-span-1">
    <h3 class="text-white font-bold text-xl mb-4">
     Follow Us
    </h3>
    <div class="flex space-x-4">
     <a class="bg-white/20 p-2 rounded-full hover:bg-white/30 transition-all duration-300" href="#">
      📘
     </a>
     <a class="bg-white/20 p-2 rounded-full hover:bg-white/30 transition-all duration-300" href="#">
      📷
     </a>
     <a class="bg-white/20 p-2 rounded-full hover:bg-white/30 transition-all duration-300" href="#">
      💼
     </a>
     <a class="bg-white/20 p-2 rounded-full hover:bg-white/30 transition-all duration-300" href="#">
      🌐
     </a>
    </div>
   </div>
  </div>
  <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 text-center text-gray-300 text-sm">
   © 2024 Company Name. All rights reserved.
  </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.

17
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