JSFiddle - React, Tailwind, and code Playground

by Lucas de Paula

HTML

<div class="wrappericons">
<span id="facebook"><a href="http://www.facebook.com"></a></span>
<span id="youtube"><a href="http://www.youtube.com"></a></span>
<span id="twitter"><a href="http://www.twitter.com"></a></span>
</div>

CSS

.wrappericons {
    margin: auto;
    width: 100%;
    background-color: none;
    display: flex;
    -webkit-display: flex;
    -moz-display: flex;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;}


#facebook {
    height: 60px;
    width: 33.33%;
    background-image: url("http://creativedroplets.com/samples/svg/simplify/img/napoleon%20for%20svg%20simpl%201.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    -webkit-display: flex;
    -moz-display: flex;
    min-width: 45px;
    float: left;
    position: relative;
}

#youtube {
   height: 60px;
    width: 33.33%;
    background-image: url("http://creativedroplets.com/samples/svg/simplify/img/napoleon%20for%20svg%20simpl%201.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    -webkit-display: flex;
    -moz-display: flex;
    min-width: 45px;
    float: left;
    position: relative;
}

#twitter {
     height: 60px;
    width: 33.33%;
    background-image: url("http://creativedroplets.com/samples/svg/simplify/img/napoleon%20for%20svg%20simpl%201.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    -webkit-display: flex;
    -moz-display: flex;
    min-width: 45px;
    float: left;
    position: relative;
}