JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js"></script>
<button id="add">Add new div</button>
<button id="remove">Remove</button>


<div class="card transition">
		<h2 class="transition1"></h2>
		<p class="hovering"></p>
		<div class="cta-container transition"><a href="#" class="cta">Open room</a></div>
		<div class="card_circle transition"></div>
	</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

$("#add").click(function () {
    $(".card transition").append($(".card transition").clone());
});
$("#remove").click(function () {
    $("#container .inner:last").remove();
});