JSFiddle - React, Tailwind, and code Playground

by chuangchen

HTML

<!doctype html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>

  <body>

    <div class="grid">
      <div class="a">
        a
      </div>
      <div class="b">
        b
      </div>
      <div class="c">
        c
      </div>
      <div class="d">
        d
      </div>
      <div class="e">
        e
      </div>
      <div class="f">
        f
      </div>
    </div>

  </body>

</html>

CSS

.grid {
  display: grid;
  /* grid-template-rows: 1fr 1fr 1fr; */
  grid-template-columns: 1fr 1fr;
  background: lightgrey;
}

.grid > div {
  padding: 0.5em;
  margin: 0.5em;
  border: 1px solid orange;
  text-align: center;
}