JSFiddle - React, Tailwind, and code Playground

by Ashish Kasama

HTML

<div id="box">roll over me</div>

CSS

#box{
 position : relative;
 width : 100px;
 height : 100px;
 background-color : gray;
 border : 5px solid black;    
 -webkit-transition : border 500ms ease-out; 
 -moz-transition : border 500ms ease-out;
 -o-transition : border 500ms ease-out;
}

#box:hover{
   border : 10px solid red;   
}

.box:after {
  background: linear-gradient(to right, #bcbcbc 25%,#ffcd02 25%, #ffcd02 50%, #e84f47 50%, #e84f47 75%, #65c1ac 75%);
  position: absolute;
  content: '';
  height: 4px;
  right: 0;
  left: 0;
  top: 0;
}