JSFiddle - React, Tailwind, and code Playground

by von

HTML

<div id="row" style="display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px">
   <div style="-webkit-box-flex:0;-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%; -webkit-box-flex:0;-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%"></div>
   <div style="-webkit-box-flex:0;-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%;-webkit-box-flex:0;-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%">
     <h1>Text with Hero Image</h1>
     <img src="images/photographer.jpg" class="img-fluid" />
     <p>What do you first notice about an object when you look at it for the first time? What characteristics does the object have that make it unique, that give it individuality? Let's look at our chart of the 14 Elements of Sculpture.</p>
   </div>
   <div style="-webkit-box-flex:0;-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667% -webkit-box-flex:0;-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%"></div>
 </div>

 <div style="display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px">
   <div style="-webkit-box-flex:0;-ms-flex:0; 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%;-webkit-box-flex:0;-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%"></div>
   <div style="-webkit-box-flex:0;-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%;-webkit-box-flex:0;-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%">hjhj</div>