JSFiddle - React, Tailwind, and code Playground

by thilakar

HTML

<div id="main">
                <div id="boxes">
                    <div id="box1">

                    </div>

                    <div id="box2">

                    </div>

                    <div id="box3">

                    </div>
                </div>

                <div id="buttons">
                        <input type="button" value="Left" id="left">
                    <input type="button" value="Right" id="right">
                    <input type="button" value="Top" id="top">
                    <input type="button" value="Bottom" id="bottom">
                    <input type="button" value="Height" id="height">
                    <input type="button" value="Width" id="width">
                </div>
            </div>

CSS

#main{
                    clear:both;
                }
                #boxes{
                    position:absolute;
                    width:75%;
                }
                #box1, #box2, #box3{
                    position:relative;
                    width:200px;
                    height:200px;
                    background-color:#FFD600;
                    margin:10px;
                }
                #buttons{
                    float:right;
                }
                input{
                    display:block;
                    width:150px;

JavaScript

$("#left").bind('click', function(){
                    console.log('Left');
                    $('#box1').animate({x:"+=20px"});
                });