JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<a href="#" onclick="button()" class="button">show</a>
<a href="#" onclick="button2()" class="button2">hide</a>
<div id="show">

</div>
<script>
function button(){
document.getElementById('show').style.visibility='visible';
}
function button2(){
document.getElementById('show').style.visibility='hidden';
}
</script>

CSS

.button, .button2 {
  display: block;
  height: 100px;
  width: 50%;
  background: #34696f;
  border: 2px solid rgba(33, 68, 72, 0.59);
  color: rgba(0, 0, 0, 0.55);
  text-align: center;
  font: bold 3.2em/100px"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  background: linear-gradient(top, #34696f, #2f5f63);
  border-radius: 50px;
  box-shadow: 0 8px 0 #1b383b;
  text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2);
}

#show {
  visibility: hidden;
  height: 100px;
  width: 100px;
  background-image: url(http://lorempixel.com/400/200/);

}