JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap-btns text-center" style=" user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;">
<h3 id="title">Which type:</h3>
 <div id="pokeBox" class="container">
 	<img id="image"src="https://media.licdn.com/mpr/mpr/shrinknp_100_100/AAEAAQAAAAAAAAIeAAAAJGVhMzY4MDBlLTBiMTEtNDI0MC04MDQwLTY3MWY3ZWJkYzhkYg.png">
</div>
 <h3 id="ame">Name</h3>

<div id='buttons' style="padding:10px;">
<button id="button1" onclick="button1click()" class="btn  Grass">Grass</button>

<button id="button2" onclick="button2click()" class="btn  Water">Water</button>

<button id="button3" onclick="button3click()" class="btn  Fire">Fire</button>

<button id="button4" onclick="button4click()" class="btn  Fire">Fire</button>

<h3 id="correctT" class="text-center" style="display:none">Will fade in 3 seconds.</h3>
<p id="correctP" class="text-center" style="display:none">Or when clicked</p>

</div>

<div class="clearfix"></div>
</div>

CSS

.btn {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  padding-top: 0;
  padding-bottom: 0;
  width: 150px;
  margin: 10px 10px;
  font: 300 24px/62px "Oswald", sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
  background: #78ec78;
  color: #fafafa;
   -moz-transition: color 0.3s;
  -o-transition: color 0.3s;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
  position: relative;
  background: transparent;


  z-index: 1;
  /* .style1 */
  /* .style2 */
  /* .style3 */
}

.btn:after{
   position: absolute;
  content: '';
  border-style: solid;
  border-color: #1a1a1a;
  border-width: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: 2px;
  z-index: -1;



  -moz-transition: -moz-transform 0.2s, opacity 0.2s, border-width 0.2s;
  -o-transition: -o-transform 0.2s, opacity 0.2s, border-width 0.2s;
  -webkit-transition: -webkit-transform 0.2s, opacity 0.2s, border-width 0.2s;
  transition: transform 0.2s, opacity 0.2s, border-width 0.2s;
}
.btn:focus {
  outline: none;
    color: #fafafa;


}
.btn:hover:after {
  /* @include transform(scale(0.96, 0.85)); */
  border-width: 4px;
}


.btn.Fire {
   border: 3px solid #f08030; 
}

.btn.Fire:after {
   background: #f08030;
}




.btn.Water {
   border: 3px solid #6890f0; 
}

.btn.Water:after {
   background: #6890f0;
}


.btn.Grass {
   border: 3px solid #78c850; 
}

.btn.Grass:after {
   background: #78c850;
}

JavaScript

var waiting;
	function startNext(){
		      		          	$(document).off('click');
                          if(waiting!==null)
		      		          	window.clearTimeout(waiting);
                          waiting = null;
		$('#correctT, #correctP').fadeOut('fast', function(){
      		        $('#button1, #button2, #button3, #button4, #title, #image, #ame').fadeIn('slow');


      	})

	}
	$('#button1, #button2, #button3, #button4').click(function(e){


    $('#button1, #button2, #button3, #button4, #title, #image, #ame').fadeOut('fast', function(){


    	$('#button1, #button2, #button3, #button4, #title, #image, #ame').hide(); 
    	$('#correctT, #correctP').fadeIn('fast');
    	
    	$(document).click(startNext);

			if(waiting===null)
    	waiting = setTimeout(startNext, 2500);



    	

    
    });
});