JSFiddle - React, Tailwind, and code Playground

HTML

<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">

<style>
  #title{
    font-family: 'Roboto Mono', monospace;
    text-align: center;
    background: hsl(262, 6%, 80%) 
  }
    #background-image{
/**
    background-image: url('https://pbs.twimg.com/media/Ee-6nwuWoAEk5JR.jpg');
    background-repeat: no-repeat;
url('https://1k-cdn.com/resimler/yazarlar/Hermann-Hesse_1979_1390222421.jpg');
**/
    opacity: 0.5;
    height: 400px;
    
  }
  #img-caption{
    font-size: 12px;
    font-style: italic;
  }
  #tribute-info{
    font-size: 22px;
    font-family: sans-serif;
  }
  #tribute-link{
    font-size: 15px;
    font-family: sans-serif;
    text-align: center;
  }
    .container {
    font-size: 40px;
    min-height: 600px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
      "header"
      "container2"
      "footer";
  }
    #img{height: 200px;
        max-width: 100%;
  }
    .header{
         background: blue;
         grid-area: header;
  }
    .container2{
      background:green;
      grid-area: container2;
      display: grid;
      grid-template-columns: auto;
  }
  .column{
      float: left;
  }
  .row::after {
  content: "";
  clear: both;
  display: table;
}
    .footer {
      background: red;
      grid-area: footer;
  }
    .content{
      background: yellow;
      height: 200px;
      width: 200px;
      align-self: center;
      justify-self: center;
      position: absolute;
      
  }

</style>

<div class="container">
  <div class="header"></div>
  <div class="container2" id="background-image">
    <div class="row">
      <div><img class="column" id="img" src="https://i2.milimaj.com/i/milliyet/75/1100x570/617637f545d2a0a1041bdad1.jpg" alt="Hermann Hesse's picture">
      </div>
      <div><img class="column" id="img"...