JSFiddle - React, Tailwind, and code Playground

HTML

<div id="titlebox">
    <div class="contactbox left">
        <a href="https://twitter.com/D4NiMG" class="contactchild" id="contacttwittertext">
            <span class="contacticon-twitter"></span><span class="contacttext">@D4NiMG</span>
        </a>
        <a href="https://plus.google.com/+DaniMu%C3%B1ozGuardiola" class="contactchild" id="contactgoogleplustext">
            <span class="contacticon-google-plus"></span><span class="contacttext">+DaniMuñozGuardiola</span>
        </a>
    </div>
    <span id="titlespan">Dani Guardiola</span>
    <div class="contactbox right">
        <a href="mailto:[email protected]" class="contactchild" id="contactemailtext">
            <span class="contacticon-email"></span><span class="contacttext">[email protected]</span>
        </a>
        <a href="tel:+34607017025" class="contactchild" id="contactphonetext">
            <span class="contacticon-phone"></span><span class="contacttext">+34 607 01 70 25</span>
        </a>
    </div>
</div>
<ul id="profilesmenu">
    <li>Raro</li>
    <li>Diseñador web</li>
    <li class="actual">Hiperactivo</li>
    <li>Activista</li>
    <li>Músico</li>
</ul>
<ul id="pagemenu">
    <li><a href="">Quién</a></li>
    <li><a href="">Blog</a></li>
    <li><a href="">Filosofía</a></li>
</ul>

CSS

#titlebox {
	margin-left: auto;
	margin-right: auto;
	height: auto;
	width: 800px;
	background: blue;
	margin-top: 25%;
	font-family: 'Averia Sans Libre',arial,serif;
}
#titlespan {
	font-weight: bold;
	font-size: 48px;
	position: absolute;
    width: 321px;
    margin-left: -160.5px;
    left: 50%;
}
.contactbox.left {
    margin-left: -430px;
}
.contactbox.left a {
	margin-right: 20px;
	float: right;
}
.contactbox.right {
    margin-left: 159px;
}
.contactbox.right a {
	margin-left: 20px;
	float: left;	
}
.contactbox {
	margin-top: 25%;
	position: absolute;
	top: 14px;
    width: 270px;
    left: 50%;
	transition: width 0.5s;
	white-space: nowrap;
}
[class*="contacticon-"] {
	display: inline-block;
	width: 32px;
	height: 32px;
	background-image: url(img/contact-sprites.svg);
	background-repeat: no-repeat;
}
.contacticon-twitter {
	background-position: 0 0;
	width: 30px;
}
.contacticon-google-plus {
	background-position: -30px 0;
	width: 30px;
}
.contacticon-email {
	background-position: -60px 0;
	width: 32px;
}
.contacticon-phone {
	background-position: -92px 0;
	width: 25px;
}
.contacttext {
	display: none;
	white-space: nowrap;
}
.contactchild/* :hover */ .contacttext {
	display: inline-block;
}
.contactchild  {
	position: relative;
	display: inline-block;
	overflow: hidden;
	width: 32px;
	transition: width 0.3s;
}
#contacttwittertext/* :hover */ {
	transition: width 0.3s;
	width: 107px;
	color: #00aced;
}
#contactgoogleplustext/* :hover */ {
	transition: width 0.3s;
	width: 189px;
	color: #D34836;
}
#contactemailtext/* :hover */ {
	transition: width 0.3s;
	width: 175px;
	color: #8036d3;
}
#contactphonetext/* :hover */ {
	transition: width 0.3s;
	width: 154px;
	color: #6fd336;
}
#profilesmenu {
	display: none;
}
#pagemenu {
	display: none;
}