JSFiddle - React, Tailwind, and code Playground

by vaibhav saxena

HTML

<div class='container-wrapper'>
    <div class='flex-items child-item'>1</div>
    <div class='flex-items child-item'>2</div>
    <div class='flex-items child-item'>3</div>
    <div class='flex-items child-item'>4</div>
    <div class='flex-items child-item'>5</div>
    <div class='flex-items child-item'>6</div>
    <div class='flex-items child-item'>7</div>
    <div class='flex-items child-item'>8</div>
    <div class='flex-items child-item'>9</div>
    <div class='flex-items child-item'>10</div>

</div>

CSS

.container-wrapper{
  font-size:62.5%;
   display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  border: 2px solid red;  
  flex-direction:row;
  flex-wrap:wrap;/*wrap-reverse*/
  -webkit-flex-wrap: wrap;
  padding:5rem;
  justify-content: flex-start;
  transition:1s all ease-in-out;
}

.child-item{
 transition:1s all ease-in-out;
  height:5rem;
  width:5rem;
  border:1px solid pink;
  padding:5rem;
  margin: 2.5rem 1.25rem 0 1.25rem;
  background: rgba(150,500,900,1);
  
}