JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Skill Overview -->
    <section class="success" id="skills">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2>Skill Overview</h2>
                    <hr class="skills-hr">
                </div>
            </div>
            <div class="row-fluid">
                <div class="col-xs-1 skills-item">
                    <div class="hvr-float-shadow skills-link">
                        <span class="skill-icon" style="font-size:150%; color:#fff;">JAVA</span>
                        <span class="skill-name" style="font-size:150%;">JAVA</span>
                    </div>
                </div>
                <div class="col-xs-1  skills-item">
                    <div class="hvr-float-shadow skills-link">
                        <span class="skill-icon" style="font-size:150%; color:#fff;">C</span>
                        <span class="skill-name" style="font-size:150%;">C</span>
                    </div>
                </div>
                <div class="col-xs-1  skills-item">
                    <div class="hvr-float-shadow skills-link">
                        <span class="skill-icon" style="font-size:150%; color:#fff;">C++</span>
                        <span class="skill-name" style="font-size:150%;">C++</span>
                    </div>
                </div>
                <div class="col-xs-1  skills-item">
                    <div class="hvr-float-shadow skills-link">
                        <span class="skill-icon" style="font-size:150%; color:#fff;">C#</span>
                        <span class="skill-name" style="font-size:150%;">C#</span>
                    </div>
                </div>
                <div class="col-xs-1  skills-item">
                    <div class="hvr-float-shadow skills-link" style="padding-top:30px">
                        <span class="skill-icon" style="color:#fff;">PYTHON</span>
                        <span...

CSS

/* Skill Settings */
.skill-name {
    color: #fff;
    display: none;
}


.skills-link:hover .skill-name {
    display: table;
    margin: 0 auto;
}

.skills-link:hover .two-lines {
    margin-top: -5px;
}

.skills-link:hover .icon-one-line {
    padding-top: 5px;
}

.skills-link:hover .skill-icon{
    display: none;
}
#skills{
    text-align: center;
}
#skills .skills-item {
    right: 0;
    margin-top: 0px;
    display: inline-block;
    width: 80px;
    height: 80px;
    overflow: hidden;
}


#skills .skills-item .skills-link {
    display: block;
    position: relative;
    margin: 0 auto;
    width: 80px;
    height: 80px;
    background-color: #0F1A23;
    text-align: center;
    padding-top: 25px;
    box-sizing: border-box;
}

#skills .skills-link:hover {
    background-color: #000;
    -webkit-transition: all ease 1.25s;
    -moz-transition: all ease 1.25s;
    transition: all ease 1.25s;
}

#skills .skill-love:hover {
    background-color: #FF0000;
    -webkit-transition: all ease 1.25s;
    -moz-transition: all ease 1.25s;
    transition: all ease 1.25s;
}

#skills * {
    z-index: 2;
}

/* End Skill Settings */