JSFiddle - React, Tailwind, and code Playground

HTML

<li class="kolonki" style="position:relative;height:40px;width:114px; top: -4px;left:18;align:center;padding:13px;padding-left:13px;padding-right:13px;"><div id="text"><b>hello world</b></div></li>

CSS

li.kolonki {
position:absolute;
 background-color: #804a0b;
background-image: linear-gradient(#cc9a55, #804a0b);
 border-radius: 3px;
 text-transform: uppercase;
 font:12px Arial, Helvetica;
 text-decoration: none;

}


li.kolonki:hover{
	color:#45250a;
	background: #fff9e0;
	background-image: linear-gradient(#f7d683, #e8c478);
}
#text
{
  position: absolute; /*ПОЛОЖЕНИЕ*/
  top:40%;
  left:20%;
  text-align: center;
}