JSFiddle - React, Tailwind, and code Playground

by raccoon89

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"onmouseout="this.className='tel'; 
      Document.getElementById('texty').innerHTML='<p>[email protected]</p>';"  onMouseOver="this.className='1'; document.getElementById('texty').innerHTML='<p>8 912 77 20 444</p>';"></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>

</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;}