JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.cssplay.co.uk/menus/ipad/trans.gif"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<div class="mobile__nav-wrapper">
  <button type="button" class="mobile__nav-btn"><i class="fas fa-bars"></i></button>
  <div class="mobile__nav-content">
	  <a href="index.html">Home </a>
		<a href="about.html">About</a>
		<a href="contact.html">Contact</a>
		<a href="news.html">News</a>
	</div>
	<img class="close" src="trans.gif" />
</div>

CSS

.mobile__nav-wrapper{
	display: inline-block;
	position: absolute;
	top:1.6em;
	right: 0.2em;
	font-size: 1rem;
}
@-webkit-keyframes mobile__nav__btn-animation{
	0%   {background-color: rgba(244,244,244,0.95);-webkit-box-shadow: none;box-shadow: none; color: #C0B283;}
	25%  {background-color: rgba(190,170,130,0.95);-webkit-box-shadow: 0 0 5px 5px #F4F4F4;box-shadow: 0 0 5px 5px #F4F4F4; color: #F4F4F4;}
	50%  {background-color: rgba(244,244,244,0.95);-webkit-box-shadow: none;box-shadow: none; color: #C0B283;}
	75%  {background-color: rgba(190,170,130,0.95);-webkit-box-shadow: 0 0 5px 5px #F4F4F4;box-shadow: 0 0 5px 5px #F4F4F4; color: #F4F4F4;}
	100% {background-color: rgba(244,244,244,0.95);-webkit-box-shadow: none;box-shadow: none; color: #C0B283;}
}
@keyframes mobile__nav__btn-animation{
	0%   {background-color: rgba(244,244,244,0.95);-webkit-box-shadow: none;box-shadow: none; color: #C0B283;}
	25%  {background-color: rgba(190,170,130,0.95);-webkit-box-shadow: 0 0 5px 5px #F4F4F4;box-shadow: 0 0 5px 5px #F4F4F4; color: #F4F4F4;}
	50%  {background-color: rgba(244,244,244,0.95);-webkit-box-shadow: none;box-shadow: none; color: #C0B283;}
	75%  {background-color: rgba(190,170,130,0.95);-webkit-box-shadow: 0 0 5px 5px #F4F4F4;box-shadow: 0 0 5px 5px #F4F4F4; color: #F4F4F4;}
	100% {background-color: rgba(244,244,244,0.95);-webkit-box-shadow: none;box-shadow: none; color: #C0B283;}
}
.mobile__nav-btn{
	font-size: 1rem;    
    border: none;
    outline: none;
    color: #575757;
    padding: 0.50em 0.70em;
    background-color: rgba(244,244,244,0.95);
    font-family: inherit;
    margin: 0;
	border-radius: 3px;
	
	-webkit-animation-name: mobile__nav__btn-animation;
	
	        animation-name: mobile__nav__btn-animation;
	-webkit-animation-duration: 3s;
	        animation-duration: 3s;
	-webkit-animation-iteration-count: 1;
	        animation-iteration-count: 1;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode:...