JSFiddle - React, Tailwind, and code Playground

by Manoj Kumar

HTML

<div class="container">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>
<button class="create">Create a circle</button>

CSS

.container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  background: #6CC4DA;
  -webkit-flex-wrap: wrap-reverse;
  -ms-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
  align-items: baseline;
  align-content: flex-start;
  height: 280px;
  width: 770px;
}
.circle {
  background: #C78DEF;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  margin: 5px;
}

JavaScript

$(document).ready(function () {
    $('.create').on('click', function () {
        $('.container').append('<div class="circle"></div>');
    })
});