JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<div class="krys-constrain">
  <div class="krys-pushpair">
    <ul class="row">
      <li class="kryskrys-pushpair-item col-md-6 col-xs-12">
        <div class="krys-pushwithtitle">
          <div class="krys-pushwithtitle-box">
            
          </div>
        </div>
      </li>
      <li class="kryskrys-pushpair-item col-md-6 col-xs-12">
        <div class="krys-pushwithtitle">
          <div class="krys-pushwithtitle-box">
            
          </div>
        </div>
      </li>
    </ul>
  </div>
  
  <div class="krys-pushpair kryspushpair_alt">
    <ul class="row">
      <li class="kryskrys-pushpair-item col-md-6 col-xs-12">
        <div class="krys-pushwithtitle">
          
        </div>
      </li>
      <li class="kryskrys-pushpair-item col-md-6 col-xs-12">
        <div class="krys-pushwithtitle">
          
        </div>
      </li>
    </ul>
  </div>

SCSS

.krys-pushwithtitle {
  position: relative;
  padding-top: percentage(530/414);

  &-box {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: tomato;
  }
}

.kryspushpair_alt {
  .kryskrys-pushpair-item {
    position: relative;

    &::before {
      content: '';
      display: block;
      height: 0;
      padding-top: percentage(530/414);
      background-color: lime;
    }
  }

  .krys-pushwithtitle {
    position: absolute;
    top: 0;
    left: 18px;
    right: 18px;
    bottom: 0;
    
    // Remove aspect ratio from legacy code
    padding-top: 0;
  }
}












// Base styles to make the demo work as intended
*,
*:before,
*:after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: -18px;
  margin-right: -18px;
}

.col-md-6 {
  flex-grow: 0;
  flex-shrink: 0;
  padding-right: 18px;
  padding-left: 18px;
  flex-basis: 50%;
  max-width: 50%;
}

.krys-constrain {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 18px;
}

.krys-pushpair {
  max-width: 825px;
  margin: 30px auto;
}