JSFiddle - React, Tailwind, and code Playground

by mamounothman

HTML

<script src="https://unpkg.com/@svgdotjs/[email protected]/dist/svg.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="box.css">
  </head>
  <body>
    <div class="grid">
      <div id="box1"></div>
      <div id="box2"></div>
      <div id="box3"></div>
      <div id="box4"></div>
      <div id="box5"></div>
      <div id="box6"></div>
      <div id="box7"></div>
    </div>
  </body>
</html>

CSS

html, body {
  margin: 0px;
  height: 100%;
  width: 100%;
}

.grid {
  display: grid;
  grid-template-areas: 
    'top top top top'
    'breadcrum breadcrum breadcrum breadcrum'
    'left left box4 box7'
    'left left box5 box7'
    'left left box6 box7'
    ;
  height: 100%;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
  border: 1px solid #000;
}

#box1 {
  grid-area: top
}

#box2 {
  grid-area: breadcrum;
}

#box3 {
  grid-area: left;
}

#box4 {
  grid-area: box4;
}

#box5 {
  grid-area: box5;
}

#box6 {
  grid-area: box6;
}

#box7 {
  grid-area: box7;
}