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:
- Get the React App with preinstalled tailwind CSS framework.
- DaisyUI (tailwind CSS component library).
- Knowledge about components and how to create one.
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.