JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<div id="one" class="con">
  <div class="large"></div>
</div>
<div id="two" class="con">
  <div class="large"></div>
</div>
<div id="three" class="con">
  <div class="large"></div>
</div>
<div id="four" class="con">
  <div class="large"></div>
</div>
<div id="five" class="con">
  <div class="large"></div>
</div>
<div id="six" class="con">
  <div class="large"></div>
</div>

CSS

.con {
  width: 30vw;
  height: 30vw;
  margin: 5px;
  display: inline-block;
}

.large {
  width: 800px;
  height: 800px;
  background-color:white;
  background-image:
  radial-gradient(midnightblue 9px, transparent 10px),        
  repeating-radial-gradient(midnightblue 0, midnightblue 4px, transparent 5px, transparent 20px, midnightblue 21px, midnightblue 25px, transparent 26px, transparent 50px);    
  background-size: 30px 30px, 90px 90px; 
  background-position: 0 0;
}

#one {
  overflow: hidden;
}

#two {
  overflow: auto;
}

#three {
  overflow-x: auto;
}

#four {
  overflow-y: auto;
}

#five {
  overflow-x: auto;
  overflow-y: hidden;
}

#six {
  overflow-y: auto;
  overflow-x: hidden;
}