JSFiddle - React, Tailwind, and code Playground

HTML

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

<head>
  <meta charset="utf-8">
  <title>The HTML5 Herald</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">
  <style type="text/css">
    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
      overflow-x: hidden;
    }

    body {
      height: 100%;
      width: 100%;
      font-family: 'Open Sans', sans-serif;
      font-weight: 300;
      padding: 0;
      margin: 0;
      font-size: 1em;
      line-height: 4em;
      color: #000000;
      background: #ffffff;
    }

    * {
      box-sizing: border-box;
    }

    .wrapper {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      grid-gap: 8px;
      padding: 8px;
      height: 100vh;
      background-color: #333333;
    }

    .wrapper>div {
      background-color: #333333;
    }

    .item1 {
      grid-column: 1/2;
      grid-row: 1/2;
    }

    .item2 {
      grid-column: 2/3;
      grid-row: 1/2;
    }

    .item3 {
      grid-column: 3/3;
      grid-row: 1/2;
    }

    .item4 {
      grid-column: 1/2;
      grid-row: 2/3;
    }

    .item5 {
      grid-column: 2/3;
      grid-row: 2/3;
    }

    .item6 {
      grid-column: 3/3;
      grid-row: 2/3;
    }

    .item7 {
      grid-column: 1/2;
      grid-row: 3/3;
    }

    .item8 {
      grid-column: 2/3;
      grid-row: 3/3;
    }

    .item9 {
      grid-column: 3/3;
      grid-row: 3/3;
    }

    .item {
      border: 1px red solid;
    }

    .camera-style {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      width: 100%;
    }

    img {
      width: 100%;
      height: auto;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="item item1">
      <div class="camera-style">
        <img...