JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div class="container cont1">
    <div class="col-md-9 col1">
        <div class="row">
            <div class="button1 tog">
                 <h2 class="buttona">About</h2>

            </div>
            <div class="button2 tog">
                
<h2>Resume</h2>

            </div>
        </div>
        <div class="row">
            <div class="onoff">
                 <h1><span class="glyphicon glyphicon-off"></span></h1>

            </div>
        </div>
        <div class="row">
            <div class="button3 tog">
                
<h2>Projects</h2>

            </div>
            <div class="button4 tog">
                
<h2>Contact Me</h2>

            </div>
        </div>
    </div>
</div>

CSS

.cont1 {
    margin-top:10%;
    margin-bottom: auto;
    text-align:center;
}
.col1 {
    margin-left: auto;
    margin-right: auto;
    float:none;
}
.tog {
    opacity: 0;
}
.button1 {
    border-radius: 50%;
    background-color: green;
    width:170px;
    height:170px;
    float:left;
    text-align: center;
    display: flex;
    justify-content:center;
    align-content:center;
    flex-direction:column;
}
.button2 {
    border-radius: 50%;
    background-color: green;
    width:170px;
    height:170px;
    float:right;
    text-align: center;
    display: flex;
    justify-content:center;
    align-content:center;
    flex-direction:column;
}
.onoff {
    border-radius: 50%;
    background-color: green;
    width:250px;
    height:250px;
    text-align: center;
    display: flex;
    justify-content:center;
    align-content:center;
    flex-direction:column;
    margin-left: auto;
    margin-right: auto;
}
.button3 {
    border-radius: 50%;
    background-color: green;
    width:170px;
    height:170px;
    float:left;
    text-align: center;
    display: flex;
    justify-content:center;
    align-content:center;
    flex-direction:column;
}
.button4 {
    border-radius: 50%;
    background-color: green;
    width:170px;
    height:170px;
    float:right;
    text-align: center;
    display: flex;
    justify-content:center;
    align-content:center;
    flex-direction:column;
}

JavaScript

$(".onoff").click(function () {
    $(".tog").animate({
        "opacity": 1 - $(".tog").css("opacity")
    }, 500);
});