JSFiddle - React, Tailwind, and code Playground

Panels Fliplet Careers

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="band">

  <div class="col-xs-12" style="margin-top:30px;padding:0px">

    <div class="col-xs-12 col-sm-4 square-panel-holder">
      <div class="square-panel" style="background-color:#00abd2; padding:10px;">
        <h2 style="color:#ffffff; text-align:center">Enthusiastic</h2>
        <p style="color:#ffffff; text-align:center">We share our passion with others and bring a ‘can-do’ attitude o every challenge we face</p>
      </div>
    </div>

    <div class="col-xs-12 col-sm-4 square-panel-holder">
      <div class="square-panel" style="background-image: url('https://static.pexels.com/photos/7039/pexels-photo.jpeg'); background-size: cover; background-position: center center; padding:10px;">
      </div>
    </div>

    <div class="col-xs-12 col-sm-4 square-panel-holder">
      <div class="square-panel" style="background-color:#ed9119; padding:10px;">
        <h2 style="color:#ffffff; text-align:center">We love what we do</h2>
      </div>
    </div>

  </div>
  <div class="col-xs-12" style="padding:0px">

    <div class="col-xs-12 col-sm-4 square-panel-holder">
      <div class="square-panel" style="background-color:#ffffff; padding:10px;">
        <h2 style="color:#1d3f68; text-align:center">Accountable</h2>
        <p style="color:#1d3f68; text-align:center">We’re accountable for our actions both internally and externally</p>
      </div>
    </div>

    <div class="col-xs-12 col-sm-4 square-panel-holder">
      <div class="square-panel" style="background-image: url('https://static.pexels.com/photos/65977/pexels-photo-65977.jpeg'); background-size: cover; background-position: center center; padding:10px;">
        <h2 style="color:#1d3f68; text-align:center">We’re all entrepreneurs</h2>
      </div>
    </div>

    <div class="col-xs-12 col-sm-4 square-panel-holder">
      <div class="square-panel" style="background-color:#ffffff;...

CSS

.band {
  width: 100%;
  margin: 0;
  padding: 2.15em 0;
}

/* COPY FROM HERE DOWN */

.square-panel-holder {
  position: relative;
  padding-top: 22%;
}

.square-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

@media screen and (max-width: 767px) {
  .square-panel-holder {
    padding-top: 40%;
  }
}