JSFiddle - React, Tailwind, and code Playground

by alirokni

HTML

<div id="circles01"></div>
<div id="circles02"></div>
<div id="circles03"></div>
<div id="circles04"></div>
<div id="circles05"></div>

CSS

#circles01 {
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%;
  position: relative;
  margin: 50px auto 100px auto;
}

#circles01:before,
#circles01:after {
  content: '';
  display: block;
  position: absolute;
  height: inherit;
  width: inherit;
  border-radius: inherit;
  background: blue;
}

#circles01:before {
  left: -40px;
}

#circles01:after {
  right: -40px;
}

#circles02 {
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%;
  position: relative;
  margin: 100px auto;
  box-shadow: -40px 0 0 0 blue, 40px 0 0 0 green, -40px 40px 0 0 brown, 40px -40px 0 0 pink, 1px 40px 0 0 yellow;
}

#circles03 {
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%;
  position: relative;
  margin: 100px auto;
}

#circles03:before,
#circles03:after {
  content: '';
  display: block;
  position: absolute;
  height: inherit;
  width: inherit;
  background: blue;
  -webkit-clip-path: circle(10px at 10px 10px);
  clip-path: circle(10px at 10px 10px);
}

#circles03:before {
  left: -40px;
}

#circles03:after {
  right: -40px;
}

#circles04 {
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%;
  position: relative;
  margin: 100px auto;
}

#circles04:before,
#circles04:after {
  content: '';
  display: block;
  position: absolute;
  height: inherit;
  width: inherit;
  background: -webkit-radial-gradient(center ellipse, #0000ff 70%, rgba(0, 0, 0, 0) 5%);
  background: radial-gradient(ellipse at center, #0000ff 70%, rgba(0, 0, 0, 0) 5%);
}

#circles04:before {
  left: -40px;
}

#circles04:after {
  right: -40px;
}

#circles05 {
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%;
  position: relative;
  margin: 100px auto;
}

#circles05:before,
#circles05:after {
  content: '';
  display: block;
  position: absolute;
  height: inherit;
  width: inherit;
  background:...