Once tailwind css is added to our website we can create layout to do so we will create layouts sub- directory in src folder. To include header and footer of the website we will create components folder in src. Now in this folder we will create Header.jsx and Footer.jsx file as shown in below.
Header.jsx file
import { Link } from 'gatsby'
import React, { useState } from 'react'
const Header = () => {
const [isToggleOpen, setIsToggleOpen] = useState(false)
return (
<>
<header className="border-b-1 relative z-20 w-full border-b border-slate-200 bg-white/90 shadow-lg shadow-slate-700/5 after:absolute after:top-full after:left-0 after:z-10 after:block after:h-px after:w-full after:bg-slate-200 lg:border-slate-200 lg:backdrop-blur-sm lg:after:hidden">
<div className="relative mx-auto max-w-full px-6 lg:max-w-5xl xl:max-w-7xl 2xl:max-w-[96rem]">
<nav
aria-label="main navigation"
className="flex h-[5.5rem] items-stretch justify-between font-medium text-slate-700"
role="navigation"
>
{/* <!-- Brand logo --> */}
<Link to="/"
id="website_logo"
aria-label="Gatsby Website Logo"
aria-current="page"
className="flex items-center gap-2 whitespace-nowrap py-3 text-lg focus:outline-none lg:flex-1"
>
<svg className="_1nrsgum" width="91" height="24" fill="#663399" viewBox="0 0 106 28"><g><path d="M14,0C6.3,0,0,6.3,0,14s6.3,14,14,14s14-6.3,14-14S21.7,0,14,0z M6.2,21.8c-2.1-2.1-3.2-4.9-3.2-7.6L13.9,25 C11.1,24.9,8.3,23.9,6.2,21.8z M16.4,24.7L3.3,11.6C4.4,6.7,8.8,3,14,3c3.7,0,6.9,1.8,8.9,4.5l-1.5,1.3C19.7,6.5,17,5,14,5 c-3.9,0-7.2,2.5-8.5,6L17,22.5c2.9-1,5.1-3.5,5.8-6.5H18v-2h7C25,19.2,21.3,23.6,16.4,24.7z"></path></g><g fill="#000"><path d="M62.9,12h2.8v10h-2.8v-1.3c-1,1.5-2.3,1.6-3.1,1.6c-3.1,0-5.1-2.4-5.1-5.3c0-3,2-5.3,4.9-5.3c0.8,0,2.3,0.1,3.2,1.6V12z M57.7,17c0,1.6,1.1,2.8,2.8,2.8c1.6,0,2.8-1.2,2.8-2.8c0-1.6-1.1-2.8-2.8-2.8C58.9,14.2,57.7,15.4,57.7,17z"></path><path d="M71.2,14.4V22h-2.8v-7.6h-1.1V12h1.1V8.6h2.8V12h1.9v2.4H71.2z"></path><path d="M79.7,14.4c-0.7-0.6-1.3-0.7-1.6-0.7c-0.7,0-1.1,0.3-1.1,0.8c0,0.3,0.1,0.6,0.9,0.9l0.7,0.2c0.8,0.3,2,0.6,2.5,1.4 c0.3,0.4,0.5,1,0.5,1.7c0,0.9-0.3,1.8-1.1,2.5c-0.8,0.7-1.8,1.1-3,1.1c-2.1,0-3.2-1-3.9-1.7l1.5-1.7c0.6,0.6,1.4,1.2,2.2,1.2 c0.8,0,1.4-0.4,1.4-1.1c0-0.6-0.5-0.9-0.9-1l-0.6-0.2c-0.7-0.3-1.5-0.6-2.1-1.2c-0.5-0.5-0.8-1.1-0.8-1.9c0-1,0.5-1.8,1-2.3 c0.8-0.6,1.8-0.7,2.6-0.7c0.7,0,1.9,0.1,3.2,1.1L79.7,14.4z"></path><path d="M85.8,13.3c1-1.4,2.4-1.6,3.2-1.6c2.9,0,4.9,2.3,4.9,5.3c0,3-2,5.3-5,5.3c-0.6,0-2.1-0.1-3.2-1.6V22H83V5.2h2.8V13.3z M85.5,17c0,1.6,1.1,2.8,2.8,2.8c1.6,0,2.8-1.2,2.8-2.8c0-1.6-1.1-2.8-2.8-2.8C86.6,14.2,85.5,15.4,85.5,17z"></path><path d="M98.5,20.5L93.7,12H97l3.1,5.7l2.8-5.7h3.2l-8,15.3h-3.2L98.5,20.5z"></path><path d="M54,13.7h-2.8c0,0-4.2,0-4.2,0v2.8h3.7c-0.6,1.9-2,3.2-4.6,3.2c-2.9,0-5-2.4-5-5.3S43.1,9,46,9c1.6,0,3.2,0.8,4.2,2.1 l2.3-1.5C51,7.5,48.6,6.3,46,6.3c-4.4,0-8,3.6-8,8.1s3.4,8.1,8,8.1s8-3.6,8-8.1C54.1,14.1,54,13.9,54,13.7z"></path></g></svg>
Gatsby Tailwind Website
</Link>
{/* <!-- Mobile trigger --> */}
<button
className={`relative order-10 block h-10 w-10 self-center lg:hidden
${
isToggleOpen
? "visible opacity-100 [&_span:nth-child(1)]:w-6 [&_span:nth-child(1)]:translate-y-0 [&_span:nth-child(1)]:rotate-45 [&_span:nth-child(3)]:w-0 [&_span:nth-child(2)]:-rotate-45 "
: ""
}
`}
onClick={() => setIsToggleOpen(!isToggleOpen)}
aria-expanded={isToggleOpen ? "true" : "false"}
aria-label="Toggle navigation"
>
<div className="absolute top-1/2 left-1/2 w-6 -translate-x-1/2 -translate-y-1/2 transform">
<span
aria-hidden="true"
className="absolute block h-0.5 w-9/12 -translate-y-2 transform rounded-full bg-slate-900 transition-all duration-300"
></span>
<span
aria-hidden="true"
className="absolute block h-0.5 w-6 transform rounded-full bg-slate-900 transition duration-300"
></span>
<span
aria-hidden="true"
className="absolute block h-0.5 w-1/2 origin-top-left translate-y-2 transform rounded-full bg-slate-900 transition-all duration-300"
></span>
</div>
</button>
{/* <!-- Navigation links --> */}
<ul
role="menubar"
aria-label="Select page"
className={`absolute top-0 left-0 z-[-1] h-[28.5rem] w-full justify-center overflow-hidden overflow-y-auto overscroll-contain bg-white/90 px-8 pb-12 pt-24 font-medium transition-[opacity,visibility] duration-300 lg:visible lg:relative lg:top-0 lg:z-0 lg:flex lg:h-full lg:w-auto lg:items-stretch lg:overflow-visible lg:bg-white/0 lg:px-0 lg:py-0 lg:pt-0 lg:opacity-100 ${
isToggleOpen
? "visible opacity-100 backdrop-blur-sm"
: "invisible opacity-0"
}`}
>
<li role="none" className="flex items-stretch">
<Link to="/"
role="menuitem"
aria-haspopup="false"
tabIndex="0"
className="flex items-center gap-2 py-4 transition-colors duration-300 hover:text-orange-500 focus:bg-orange-50 focus:outline-none focus-visible:outline-none lg:px-8"
>
<span>Home</span>
</Link>
</li>
<li role="none" className="flex items-stretch">
<Link
role="menuitem"
aria-current="page"
aria-haspopup="false"
tabIndex="0"
className="flex items-center gap-2 py-4 text-orange-500 transition-colors duration-300 hover:text-orange-600 focus:bg-orange-50 focus:outline-none focus-visible:outline-none lg:px-8"
to="/features"
>
<span>Features</span>
</Link>
</li>
<li role="none" className="flex items-stretch">
<Link
to="/pricing"
role="menuitem"
aria-haspopup="false"
tabIndex="0"
className="flex items-center gap-2 py-4 transition-colors duration-300 hover:text-orange-500 focus:bg-orange-50 focus:outline-none focus-visible:outline-none lg:px-8"
>
<span>Pricing</span>
</Link>
</li>
<li role="none" className="flex items-stretch">
<Link to="/about"
role="menuitem"
aria-haspopup="false"
tabIndex="0"
className="flex items-center gap-2 py-4 transition-colors duration-300 hover:text-orange-500 focus:bg-orange-50 focus:outline-none focus-visible:outline-none lg:px-8"
>
<span>About</span>
</Link>
</li>
</ul>
</nav>
</div>
</header>
</>
)
}
export default HeaderFooter.jsx file
import React from 'react'
const Footer = () => {
return (
<>
<footer className="w-full text-orange-200">
{/* <!-- Main footer --> */}
<div className="pt-16 pb-12 text-sm border-t border-orange-600 bg-orange-500">
<div className="container px-6 mx-auto">
<div className="grid grid-cols-4 gap-6 md:grid-cols-8 lg:grid-cols-12">
<nav
className="col-span-2 md:col-span-4 lg:col-span-3"
aria-labelledby="footer-header"
>
<h3
className="mb-6 text-base font-medium text-white"
id="footer-header"
>
Product
</h3>
<ul>
<li className="mb-2 leading-6">
<a
href="#"
className="transition-colors duration-300 hover:text-orange-100 focus:text-orange-50"
>
Features
</a>
</li>
<li className="mb-2 leading-6">
<a
href="#"
className="transition-colors duration-300 hover:text-orange-100 focus:text-orange-50"
>
Customers
</a>
</li>
<li className="mb-2 leading-6">
<a
href="#"
className="transition-colors duration-300 hover:text-orange-100 focus:text-orange-50"
>
Why us?
</a>
</li>
<li className="mb-2 leading-6">
<a
href="#"
className="transition-colors duration-300 hover:text-orange-100 focus:text-orange-50"
>
Pricing
</a>
</li>
</ul>
</nav>
<nav
className="col-span-2 md:col-span-4 lg:col-span-3"
aria-labelledby="footer-header"
>
<h3
className="mb-6 text-base font-medium text-white"
id="footer-header "
>
Docs & help
</h3>
<ul>
<li className="mb-2 leading-6">
<a
href="#"
className="transition-colors duration-300 hover:text-orange-100 focus:text-orange-50"
>
Documentation
</a>
</li>
<li className="mb-2 leading-6">
<a
href="#"
className="transition-colors duration-300 hover:text-orange-100 focus:text-orange-50"
>
Training
</a>
</li>
<li className="mb-2 leading-6">
<a
href="#"
className="transition-colors duration-300 hover:text-orange-100 focus:text-orange-50"
>
System status
</a>
</li>
<li className="mb-2 leading-6">
<a
href="#"
className="transition-colors duration-300 hover:text-orange-100 focus:text-orange-50"
>
FAQ's
</a>
</li>
<li className="mb-2 leading-6">
<a
href="#"
className="transition-colors duration-300 hover:text-orange-100 focus:text-orange-50"
>
Help Center
</a>
</li>
</ul>
</nav>
<nav
className="col-span-2 md:col-span-4 lg:col-span-3"
aria-labelledby="footer-header"
>
<h3
className="mb-6 text-base font-medium text-white"
id="footer-header"
>
About us
</h3>
<ul>
<li className="mb-2 leading-6">
<a
href="#"
className="transition-colors duration-300 hover:text-orange-100 focus:text-orange-50"
>
About us
</a>
</li>
<li className="mb-2 leading-6">
<a
href="#"
className="transition-colors duration-300 hover:text-orange-100 focus:text-orange-50"
>
Careers
</a>
</li>
<li className="mb-2 leading-6">
<a
href="#"
className="transition-colors duration-300 hover:text-orange-100 focus:text-orange-50"
>
Leadership
</a>
</li>
<li className="mb-2 leading-6">
<a
href="#"
className="transition-colors duration-300 hover:text-orange-100 focus:text-orange-50"
>
Blog
</a>
</li>
<li className="mb-2 leading-6">
<a
href="#"
className="transition-colors duration-300 hover:text-orange-100 focus:text-orange-50"
>
Events
</a>
</li>
</ul>
</nav>
<nav
className="col-span-2 md:col-span-4 lg:col-span-3"
aria-labelledby="footer-header"
>
<h3
className="mb-6 text-base font-medium text-white"
id="footer-header"
>
Get in touch
</h3>
<ul>
<li className="mb-2 leading-6">
<a
href="#"
className="transition-colors duration-300 hover:text-orange-100 focus:text-orange-50"
>
Contact
</a>
</li>
<li className="mb-2 leading-6">
<a
href="#"
className="transition-colors duration-300 hover:text-orange-100 focus:text-orange-50"
>
Support
</a>
</li>
<li className="mb-2 leading-6">
<a
href="#"
className="transition-colors duration-300 hover:text-orange-100 focus:text-orange-50"
>
Partners
</a>
</li>
<li className="mb-2 leading-6">
<a
href="#"
className="transition-colors duration-300 hover:text-orange-100 focus:text-orange-50"
>
Join research
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
{/* <!-- Subfooter --> */}
<div className="py-4 text-sm border-t border-orange-700 bg-orange-600">
<div className="container px-6 mx-auto">
<div className="grid grid-cols-4 gap-6 md:grid-cols-8 lg:grid-cols-12">
<div className="col-span-2 md:col-span-4 lg:col-span-6">
Copyright 2022 Brand
</div>
<nav
aria-labelledby="footer-social-links"
className="col-span-2 text-right md:col-span-4 lg:col-span-6"
>
<h2 className="sr-only" id="footer-social-links">
Social Media Links
</h2>
<ul className="flex items-center justify-end gap-4">
<li>
<a
href="javascript:void(0)"
className="transition-colors duration-300 hover:text-orange-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 48 48"
height="16"
width="16"
className="w-4 h-4 shrink-0"
role="graphics-symbol"
aria-labelledby="title-tb01 desc-tb01"
>
<title id="title-tb01">Icon title</title>
<desc id="desc-tb01">
A more detailed description of the icon
</desc>
<path
fill="currentColor"
fillRule="evenodd"
d="M37.2491 3.30238C37.0498 2.18649 36.0513 1.49746 34.9878 1.50395C32.2606 1.5206 29.7927 1.60328 27.6333 1.96988C25.4705 2.33708 23.584 2.99414 22.038 4.18283C18.9929 6.52415 17.4377 10.7872 17.3724 18.3217H11.9552C10.9254 18.3217 9.94522 18.9739 9.74313 20.0674C9.51312 21.312 9.33088 23.311 9.75643 25.8014C9.95527 26.9651 10.9939 27.7324 12.1233 27.7324H17.3703V44.3867C17.3703 45.2169 17.8349 46.0595 18.7834 46.2403C19.5015 46.3773 20.6304 46.5002 22.375 46.5002C24.1168 46.5002 25.347 46.3777 26.1718 46.2437C27.2507 46.0684 27.8777 45.1191 27.8777 44.1186V27.7324H34.9316C36.0256 27.7324 37.0562 27.009 37.2608 25.8665C37.6736 23.5618 37.4742 21.4753 37.2437 20.1563C37.0465 19.0284 36.0444 18.3217 34.9653 18.3217H27.8795C27.8917 16.7111 27.9661 15.4564 28.1447 14.4728C28.341 13.3921 28.6547 12.6875 29.1044 12.2048C29.5502 11.7263 30.1817 11.4104 31.1284 11.2121C32.0832 11.0121 33.3126 10.9408 34.9123 10.9193C36.0128 10.9045 37.0511 10.1718 37.2541 9.01765C37.6718 6.64193 37.4794 4.59202 37.2491 3.30238Z"
clipRule="evenodd"
/>
</svg>
</a>
</li>
<li>
<a
href="javascript:void(0)"
className="transition-colors duration-300 hover:text-orange-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 48 48"
height="16"
width="16"
className="w-4 h-4 shrink-0"
role="graphics-symbol"
aria-labelledby="title-tb02 desc-tb02"
>
<title id="title-tb02">Icon title</title>
<desc id="desc-tb02">
A more detailed description of the icon
</desc>
<path
fill="currentColor"
d="M34.7229 4.69819C36.9179 5.13151 38.8231 6.226 39.9574 7.46121L44.8741 7.22772C46.162 7.16656 46.9576 8.61264 46.216 9.66758L42.8041 14.5217C43.7777 35.6815 22.2547 49.0961 4.54954 41.2208C3.75067 40.8654 3.58181 40.0439 3.74682 39.4029C3.91015 38.7685 4.4337 38.1304 5.23631 38.0329C7.74782 37.7279 10.886 36.8951 13.5309 34.8102C11.3351 34.4801 8.87383 33.2203 6.77118 31.5522C4.25179 29.5535 2.11595 26.8651 1.53319 24.2321C1.41942 23.7181 1.60805 23.2504 1.94754 22.9478C2.27981 22.6517 2.75116 22.5146 3.22643 22.6022C4.4998 22.8369 6.44397 23.1705 7.93366 23.3225C7.82715 23.2095 7.71399 23.0872 7.59534 22.9561C6.83881 22.1198 5.85466 20.9171 4.947 19.4528C3.13974 16.5372 1.58717 12.5021 2.86967 8.24191C3.04524 7.65872 3.52191 7.3215 4.02883 7.2399C4.52724 7.15967 5.07712 7.31911 5.46709 7.72851C7.80814 10.1862 13.7896 15.4057 22.914 16.1638C22.5823 14.0277 22.368 9.45707 27.2507 6.17582C29.7236 4.51405 32.4029 4.2402 34.7229 4.69819Z"
/>
</svg>
</a>
</li>
<li>
<a
href="javascript:void(0)"
className="transition-colors duration-300 hover:text-orange-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 48 48"
height="16"
width="16"
className="w-4 h-4 shrink-0"
role="graphics-symbol"
aria-labelledby="title-tb03 desc-tb03"
>
<title id="title-tb03">Icon title</title>
<desc id="desc-tb03">
A more detailed description of the icon
</desc>
<path
fill="currentColor"
fillRule="evenodd"
d="M18.9563 7.52344C18.7526 6.91526 18.1767 6.49018 17.5166 6.51256C13.7277 6.64105 10.4346 7.72034 9.03159 8.24815C8.46409 8.46164 7.98142 8.84195 7.6475 9.35489C6.13235 11.6824 1.35143 20.1396 1.5015 33.9816C1.51112 34.8687 1.87868 35.7421 2.60293 36.3174C4.05518 37.4709 7.22566 39.6169 12.2716 41.1548C13.1338 41.4176 14.1343 41.1791 14.6848 40.3722C15.3668 39.3727 15.9633 38.1197 16.3718 37.1704C16.4818 36.9145 16.7753 36.775 17.0546 36.8566C18.8459 37.3799 21.1512 37.7795 24.0128 37.7795C26.865 37.7795 29.1613 37.3825 30.9459 36.8617C31.2254 36.7802 31.5188 36.9197 31.6289 37.1755C32.0373 38.1241 32.6329 39.3744 33.3137 40.3722C33.8643 41.1791 34.8647 41.4176 35.727 41.1548C40.7729 39.6169 43.9433 37.4709 45.3956 36.3174C46.1198 35.7421 46.4874 34.8687 46.497 33.9816C46.6459 20.2518 41.9432 11.8198 40.3884 9.41269C40.0295 8.85716 39.4986 8.45634 38.8845 8.24366C37.3835 7.72379 33.9285 6.65561 30.4846 6.51532C29.821 6.48828 29.2456 6.91631 29.0422 7.52344L28.5352 9.03687C28.4493 9.293 28.1503 9.47311 27.8343 9.41471C27.0144 9.26322 25.7164 9.09373 24.0128 9.09373C22.2989 9.09373 20.9871 9.26529 20.1611 9.41734C19.8471 9.47513 19.5502 9.29611 19.4648 9.04103L18.9563 7.52344ZM21 25C21 27.7614 18.9853 30 16.5 30C14.0147 30 12 27.7614 12 25C12 22.2386 14.0147 20 16.5 20C18.9853 20 21 22.2386 21 25ZM31.5 30C29.0147 30 27 27.7614 27 25C27 22.2386 29.0147 20 31.5 20C33.9853 20 36 22.2386 36 25C36 27.7614 33.9853 30 31.5 30Z"
clipRule="evenodd"
/>
</svg>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</footer>
</>
)
}
export default FooterInside layouts directory we will create MainLayout.jsx file as shown in below.
import React from 'react'
import Header from '../components/Header'
import Footer from '../components/Footer'
const MainLayout = ({children}) => {
return (
<>
<Header/>
{children}
<Footer/>
</>
)
}
export default MainLayoutOnce layout file is created we can now create other pages in pages directory. We will create pages in next part.