JSFiddle - React, Tailwind, and code Playground

by Wentz Wu

HTML

<div id="container">
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</div>

CSS

#container {
    position: relative;
    border: 1px solid black;
    width: 400px;
    height: 200px;
    padding: 0.5em;
}
#container div {
    width: 50px;
    height: 50px;
    border: 1px dashed red;
    margin: 0.5em;
}
#container #box1 {
    background-color: red;
}
#container #box2 {
    position:absolute;
    right: 0;
    background-color: green;
    border: 1px dashed green;
}
#container #box3 {
    position:relative;
    right: -100px;
    background-color: blue;
    border: 1px dashed blue;
}

JavaScript

$("div").click(function (e) {
    e.stopPropagation();
    $(this).animate({
        width: "70%",
        opacity: 0.4,
        marginLeft: "0.6in",
        fontSize: "3em",
        borderWidth: "10px"
    }, 1500);
});