JSFiddle - React, Tailwind, and code Playground

by shanabus

HTML

<div class="map">

<div class="venue-1">

<div class="row">
  <div class="venue">
  </div>
  <div class="venue">
  </div>
  <div class="venue">
  </div>
  <div class="venue">
  </div>
  <div class="venue">
  </div>
</div>
<div class="row">
  <div class="venue">
  </div>
  <div class="venue">
  </div>
  <div class="venue">
  </div>
  <div class="venue">
  </div>
  <div class="venue">
  </div>
</div>

</div>

<div class="venue-2">

<div class="row">
  <div class="venue">
  </div>
  <div class="venue">
  </div>
  <div class="venue">
  </div>
  <div class="venue">
  </div>
  <div class="venue">
  </div>
</div>
<div class="row">
  <div class="venue">
  </div>
  <div class="venue">
  </div>
  <div class="venue">
  </div>
  <div class="venue">
  </div>
  <div class="venue">
  </div>
</div>
</div>

</div>

CSS

.venue {
  height: 40px;
  width: 40px;
  display: inline-block;
  border: 1px solid brown;
  margin: 6px;
  background-color: green;
}

.map { 
  padding: 80px; 
}

.venue-2 {
  margin-top: 80px;
}

.venue-1 {
  position: relative;
  top: -100px;
  left: -30px;
  -ms-transform: rotate(-30deg); /* IE 9 */
    -webkit-transform: rotate(-30deg); /* Chrome, Safari, Opera */
    transform: rotate(-30deg);
}