JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="list-social">
											<li class="icon-soc"><a href="#">&#xf003;</a></li><span><a href="mailto:#">#</a></span>
											<li class="icon-soc"><a href="#">&#xf095;</a></li><span>Mobile: <a href="tel:2042927767">204.555.5555</a><br>Manitoba HQ: <a href="tel:2048229509">204.555.5555</a><br>Ontario HQ: <a href="tel:5196767900">519.555.55555</a></span>
										</ul>

CSS

li.icon-soc + span{display:block;opacity:0;-webkit-transition:1s ease-in-out;transition:1s ease-in-out;}

li.icon-soc:hover + span, li.icon-soc + span:hover{opacity:1;padding:15px;background:#CD1300;color:#FFF;-webkit-transition:.5s ease-in-out;transition:.5s ease-in-out;}

li.icon-soc + span a{color:#fff}
li.icon-soc + span a:hover{text-decoration:underline;}