JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button id="button1">button1</button>
<div id="kutu1">left özelliği</div>

<br/><br/><br/><br/><br/><br/><br/>
<button id="button2">button2</button>
<div id="kutu2">opacity özelliği</div>

<br/><br/><br/><br/><br/><br/><br/>
<button id="button3">button3</button>
<div id="kutu3">toggle özelliği</div>

CSS

#kutu1 {
    background:orange;
    height:100px;
    width:100px;
    position:absolute; }

#kutu2 {
    background:orange;
    height:100px;
    width:100px;
    position:absolute; }

#kutu3 {
    background:orange;
    height:100px;
    width:100px;
    position:absolute; }

JavaScript

$(document).ready(function(){
  $("#button1").click(function(){
    $("#kutu1").animate({left:'500px'});
  });
});



$(document).ready(function(){
  $("#button2").click(function(){
    $("#kutu2").animate({opacity:'0.5'});
  });
});



$(document).ready(function(){
  $("#button3").click(function(){
    $("#kutu3").animate({height:'toggle'});
  });
});