How to create Header and Footer using Tailwind CSS

Every website must need to have a structure to provide the users with a great experience while using that website. User experience comes with the User interface. All interfaces include Header, Body, and Footer. In this article, we will be building a Header and Footer using a CSS framework (Tailwind CSS).

Prerequisites:

How to create a Header using TailwindCSS and DaisyUI

  • Open the React Application folder with Visual Studio Code

  • Create a component folder inside src and create a functional component there, named, Header.js

// src/components/Header.js

import React from 'react';

const Header = () => {
    return (
        <div>
            
        </div>
    );
};

export default Header;
  • Write these below code at Header.js 
return (
        <div className="navbar bg-[#FA7D19] text-white  px-16">
            <div className="flex-1">
                <a href="#" className="btn btn-ghost normal-case text-3xl">CodeBun</a>
            </div>
            <div className="flex-none">
                <ul className="menu menu-horizontal p-0 font-bold">
                    <li><a>Home</a></li>
                    <li><a>About</a></li>
                    <li><a>Blogs</a></li>
                    <li><a>Contact Us</a></li>
                </ul>
            </div>
        </div>
    );
// src/components/Header.js


import React from 'react';

const Header = () => {
    return (
        <div className="navbar bg-[#FA7D19] text-white  px-16">
            <div className="flex-1">
                <a href="#" className="btn btn-ghost normal-case text-3xl">CodeBun</a>
            </div>
            <div className="flex-none">
                <ul className="menu menu-horizontal p-0 font-bold">
                    <li><a>Home</a></li>
                    <li><a>About</a></li>
                    <li><a>Blogs</a></li>
                    <li><a>Contact Us</a></li>
                </ul>
            </div>
        </div>
    );
};

export default Header;
  • Import Header component into App.js
// import header component
import Header from "./components/Header";
return (
    <div>
      <Header />
    </div>
  );
// src/App.js

// import header component
import Header from "./components/Header";

function App() {
  return (
    <div>
      <Header />
    </div>
  );
}

export default App;

How to create a Footer using TailwindCSS and DaisyUI

  • Create a Footer component inside src/components folder.

// src/comopnents/Footer.js

import React from 'react';

const Footer = () => {
    return (
        <div>

        </div>
    );
};

export default Footer;
  • Write this below code at Footer.js .
return (

        <div className="bg-[#FA7D19] text-white">
            <footer className="footer p-10 justify-items-center">
                <div>
                    <span className="footer-title">Services</span>
                    <a className="link link-hover">Branding</a>
                    <a className="link link-hover">Design</a>
                    <a className="link link-hover">Developing</a>
                    <a className="link link-hover">Advertisement</a>
                </div>
                <div>
                    <span className="footer-title">Company</span>
                    <a className="link link-hover">About us</a>
                    <a className="link link-hover">Contact</a>
                    <a className="link link-hover">Jobs</a>
                    <a className="link link-hover">Press kit</a>
                </div>
                <div>
                    <span className="footer-title">Legal</span>
                    <a className="link link-hover">Terms of use</a>
                    <a className="link link-hover">Privacy policy</a>
                    <a className="link link-hover">Cookie policy</a>
                </div>
            </footer>
            <div className="text-center py-8">
                <p>Copyright © 2022 - All right reserved by Codebun</p>
            </div>
        </div>
    );
// src/comopnents/Footer.js

import React from 'react';

const Footer = () => {
    return (

        <div className="bg-[#FA7D19] text-white">
            <footer className="footer p-10 justify-items-center">
                <div>
                    <span className="footer-title">Services</span>
                    <a className="link link-hover">Branding</a>
                    <a className="link link-hover">Design</a>
                    <a className="link link-hover">Developing</a>
                    <a className="link link-hover">Advertisement</a>
                </div>
                <div>
                    <span className="footer-title">Company</span>
                    <a className="link link-hover">About us</a>
                    <a className="link link-hover">Contact</a>
                    <a className="link link-hover">Jobs</a>
                    <a className="link link-hover">Press kit</a>
                </div>
                <div>
                    <span className="footer-title">Legal</span>
                    <a className="link link-hover">Terms of use</a>
                    <a className="link link-hover">Privacy policy</a>
                    <a className="link link-hover">Cookie policy</a>
                </div>
            </footer>
            <div className="text-center py-8">
                <p>Copyright © 2022 - All right reserved by Codebun</p>
            </div>
        </div>
    );
};

export default Footer;
  • Import Footer.js and use <Footer /> at App.js, right after <Header />
return (
    <div>
      <Header />
      <div className="min-h-[60vh]"></div>
      <Footer />
    </div>
  );

Note: Added a <div> with a fixed height to maintain a gap between <Header /> and <Footer />

 

// src/App.js


// import header component
import Footer from "./components/Footer";
// import footer component
import Header from "./components/Header";

function App() {
  return (
    <div>
      <Header />
      <div className="min-h-[60vh]"></div>
      <Footer />
    </div>
  );
}

export default App;

The preview of <Footer /> should look like this.

Note: Colors, fonts, and other CSS styles can be modified

 

Note: Every single CSS style can be modified. To know about adding CSS to a React Application, Read this article