JSFiddle - React, Tailwind, and code Playground

by jordan_josh3184

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Exercise 1</title>
    <meta
      content="width=device-width, initial-scale=1, maximum-scale=1"
      name="viewport"
    />

  <style>
  body {
  margin: 40px;
}

.wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 100px 100px 100px 100 px;
    background-color: #fff;
    color: #444;
  }

  .box {
    background-color: #444;
    color: #fff;
    border-radius: 5px;
    padding: 20px;
    font-size: 150%;

  }

  .a {
    grid-column: 2;
    grid-row: 1;
  }
  .b {
    grid-column: 2 ;
    grid-row: 1 ;
  }
  .c {
    grid-column: 3 ;
    grid-row: 2 ;
  }
  .d {
    grid-column: 1;
    grid-row: 2;
  }
  .e {
    grid-column: 2;
    grid-row: 2;
  }
  .f {
    grid-column: 3;
    grid-row: 2;
  }
}
  </style>
  </head>

  <body>
 <div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
</div>
  </body>
</html>