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">Simple 2 column</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 class="row">
      <div class="column col-sm-6 col-xs-6 col-md-12">Caption Here</div>
    </div>
    <div class="row">
      <div class="column col-md-6 col-sm-6 col-xs-6">
        <p><img src="https://via.placeholder.com/240x218" class="img-fluid img-responsive"></p>
        <div class="row">
          <div class="column col-sm-6 col-xs-6 col-md-12">Caption</div>
        </div>
        <div class="row">
          <div class="column col-sm-6 col-xs-6 col-md-11"><span style="caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0); font-family: &quot;Open Sans&quot;, Arial, sans-serif; font-size: 14px; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</span><br></div>
        </div>
      </div>
      <div class="column col-md-6 col-sm-6 col-xs-6">
        <p><img src="https://via.placeholder.com/240x218" class="img-fluid img-responsive"></p>
        <div class="row">
          <div class="column col-sm-6 col-xs-6 col-md-11">Caption</div>
        </div>
        <div class="row">
          <div class="column col-sm-6 col-xs-6 col-md-12"><span style="caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0); font-family: &quot;Open Sans&quot;, Arial, sans-serif; font-size: 14px; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</span><br></div>
        </div>
      </div>
    </div>
  </div>
  <div class="column col-md-2 col-sm-2 col-xs-2"></div>
</div>