JSFiddle - React, Tailwind, and code Playground

by Katarn

HTML

<div class="container">
  <div class="img">
    <div><span style="color: gray">&lt;</span><span style="color: darkslateblue">img</span> <span style="color: slateblue">src</span><span style="color: gray">=</span><span style="color: firebrick">"</span></div>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
      <path
        fill="gray"
        d="M 76.2,462.5 340.4,198.3 441.7,299.6 177.5,563.8 C 169.6,571.6 159,576 148,576 c -11,0 -21.6,-4.4 -29.5,-12.2 L 76.2,521.5 C 68.4,513.6 64,503 64,492 c 0,-11 4.4,-21.6 12.2,-29.5 z"
      />
      <path
        fill="gray"
        d="m 492,64 c 11,0 21.6,4.4 29.5,12.2 l 42.3,42.3 c 7.8,7.9 12.2,18.5 12.2,29.5 0,11 -4.4,21.6 -12.2,29.5 L 475.6,265.7 374.3,164.4 462.5,76.2 C 470.4,68.4 481,64 492,64 Z"
      />
      <path
        fill="gray"
        d="m 295.4,37 14.8,36.8 36.8,14.8 c 3,1.2 5,4.2 5,7.4 0,3.2 -2,6.2 -5,7.4 l -36.8,14.8 -14.8,36.8 c -1.2,3 -4.2,5 -7.4,5 -3.2,0 -6.2,-2 -7.4,-5 L 265.8,118.2 229,103.4 c -3,-1.2 -5,-4.2 -5,-7.4 0,-3.2 2,-6.2 5,-7.4 L 265.8,73.8 280.6,37 c 1.2,-3 4.2,-5 7.4,-5 3.2,0 6.2,2 7.4,5 z m -152.7,68.7 21.5,50.1 50.1,21.5 c 5.9,2.5 9.7,8.3 9.7,14.7 0,6.4 -3.8,12.2 -9.7,14.7 l -50.1,21.5 -21.5,50.1 c -2.5,5.9 -8.3,9.7 -14.7,9.7 -6.4,0 -12.2,-3.8 -14.7,-9.7 L 91.8,228.2 41.7,206.7 C 35.8,204.2 32,198.4 32,192 c 0,-6.4 3.8,-12.2 9.7,-14.7 l 50.1,-21.5 21.5,-50.1 c 2.5,-5.9 8.3,-9.7 14.7,-9.7 6.4,0 12.2,3.8 14.7,9.7 z M 496,368 c 6.4,0 12.2,3.8 14.7,9.7 l 21.5,50.1 50.1,21.5 c 5.9,2.5 9.7,8.3 9.7,14.7 0,6.4 -3.8,12.2 -9.7,14.7 l -50.1,21.5 -21.5,50.1 c -2.5,5.9 -8.3,9.7 -14.7,9.7 -6.4,0 -12.2,-3.8 -14.7,-9.7 l -21.5,-50.1 -50.1,-21.5 c -5.9,-2.5 -9.7,-8.3 -9.7,-14.7 0,-6.4 3.8,-12.2 9.7,-14.7 l 50.1,-21.5 21.5,-50.1 c 2.5,-5.9 8.3,-9.7 14.7,-9.7 z"
      />
    </svg>
    <div><span style="color: firebrick">"</span> <span style="color: gray">/&gt;</span></div>
  </div>

  <div class="img">
    <div><span style="color: gray">&lt;</span><span...

CSS

.container {
  background-color: white;
  width: 1200px;
  height: 630px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
}

.img {
  display: flex;
  flex-direction: column;
}

svg {
  height: 400px;
}

html {
  font-family: monospace;
  font-size: 40px;
  background-color: red;
}