JSFiddle - React, Tailwind, and code Playground

by Jessica Jordan

HTML

<div class="wrapper">
  <div class="dot">Element 1</div>
  <div class="dot">Element 2</div>
  <div class="dot">Element 3</div>
  <div class="dot">Element 4</div>
  <div class="dot">Element 5</div>
  <div class="dot">Element 6</div>
</div>

CSS

wrapper {
  width: 100%;
}
.dot {
  width: 150px;
  height: 150px;
  margin: 15px;
  border-radius: 50%;
  display: inline-block;
  background-color: #999;
}

/* 1.) nth-child */
.wrapper .dot:nth-child(4n){
  margin-left: 100px;
  background-color: #dd77dd;
} 
/* 2.) flex-wrap */
/*.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
} */