JSFiddle - React, Tailwind, and code Playground

HTML

<div>
		<ul class="social">
       <li class="facebook">
          <a href="">
             <strong>FACEBOOK</strong>
          </a>
       </li>
       <li class="twitter">
          <a href="">
             <strong>TWITTER</strong>
          </a>
       </li>
    <li class="pinterest">
          <a href="">
             <strong>PINTEREST</strong>
          </a>
       </li>
       <li class="instagram">
          <a href="">
             <strong>INSTAGRAM</strong>
          </a>
       </li>
       <li class="bloglovin">
          <a href="">
             <strong>BLOGLOVIN'</strong>
          </a>
       </li>
    <li>
    <form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
        <label>
            <input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:" />
        </label>
    </form>
    </li>
    </ul>
    </div>

CSS

.social {
    list-style: none;
    margin-bottom: 10px;
}
.social li {
    display: inline;
    float: left;
}
.social li a {
    display: block;
    width: 24px;
    height: 24px;
    padding-right: 50px;
    position: relative;
}
.social li a strong {
    position: absolute;
    left: 50%;
    margin-left: -90%;
    margin-top: 30px;
    font-family:'questrialregular';
    text-transform: uppercase;
    font-weight: 100;
    font-size: 12px;
}
li.facebook {
    background-image: url("http://3.bp.blogspot.com/-dG3Uh5wbbkc/UrbakrftBVI/AAAAAAAADe0/Nyk_oAJrz7o/s1600/facebook.png");
    background-repeat: no-repeat;
}
li.twitter {
    background-image: url("http://4.bp.blogspot.com/-Ub-33u2lfa4/UrbalXBwDQI/AAAAAAAADfA/wzp9y9g9Zts/s1600/twitter2.png");
    background-repeat: no-repeat;
}
li.instagram {
    background-image: url("http://4.bp.blogspot.com/-7n7d_7AueXo/UqV-qJxyw4I/AAAAAAAADaA/hOUqalWGy40/s1600/instagram.png");
    background-repeat: no-repeat;
}
li.pinterest {
    background-image: url("http://1.bp.blogspot.com/-w0LN-WnpsNc/UrbakgTnOkI/AAAAAAAADe4/vZpW7wi4ZMY/s1600/pinterest2.png");
    background-repeat: no-repeat;
}
li.bloglovin {
    background-image: url("http://3.bp.blogspot.com/-t9T07aBtYhQ/UqV-p7oZ1vI/AAAAAAAADZ4/dxY8FhqL48E/s1600/bloglovin.png");
    background-repeat: no-repeat;
}
.social:hover li {
    opacity: 1;
}
.social li {
    transition-property: opacity;
    transition-duration: 500ms;
}
.social li a strong {
    opacity: 0;
    transition-property: opacity;
    transition-duration: 300ms;
}
.social li:hover {
    opacity: 0.7;
}
.social li:hover a strong {
    opacity: 1;
    /*top:-10px;*/
}
.search-form {
    position: relative;
    /*right: 200px;
top: 200px;*/
    color: #000;
}
.search-field {
background-color: transparent;
background-image: url("http://4.bp.blogspot.com/-FlxbQrrwMzg/UpsuqWwMWbI/AAAAAAAADYY/BT5hA_2R3MQ/s1600/search_icon.png'");
background-position: right;
background-repeat: no-repeat;
background-size: 24px...