JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<div class="grid">
  <div class="span-8">
    <div class="flow">
      <div class="span-8">
        <div class="item type-2">
         <div class="image">
          <img src="//fillmurray.com/300/200"/>
         </div>
         <div class="text">
           <h3>
             Lorem Ipsum Dolor Sit Amet  
           </h3>
           <p>
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero corporis quia eos temporibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero corporis quia eos temporibus.
           </p>
         </div>
        </div>
      </div>
      <div class="span-4">
        <div class="item">
         <div class="image">
          <img src="//fillmurray.com/400/200"/>
         </div>
         <div class="text">
           <h3>
             Lorem Ipsum Dolor Sit Amet  
           </h3>
           <p>
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero corporis quia eos temporibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero corporis quia eos temporibus.
           </p>
         </div>
        </div>
      </div>
      <div class="span-4 clear">
        <div class="item">
         <div class="image">
          <img src="//fillmurray.com/200/100"/>
         </div>
         <div class="text">
           <h3>
             Lorem Ipsum Dolor Sit Amet  
           </h3>
           <p>
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero corporis quia eos temporibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero corporis quia eos temporibus.
           </p>
         </div>
        </div>
      </div>
      <div class="span-8">
        <div class="item type-1">
         <div class="image">
          <img src="//fillmurray.com/400/400"/>
         </div>
         <div class="text">
           <h3>
             Lorem Ipsum Dolor Sit Amet  
           </h3>
           <p>
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero corporis...

CSS

html {
  box-sizing: border-box;
  font: 100%/1.25 -apple-system,".SFNSText-Regular","San Francisco","Roboto","Segoe UI","Helvetica Neue","Lucida Grande", sans-serif;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.grid,
.flow,
.item {
  margin-left: -10px;
  margin-right: -10px;
}
.grid:after,
.flow:after,
.item:after {
  content: "";
  display: block;
  clear: both;
}
.grid > *,
.flow > * ,
.item > * {
  float: left;
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
}

.clear {
  clear: left;
}

.span-12 {
  min-width: 33.3333333333%;
  width: calc((400px - 100%) * 400);
  max-width: 100%;
}

.grid > .span-8 {
  min-width: 66.6666666666%;
  width: calc((800px - 100%) * 800);
  max-width: 100%;
}
.grid > .span-4 {
  min-width: 33.3333333333%;
  width: calc((800px - 100%) * 800);
  max-width: 100%;
}

.flow > .span-8 {
  min-width: 66.6666666666%;
  width: calc((400px - 100%) * 400);
  max-width: 100%;
}
.flow > .span-4 {
  min-width: 33.3333333333%;
  width: calc((400px - 100%) * 400);
  max-width: 100%;
}

.item {
  background-color: #FFF;
}

.image img {
  width: 100%;
  height: auto;
}
.text h3 {
  margin-top: 0;
  margin-bottom: 10px;
}

.type-1 .image {
  min-width: 33.3333333333%;
  width: calc((400px - 100%) * 400);
  max-width: 50%;
}
.type-1 .text {
  min-width: 50%;
  width: calc((100% - 400px) * 400);
  max-width: 66.6666666666%;
}

.type-2 .image,
.type-2 .text {
  min-width: 50%;
  width: calc((400px - 100%) * 400);
  max-width: 100%;
}