JSFiddle - React, Tailwind, and code Playground

by von

HTML

<div class="row">
  <div class="column col-md-2 col-sm-2 col-xs-2"></div>
  <div class="column col-md-8 col-sm-8 col-xs-8">Some Header</div>
  <div class="column col-md-2 col-sm-2 col-xs-2"></div>
</div>
<div class="row">
  <div class="column col-md-2 col-sm-2 col-xs-2"></div>
  <div class="column col-md-8 col-sm-8 col-xs-8">
    <p><img src="https://via.placeholder.com/750x418" class="img-fluid img-responsive"></p>
  </div>
  <div class="column col-md-2 col-sm-2 col-xs-2"></div>
</div>
<div class="row">
  <div class="column col-md-2 col-sm-2 col-xs-2"></div>
  <div class="column col-md-8 col-sm-8 col-xs-8">
    <p>Beaker is a Muppet character from The Muppet Show. He is the shy, long-suffering assistant of Dr. Bunsen Honeydew, and is likewise named after a piece of laboratory equipment.</p>
    <p>During the first season of The Muppet Show, Dr. Honeydew presented the Muppet Labs segments by himself; Beaker was added as his lab assistant from the second season on. Beaker has bulging eyes, a shock of red hair, and a drawbridge mouth which serves as a frown.</p>
    <p>This is a p tag.<br></p>
  </div>
  <div class="column col-md-2 col-sm-2 col-xs-2"></div>
</div>