Components : Footer Component

Preview content adapted to proportion

Footer Component

Footer

The footer is used to display essential information and links at the bottom of a webpage, enhancing user experience and providing additional navigation options.

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

Users can interact with the footer by clicking on navigation links, contact details, and social media icons. The hover effects on links and icons provide visual feedback.


The footer is designed to be responsive, adapting to different screen sizes using a grid layout. On mobile devices, the columns stack vertically, while on larger screens, they align horizontally.

Date : May 31, 2025
Views : 40
Copys : 0

fa-tags

Personal websites Corporate websites E-commerce platforms Portfolio sites

Code

<footer class="bg-gradient-to-r from-slate-300 to-lavender-200 shadow-lg">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
  <div class="md:grid md:grid-cols-6 md:gap-8 max-md:space-y-6">
   <div class="col-span-2 space-y-4">
    <h3 class="text-2xl font-semibold text-slate-700">
     Contact
    </h3>
    <div class="space-y-2 text-slate-600">
     <p class="flex items-center gap-2">
      <span class="text-xl">
       📌
      </span>
      123 Urban Street
     </p>
     <p class="flex items-center gap-2">
      <span class="text-xl">
       📞
      </span>
      +1 234 567 890
     </p>
     <p class="flex items-center gap-2">
      <span class="text-xl">
       ✉️
      </span>
      [email protected]
     </p>
    </div>
   </div>
   <div class="col-span-2 space-y-4">
    <h3 class="text-2xl font-semibold text-slate-700">
     Navigation
    </h3>
    <nav class="grid grid-cols-2 gap-4 text-slate-600">
     <a class="hover:text-slate-800 transition-colors duration-300" href="#">
      About Us
     </a>
     <a class="hover:text-slate-800 transition-colors duration-300" href="#">
      Services
     </a>
     <a class="hover:text-slate-800 transition-colors duration-300" href="#">
      Portfolio
     </a>
     <a class="hover:text-slate-800 transition-colors duration-300" href="#">
      Blog
     </a>
     <a class="hover:text-slate-800 transition-colors duration-300" href="#">
      Careers
     </a>
     <a class="hover:text-slate-800 transition-colors duration-300" href="#">
      Contact
     </a>
    </nav>
   </div>
   <div class="col-span-2 space-y-4">
    <h3 class="text-2xl font-semibold text-slate-700">
     Connect
    </h3>
    <div class="flex space-x-4">
     <a class="p-2 rounded-full bg-slate-100 hover:bg-slate-200 transition-colors duration-300 hover:scale-105" href="#">
      🐦
     </a>
     <a class="p-2 rounded-full bg-slate-100 hover:bg-slate-200 transition-colors duration-300 hover:scale-105" href="#">
      📸
     </a>
     <a class="p-2 rounded-full bg-slate-100 hover:bg-slate-200 transition-colors duration-300 hover:scale-105" href="#">
      💼
     </a>
     <a class="p-2 rounded-full bg-slate-100 hover:bg-slate-200 transition-colors duration-300 hover:scale-105" href="#">
      🎥
     </a>
     <a class="p-2 rounded-full bg-slate-100 hover:bg-slate-200 transition-colors duration-300 hover:scale-105" href="#">
      📘
     </a>
    </div>
   </div>
  </div>
  <div class="mt-12 border-t border-slate-300 pt-8">
   <p class="text-center text-2xl text-slate-600">
    © 2024 Company Name. All rights reserved.
   </p>
  </div>
 </div>
</footer>


