JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box">

<div class="inner" id="01"><a href="#" class="block"><span id="s01" class="s01">A</span></a></div>
<div class="inner" id="02"><a href="#" class="block"><span id="s02" class="s01">B</span></a></div>
</div>

CSS

body {
    
    background-color:navy;
}
#box {
	height: 92px;
	_height: 92px; 
	width: 290px;
	_width: 270px;
	float: left;
	margin-left: 9px;
	margin-top: 48px;
	margin-bottom: 31px;
	margin-right: 26px;
	background-color: #FFF;
	_overflow:hidden;
}
.inner {
	height: 90px;
	width: 141.6px;
	_width: 121.6px;
	background-color: #FFFFFF;
	float: left;
	padding-top: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 16px;
	color: #2DA2A8;
	cursor: pointer;
	z-index:0;
    position: relative;
}
.s01 {
	text-align: center;
	display: block;
	height:100%;
	cursor: pointer;
	padding-top: 36px;
}
.block {
	color:#399;
}

.inner:hover {
    z-index: 1;
}

JavaScript

$(document).ready(function(){
    
    
    $("#01").mouseover(function(){$(this).css({
      transition:"all 1s",transform:"scale(1.2)",
      "background-color":"#24C9C4","border-top":"solid 1px white",
       "border-bottom":"solid 1px white"})})

     $("#01").mouseout(function(){$(this).css({
       transition:"all 1s",transform:"scale(1.0)",
        "background-color":"#FFF","border-top":"none",
         "border-bottom":"none"})})
     
     
     $("#02").mouseover(function(){$(this).css({
      transition:"all 1s",transform:"scale(1.2)",
      "background-color":"#24C9C4","border-top":"solid 1px white",
       "border-bottom":"solid 1px white"})})

     $("#02").mouseout(function(){$(this).css({
       transition:"all 1s",transform:"scale(1.0)",
        "background-color":"#FFF","border-top":"none",
         "border-bottom":"none"})})
     
     
     
     



});