JSFiddle - React, Tailwind, and code Playground

by kishore328

HTML

<div id="main">
  <div class="top left"></div>
  <div class="top right"></div>
  <div class="bottom left"></div>
  <div class="bottom right"></div>
</div>

CSS

#main {
  margin: 40px;
  height: 100px;
  background-color: #000000;
  position: relative;
  overflow: hidden;
}

#main div {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: #FFFFFF;
}

.top {
  top: -10px;
}

.bottom {
  bottom: -10px;
}

.left {
  left: -10px;
}

.right {
  right: -10px;
}