JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<a href="http://[email protected]" class="contact">
	<div class="contact_img"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" version="1.0" fit="" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" style="pointer-events: none; display: inline-block;"><path d="M1.574 5.286l7.5 4.03c.252.134.578.198.906.198.328 0 .654-.064.906-.2l7.5-4.028c.49-.263.95-1.286.054-1.286H1.52c-.896 0-.434 1.023.054 1.286zm17.04 2.203c-.556.288-7.388 3.848-7.728 4.026s-.578.2-.906.2-.566-.022-.906-.2-7.133-3.74-7.688-4.028c-.39-.204-.386.035-.386.22V15c0 .42.566 1 1 1h16c.434 0 1-.58 1-1V7.708s.004-.423-.387-.22z"></path></svg></div>
	<div class="contact_txt"><p>[email protected]</p></div>
</a>

CSS

a,
a:link,
a:visited,
a:hover,
a:active {
	text-decoration: none;
}
.contact_img {
	display: inline-block;
	height: 50px;
	width: 60px;
}
.contact_txt {
	display: inline-block;
	vertical-align: top;
}
.contact:hover {
	color: red;
	fill: red;
}