JSFiddle - React, Tailwind, and code Playground

by Bharat Soni

HTML

<div class="button-wrp">
    <div class="but">red</div>
    <div class="but">green</div>
    <div class="but">blue</div>
</div>
<div class="parent">
    
</div>

<div class="sample com"></div>

CSS

.button-wrp{
    float:left;
    width:100px;
    margin-right:25px;
}
.but{
    float:left;
    width:100%;
    height:20px;
    font-family:verdana;
    text-align:center;
    cursor:pointer;
}
.parent{
    width:150px;
    float:left;
    border:1px solid #cdcdcd;
    background-color:#efefef;
    max-height:360px;
    height:360px;
    overflow:hidden;
}
.com{
    width:100%;
    float:left;
    height:30px;
}
.red{background:red;}
.green{background:green;}
.blue{background:blue;}
.orange{background:orange;}

JavaScript

$('.but').on('click',function(){    
    $('.sample').clone(true)
    .removeClass('sample')
    .addClass($(this).text())
    .appendTo($('.parent'));
});