JSFiddle - React, Tailwind, and code Playground

by Arvind Pal

HTML

<div class="main-container">
  <div class="row1">
    <div class="child">
      <img height="40px" src="https://randomuser.me/api/portraits/women/11.jpg" />
      <div>
       Anjali Soni
      </div>
    </div>
    <div class="child">2</div>
  </div>
  <div class="">
    <hr />
  </div>
  <div class="row2">

    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
  </div>
  <div class="solid-divider">
    <hr />
  </div>
  <div class="row3">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>

  </div>
</div>

CSS

.main-container{
  
}

.row1{
  display:flex;
  justify-content:center;
  gap:18px;
  
}
.row2{
  
  display:flex;
  justify-content:center;
  gap:5px;
}
.row3{
    display:flex;
  justify-content:center;
  gap:5px;
}

.child{
  height:100px;
  width:100px;
  background-color:green;
  padding:4px;
  dispaly:flex;
  
  align-items:center;
  justify-content:center;
 
}

.solid-divider{
  
}

.solid-divider  hr{
  border: none;
  border-top: 1px dashed black;
}