JSFiddle - React, Tailwind, and code Playground

by Joe

HTML

<body>

  <!--Menu Start!-->




  <ul>

    <a href="Index.html"><img src="Images/Logo.png" alt="Logo" style="margin-top:0px;margin-left:-20px;margin-bottom:1px;float:left;width:95px;height:45px"></a>
    <li><a href="Index.html">Home</a></li>
    <li class="active"><a href="Positions.html">Positions</a></li>
    <li><a href="About.html">About</a></li>

  </ul>

  <!--Menu End!-->

  <hr>

  <div style="margin:3.0%">
    <h1>Positions</h1>
  </div>
  <hr>
  <div style="margin:3.0%">
    <h1>Volunteer Work Minecraft</h1>
  </div>
  <hr>

  <a href="Builders.html" style="color:#000000">
    <div style="border:3px solid black;width:800px;float:left;margin:5%">
      <center>
        <h1>Builder</h1><br>
        <p style="padding-left:5%;padding-right:5%">We are looking for someone who can offer their building skills and abilities to a passionate team.</p>
      </center>
    </div>
  </a>

  <a href="Programming.html" style="color:#000000">
    <div style="border:3px solid black;width:800px;float:left;margin:5%">
      <center>
        <h1>Plugin Developer</h1><br>
        <p style="padding-left:5%;padding-right:5%">Are you passionate about programming? Well if you are we would like your help on Plugin Development!.</p>
      </center>
    </div>
  </a>

  <!--End of body!-->

  <footer>

    <ul>

      <li><a href=""><img src="Images/Discord.png" alt="Discord" height="35px" width="35px" class="mar"></a></li>
      <li><a href=""><img src="Images/Instagram.png" alt="Instagram" height="35px" width="35px" class="mar"></a></li>
      <li><a href=""><img src="Images/Youtube.png" alt="YouTube" height="35px" width="50px" class="mar"></a></li>
      <li><a href=""><img src="Images/Twitter.png" alt="Twitter" height="35px" width="35px" class="mar"></a></li>

    </ul>

  </footer>
</body>

CSS

.active {
  background-color: #00b8e6;
  color: white;
}

ul {
  float: left;
  width: 100%;
  display: inline-block;
}

li {
  width: 15%;
 position:relative;
 left:20%;
  display: inline-block;
  list-style: none;
}