JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box1"><a href="https://www.google.co.uk" target="_self"><font color = #ffffff>Google</font></a>
</div>

CSS

.box1 {
     background: #ffd700;
     border-radius: 6px;
     cursor: pointer;
     height: 100px;
     line-height: 100px;
     text-align: center;
     transition-property: background;
     transition-duration: 1s;
     transition-timing-function: linear;
     width: 100px;
     position: relative;
     left: 0px;
     top: 0px;
     z-index:2;
 }
 .box1:hover {
     background: #990033;
 }

.box1 a{
    display:block;
    position:absolute;
    top:0px;
    left:0px;
    bottom:0px;
    right:0px;
}