JSFiddle - React, Tailwind, and code Playground

HTML

<div class="my-navbar">
 <center>
   <img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
  <a href="Home.html">
    <img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
  </a>
  <img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
  <a href="Information.html">
    <img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
  </a>
  <img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
  <img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
  <img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
  <a href="Schedule.html">
    <img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
  </a>
  <img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
  <a href="#" onClick="document.getElementById('id01').style.display='block'">
    <img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
  </a>
  <img src="https://cdn.pixabay.com/photo/2015/07/25/08/03/the-button-859350_1280.png" alt="" class="navbar-button" />
 </center>
 
 </div>

CSS

.navbar-button {
  margin: 0;
  padding: 0;
  display: block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  height: 10%;
  float:left;
  width:200px;
}