JSFiddle - React, Tailwind, and code Playground

by João Vitor Scheuermann

HTML

<!DOCTYPE html>
<html lang="pt-br">
    <head>
    	<meta charset="utf-8"/>		

        <title>Portifolio</title>
 	
        
        
        
        
        <!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

	<!-- Optional theme -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
	
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">    
   
   
        
        

    </head>
    
    <body>		
        
        <!-- BOTOES DE NAVEGAÇÃO -->
        <div class="menu">
            <!-- BOTOES PRINCIPAIS -->
            <div class="mainBtn">
             <div id="menuBurguer"></div>           
            </div>
           <!-- BOTOES SECUNDARIOS -->
           <div class="subBtn">
                
                
                <div class="listBtn" id="btn1"></div>
                <div class="listBtn" id="btn2"></div> 
                <div class="listBtn" id="btn3"></div> 
                
                 
           </div>
            
            
            
            
        </div>

CSS

.menu{
 
 
    
}

.mainBtn {
    margin-top: 25px;
    margin-left: 25px;
    height: 80px;
    width: 80px;
    background-color: #C5D1EB;  
    border-radius: 50%;  
   
}

.mainBtn:hover {
    
    
}

.subBtn {
    top: 120px;
    left: 130px;
    position: relative;
}

.listBtn {
    margin: 5px;
    height: 60px;
    width: 60px;
    background-color: #C5D1EB;  
    border-radius: 50%;
    
}

JavaScript

function main () {
    $('.mainBtn').click(function(){
        console.log("bolaxa"); 
         $("#btn1").animate({left: '250px'},300);  
    });
    
}





$(document).ready(main);