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);