JSFiddle - React, Tailwind, and code Playground

by Joshua Dwire

HTML

<div id="menu">
<a class="menBtn"href="/news.php">NEWS</a>
<a class="menBtn"href="/photos.php">PHOTOS</a>
<a class="menBtn"href="/give.php">ABOUT</a>
<a class="menBtn"href="/give.php">GIVE</a> 
</div>

CSS

#menu {
  width:100%;
  text-align:center;
  }

.menBtn {
  padding:.25em .5em;
  background:rgba(0,0,0,.7);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  transition: opacity .5s;
  -webkit-transition: opacity .5s;
  font-size:30px;
  color:#c1c3c2;
  }

.menBtn:hover {
  opacity:.75;
  }