JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row middle" id="middle" style="background-image: url();">
    <div class="col-lg-12 parent" id="fullColumn">
        <div class="fullContent" id="fullContent" style="height:100% ">
          <img src="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg" alt="">
        </div>
    </div>
</div>

CSS

.fullContent img{width:200px;
      height:200px;}
    
.fullContent{
  display:flex;
  justify-content:center;
  align-items:center;
}
    
.middle,.parent{height:100%}

html,
    body {
      height: 100vh;
      width: 100vw;
      overflow: hidden;
    }

    iframe{
      height:100% !important;
      width:100% !important;
    }

    
    .middle p{
      max-height:100%;
    }

    img {
      max-width: 100%; 
      height:auto;
      margin:0 auto;
    }
    .my-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100vh;
      width:100vw;
    }

    .my-container>.top [class^="col-"],
    .my-container>.bottom [class^="col-"] {
      background-color: #778899  ;
      color: white;
      text-align: center;
    }

    .my-container>.middle {
      flex-grow: 1;
      padding:30px;
      /*background-image: url('images/bg_green.svg');*/
      background-size: cover;
    }