JSFiddle - React, Tailwind, and code Playground

by Thornton_Fernbacher

HTML

<div class="outer">

  <div id="container">
   
    <div >1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>

  </div>

</div>

CSS

body {
  margin:0;
}
.outer {
  width:100vw;
  max-width:calc(100vh * 3000/1687);
  height:100vh;
  max-height:calc(100vw * 1687/3000)
}

#container {
  width: 100%;
  height: 100%;
  display:grid;
  grid-template-rows:repeat(20, 5%);
  grid-template-columns:repeat(20, 5% );
  
  
  background: url(https://localhost:3000/static/map.svg);
}
#container div {
  text-align:center;
  background:red;
  border-radius:50%;
  width:25px;
  height:25px;
}