JSFiddle - React, Tailwind, and code Playground

by Murali Kaliappan

HTML

<h2>Hello</h2>

CSS

*{
  font-family:"Helvetica";
}
h2{ 
  display:inline-block;
  margin-left:45%;
  margin-top:5%;
  letter-spacing:1px;
  padding:8px 32px;
  border:1px solid #e1e1e1;
  border-radius:4px; 
  position:relative;
  text-decoration:none;font-size:12px;
}
h2:before{
  content:"";
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background-color:blue;
  position:absolute;
  visibility:hidden;  
  transform:scaleX(0);
  transition:all 0.3s ease-in-out;  
}
h2:hover{
  cursor:pointer;
  box-shadow:3px 3px 2px #e2e2e2;
}
h2:hover:before{
  visibility:visible;
  transform:scaleX(1);
  
}