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">
<p><b>2 Columns</b></p>
<p><b><br></b></p>
<p><b><br></b></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">
<div class="row">
<div class="column col-md-6 col-sm-6 col-xs-6">
<p><img src="https://academyartutest.brightspace.com/content/enforced/30162-CO_SB_MBREEN/test/assets/templates/animal-face.png?_&d2lSessionVal=0pbRKukSXWRXQ9BmzZQle5VCv&ou=30162" class="img-fluid img-responsive"><br></p>
<div class="row">
<div class="column col-sm-6 col-xs-6 col-md-12">Animal</div>
</div>
</div>
<div class="column col-md-6 col-sm-6 col-xs-6">
<p><img src="https://academyartutest.brightspace.com/content/enforced/30162-CO_SB_MBREEN/test/assets/templates/animal-face.png?_&d2lSessionVal=0pbRKukSXWRXQ9BmzZQle5VCv&ou=30162" class="img-fluid img-responsive"><br></p>
<div class="row">
<div class="column col-sm-6 col-xs-6 col-md-12">Animal</div>
</div>
</div>
</div>
</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><b>3 Columns</b></p>
<p><b><br></b></p>
<p><b><br></b></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">
<div class="row">
<div class="column col-sm-2 col-xs-2 col-md-4">
<p><img src="https://academyartutest.brightspace.com/content/enforced/30162-CO_SB_MBREEN/test/assets/templates/honeydew-face.jpg?_&d2lSessionVal=0pbRKukSXWRXQ9BmzZQle5VCv&ou=30162"...