JSFiddle - React, Tailwind, and code Playground

HTML

<div id="gruen">GrĂĽne Box</div>
<div id="blau">Blaue Box</div>

CSS

div    {font:normal 17px verdana; 

text-align:center;
position:absolute;
top:20px;
width:140px;
padding:1em;
border:1em solid #555;
border-radius:7px
}

#gruen {left:20px}
#blau  {left:250px}

#gruen:hover,
#blau:hover{
  cursor: pointer;
  -webkit-transition: background-color 1s ease-out;
  -moz-transition: background-color 1s ease-out;
  -o-transition: background-color 1s ease-out;
  transition: background-color 1s ease-out;}
  
#gruen:hover {background-color: lightgreen} 
#blau:hover  {background-color: lightblue}