JSFiddle - React, Tailwind, and code Playground

by sathish panduga p

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js"></script>
<div id="container">
    <div class="inner">
        <div class="inner1">
            <section>Enter Name:
                <input type="text" />
                <br />
                <br />
                <img src="https://upload.wikimedia.org/wikipedia/commons/5/54/Colorful_Parrots_Couple.jpg" width="200" height="200" />
            </section>
        </div>
        <div class="inner2">
            <section>Enter Name:
                <input type="text" />
                <br />
                <br />
                <img src="https://upload.wikimedia.org/wikipedia/commons/5/54/Colorful_Parrots_Couple.jpg" width="200" height="200" />
            </section>
        </div>
    </div>
    <button id="add">Add new div</button>
</div>

CSS

#container {
        border: 1px solid red;
        width: 100%;
        height:330px;
    }
    .inner {
        border: 1px solid green;
        width: 100%;
        height: 300px;
    }
    .inner1 {
        position:relative;
        width:50%;
        height:100%;
        float:left;
        background:#808080;
        background-color:#808080;
        overflow:hidden;
    }
    .inner2 {
        position:relative;
        width:50%;
        height:100%;
        float:left;
        background:green;
        background-color:green;
        overflow:hidden;
    }

JavaScript

$(function () {
        $("#add").click(function () {
            div = document.createElement('div');
            $(div).addClass("inner").html("New Div");
            $("#container").append(div);
        });
    });