JSFiddle - React, Tailwind, and code Playground

by Vinay Pratap Singh Bhadauria

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="flex-row no-wrap justify-content-center">
  <div class="flex-item">
    <div style="background-image: url(&quot;https://s3.amazonaws.com/montagedataservertest/clients/c921d7d9-c3c0-4198-afae-b65cd264c6e4/candidates/3e7b22f3-a1a6-43af-bc51-5cd7b422dc41/media/f59dce3d-6a93-44f4-9c36-3ee969f7ad9b.jpg&quot;); background-position: center center; background-size: cover; background-repeat: no-repeat;">&nbsp;</div>
  </div>
  <div class="flex-item flex-column">
    <div class="flex-item mt-5 px-5">
      <div class="">
        <h1>3 Question</h1>
        <div class="_1N74gFnh08scpSgGM-dhJB">
          <div>
            <p>3 Question</p>
          </div>
        </div>
        <div class="_2VeVWEn8dmuWw06_VH7n2t"><span>3 Questions</span><span> | </span><span>3 Question</span></div>
      </div>
    </div>
    <div class="flex-item px-5 mt-auto">
      <div class="mt-auto">
        <div class="d-flex flex-wrap-reverse p-2 align-items-center">
          <div class="mr-0 mr-auto flex-grow-1"><button class="btn btn-link link-button " type="button" aria-label="Finish Later"><i class="fal fa-pause-circle pr-2"></i>Finish Later</button></div>
          <div class="d-flex flex-column-reverse flex-md-row"><button class="btn  btn-primary" type="button" aria-label="Let's Begin">Let's Begin<i class="fal fa-chevron-right pl-2"></i></button></div>
        </div>
      </div>
    </div>
  </div>
</div>