<template>
 <footer class="bg-gradient-to-r from-slate-300 to-lavender-200 shadow-lg">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
   <div class="md:grid md:grid-cols-6 md:gap-8 max-md:space-y-6">
    <div class="col-span-2 space-y-4">
     <h3 class="text-2xl font-semibold text-slate-700">
      Contact
     </h3>
     <div class="space-y-2 text-slate-600">
      <p class="flex items-center gap-2">
       <span class="text-xl">
        📌
       </span>
       123 Urban Street
      </p>
      <p class="flex items-center gap-2">
       <span class="text-xl">
        📞
       </span>
       +1 234 567 890
      </p>
      <p class="flex items-center gap-2">
       <span class="text-xl">
        ✉️
       </span>
       [email protected]
      </p>
     </div>
    </div>
    <div class="col-span-2 space-y-4">
     <h3 class="text-2xl font-semibold text-slate-700">
      Navigation
     </h3>
     <nav class="grid grid-cols-2 gap-4 text-slate-600">
      <a class="hover:text-slate-800 transition-colors duration-300" href="#">
       About Us
      </a>
      <a class="hover:text-slate-800 transition-colors duration-300" href="#">
       Services
      </a>
      <a class="hover:text-slate-800 transition-colors duration-300" href="#">
       Portfolio
      </a>
      <a class="hover:text-slate-800 transition-colors duration-300" href="#">
       Blog
      </a>
      <a class="hover:text-slate-800 transition-colors duration-300" href="#">
       Careers
      </a>
      <a class="hover:text-slate-800 transition-colors duration-300" href="#">
       Contact
      </a>
     </nav>
    </div>
    <div class="col-span-2 space-y-4">
     <h3 class="text-2xl font-semibold text-slate-700">
      Connect
     </h3>
     <div class="flex space-x-4">
      <a class="p-2 rounded-full bg-slate-100 hover:bg-slate-200 transition-colors duration-300 hover:scale-105" href="#">
       🐦
      </a>
      <a class="p-2 rounded-full bg-slate-100 hover:bg-slate-200 transition-colors duration-300 hover:scale-105" href="#">
       📸
      </a>
      <a class="p-2 rounded-full bg-slate-100 hover:bg-slate-200 transition-colors duration-300 hover:scale-105" href="#">
       💼
      </a>
      <a class="p-2 rounded-full bg-slate-100 hover:bg-slate-200 transition-colors duration-300 hover:scale-105" href="#">
       🎥
      </a>
      <a class="p-2 rounded-full bg-slate-100 hover:bg-slate-200 transition-colors duration-300 hover:scale-105" href="#">
       📘
      </a>
     </div>
    </div>
   </div>
   <div class="mt-12 border-t border-slate-300 pt-8">
    <p class="text-center text-2xl text-slate-600">
     © 2024 Company Name. All rights reserved.
    </p>
   </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-gradient-to-r from-slate-300 to-lavender-200 shadow-lg">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
  <div class="md:grid md:grid-cols-6 md:gap-8 max-md:space-y-6">
   <div class="col-span-2 space-y-4">
    <h3 class="text-2xl font-semibold text-slate-700">
     Contact
    </h3>
    <div class="space-y-2 text-slate-600">
     <p class="flex items-center gap-2">
      <span class="text-xl">
       📌
      </span>
      123 Urban Street
     </p>
     <p class="flex items-center gap-2">
      <span class="text-xl">
       📞
      </span>
      +1 234 567 890
     </p>
     <p class="flex items-center gap-2">
      <span class="text-xl">
       ✉️
      </span>
      [email protected]
     </p>
    </div>
   </div>
   <div class="col-span-2 space-y-4">
    <h3 class="text-2xl font-semibold text-slate-700">
     Navigation
    </h3>
    <nav class="grid grid-cols-2 gap-4 text-slate-600">
     <a class="hover:text-slate-800 transition-colors duration-300" href="#">
      About Us
     </a>
     <a class="hover:text-slate-800 transition-colors duration-300" href="#">
      Services
     </a>
     <a class="hover:text-slate-800 transition-colors duration-300" href="#">
      Portfolio
     </a>
     <a class="hover:text-slate-800 transition-colors duration-300" href="#">
      Blog
     </a>
     <a class="hover:text-slate-800 transition-colors duration-300" href="#">
      Careers
     </a>
     <a class="hover:text-slate-800 transition-colors duration-300" href="#">
      Contact
     </a>
    </nav>
   </div>
   <div class="col-span-2 space-y-4">
    <h3 class="text-2xl font-semibold text-slate-700">
     Connect
    </h3>
    <div class="flex space-x-4">
     <a class="p-2 rounded-full bg-slate-100 hover:bg-slate-200 transition-colors duration-300 hover:scale-105" href="#">
      🐦
     </a>
     <a class="p-2 rounded-full bg-slate-100 hover:bg-slate-200 transition-colors duration-300 hover:scale-105" href="#">
      📸
     </a>
     <a class="p-2 rounded-full bg-slate-100 hover:bg-slate-200 transition-colors duration-300 hover:scale-105" href="#">
      💼
     </a>
     <a class="p-2 rounded-full bg-slate-100 hover:bg-slate-200 transition-colors duration-300 hover:scale-105" href="#">
      🎥
     </a>
     <a class="p-2 rounded-full bg-slate-100 hover:bg-slate-200 transition-colors duration-300 hover:scale-105" href="#">
      📘
     </a>
    </div>
   </div>
  </div>
  <div class="mt-12 border-t border-slate-300 pt-8">
   <p class="text-center text-2xl text-slate-600">
    © 2024 Company Name. All rights reserved.
   </p>
  </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.

36
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