JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
	<ul>
	  <li><a class="vk" href="#" target="_blank"></a></li>
	  <li><a class="tw" href="#" target="_blank"></a></li>
      <li><a class="tel" onmouseover="if (document.getElementById('texty').innerHTML!='[email protected]') {document.getElementById('texty').innerHTML='[email protected]'} else {document.getElementById('texty').innerHTML='8 912 77 20 444'}" onmouseout="if (document.getElementById('texty').innerHTML!='8 912 77 20 444') {document.getElementById('texty').innerHTML='8 912 77 20 444'} else {document.getElementById('texty').innerHTML='[email protected]'}"></a></li>


	  <li><a class="mail" href="mailto:[email protected]"></a>
      <div id="texty">mail<font color="#c33a5c">@</font>fuze.pro</div></li>
		</ul>
</div>

CSS

#texty {
	text-decoration:underline;
	color:#555555;
	text-align:center;
	font-size: 30px;
	margin-top: 7%;
	margin-left:25px;
	}

.tel1 {
	text-decoration:underline;
	color:#555555;
	text-align:center;
	font-size: 30px;
	margin-top: 7%;
	margin-left:25px;
	}		
	
.menu{width:600px; padding:0; margin-top: 15%;}
.menu li{float:left; list-style:none;}
.menu a.vk{display:block;width:75px; height:167px; line-height:36px; padding:0px 10px 0px 10px; background-image:url(../image/vk.png); background-repeat:no-repeat;}
.menu a.vk:hover{background-image:url(../image/vk1.png); background-repeat:no-repeat;}

.menu a.tw{display:block;width:75px; height:167px; line-height:36px; padding:0px 10px 0px 10px; background-image:url(../image/tw.png); background-repeat:no-repeat;}
.menu a.tw:hover{background-image:url(../image/tw1.png); background-repeat:no-repeat;}

.menu a.tel{ display:block; width:75px; height:75px; line-height:36px;  background-image:url(../image/tel.png); background-repeat:no-repeat;}
.menu a.tel:hover{background-image:url(../image/tel1.png); background-repeat:no-repeat;}