JSFiddle - React, Tailwind, and code Playground

by agonl

HTML

<!--BOOTSTRAP CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="Css/style.css"/>
<!--JQUERY JS-->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<!--Custom Scipt-->
<script src="js/script.js"></script> 
</head>

<body>
   
<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>  
    
    
    
    
    
    
    
    
    
<!--JQUERY JS-->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!--Custom Scipt-->
<script src="js/script.js"></script>   
    
</body>

CSS

.cont1 {
margin-top:10%;
    margin-bottom: auto;
    text-align:center;

    
    
}

.col1 {
    
 margin-left: auto;
    margin-right: auto;
float:none;
    

    
}

.buttona {
    

}


.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

$(document).ready(function() {
    
    $(".tog").css({"display":"none"});


$(".onoff").click(function(){
    $(".button1").fadeToggle();
    $(".button2").fadeToggle();
    $(".button3").fadeToggle();
    $(".button4").fadeToggle();


});
    
});