JSFiddle - React, Tailwind, and code Playground

by thereseel

HTML

<header>
  <nav>
    <ul class="mainnav">
      <li><a href="#">Home</a></li>
      <li><a href="#">Menu</a></li>
      <li><a href="#">Logo</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Location</a></li>
    </ul>
  </nav>
</header>

<footer >
  <section class="footnav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Order</a>
    <a href="#">Jobs</a>
    <a href="#">Contact</a>
  </section>
</footer>

CSS

.mainnav {
	max-width: 800px;
	margin-left: 0;
	margin-bottom: 5px;
	text-align: center;
	display: flex;
	justify-content: space-evenly;
}

.mainnav li {
	display: inline-block;
}

.footnav {
	width: 100%;
	text-align: center;
	display: flex;
	justify-content: space-evenly;
}

.footnav a {
	display: inline-block;
	padding: 10px;
}