JSFiddle - React, Tailwind, and code Playground

by Daniel Tan

HTML

<div class="navbar">
  <ul>
      <li><a href="#">NAVBAR link</a></li>
  </ul>
</div>
<a href="#">Not NAVBAR link</a>

CSS

a {
  text-decoration:none !important;
  color:#3D64FF;
	text-shadow:none;
	padding:0;
		
	-webkit-transition: text-shadow 0.1s linear,padding 0.1s linear;
	-moz-transition: text-shadow 0.1s linear,padding 0.1s linear;
	-o-transition: text-shadow 0.1s linear,padding 0.1s linear;
	transition: text-shadow 0.1s linear,padding 0.1s linear;
}
a:hover {
	text-shadow: 0px 0px 5px #3D64FF;
	padding:0 5px;
	
	-webkit-transition: text-shadow 0.1s linear,padding 0.1s linear;
	-moz-transition: text-shadow 0.1s linear,padding 0.1s linear;
	-o-transition: text-shadow 0.1s linear,padding 0.1s linear;
	transition: text-shadow 0.1s linear,padding 0.1s linear;
}
a:active {
	text-shadow: 0px 0px 7px #3556DB;
	padding:0 2px;
	
	-webkit-transition: text-shadow 0.1s linear,padding 0.1s linear;
	-moz-transition: text-shadow 0.1s linear,padding 0.1s linear;
	-o-transition: text-shadow 0.1s linear,padding 0.1s linear;
	transition: text-shadow 0.1s linear,padding 0.1s linear;
}
.navbar a, .navbar a:hover, .navbar a:active {
  text-shadow:none;
  padding:0;
  -webkit-transition-property: none;
  -moz-transition-property: none;
  -o-transition-property: none;
  transition-property: none;
}