JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

HTML

<div class='container'>
  <div class = 'box'>
    <div class='circle'></div>
  </div>

  <div class = 'box'>
    <div class="circle"></div>
  </div>
  
  <div class = 'box'>
    <div class="circle"></div>
  </div>
</div>

CSS

.container {
  display: flex;  
}

.box {
  width: 50px;
  height:50px;
  border: 2px solid pink;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}

.circle {
  border: 2px solid blue;
  background-color: lightblue;
  border-radius: 50%;
  height: 10px;
  width: 10px;
}

JavaScript

/* function flatten(arr) {
 return Array.isArray(arr)?[].concat(...arr.map(flatten)) : arr;
}

const add = flatten([[1,1,1], [1,1,1],[1,1,1]]);
let temp = 0;
add.forEach((each) => {
  temp = temp + each;  
  return temp;
}) */

/* console.log(temp); */