JSFiddle - React, Tailwind, and code Playground

by georgie

HTML

<div class="osram-grid">
  <figure class='osram-grid__item'>
  
    <div class='osram-grid__item-wrapper'>

      <img class='osram-grid__image' src="http://osram.hello-digital.de/articles/wp-content/uploads/2016/08/automotive.png">

      <figcaption class="osram-grid__caption">
        <h2 class="osram-grid__subheadline">subheadline</h2>
        <h1 class="osram-grid__headline">headline</h1>
      </figcaption>
    </div>
  </figure>

  <figure class='osram-grid__item'>
  
    <div class='osram-grid__item-wrapper'>

      <img class='osram-grid__image' src="http://osram.hello-digital.de/articles/wp-content/uploads/2016/08/automotive.png">

      <figcaption class="osram-grid__caption">
        <h2 class="osram-grid__subheadline">subheadline</h2>
        <h1 class="osram-grid__headline">headline</h1>
      </figcaption>
    </div>
  </figure>

  <figure class='osram-grid__item'>
  
    <div class='osram-grid__item-wrapper'>

      <img class='osram-grid__image' src="http://osram.hello-digital.de/articles/wp-content/uploads/2016/08/automotive.png">

      <figcaption class="osram-grid__caption">
        <h2 class="osram-grid__subheadline">subheadline</h2>
        <h1 class="osram-grid__headline">headline</h1>
      </figcaption>
    </div>
  </figure>

  <figure class='osram-grid__item'>
  
    <div class='osram-grid__item-wrapper'>

      <img class='osram-grid__image' src="http://osram.hello-digital.de/articles/wp-content/uploads/2016/08/automotive.png">

      <figcaption class="osram-grid__caption">
        <h2 class="osram-grid__subheadline">subheadline</h2>
        <h1 class="osram-grid__headline">headline</h1>
      </figcaption>
    </div>
  </figure>

  <figure class='osram-grid__item'>
  
    <div class='osram-grid__item-wrapper'>

      <img class='osram-grid__image' src="http://osram.hello-digital.de/articles/wp-content/uploads/2016/08/automotive.png">

      <figcaption class="osram-grid__caption">
        <h2...

SCSS

$bp-expand-2-cols: 480px;
$bp-expand-3-cols: 800px;
$gutter: 10px;

.osram-grid__subheadline {
  margin: 0;
  padding: 0;  
}

.osram-grid__headline {
  margin: 0;
  padding: 0;
}

.osram-grid{
  display: flex;
  flex-flow: row wrap;
  padding: $gutter;
}

.osram-grid__caption{
  position: absolute;
  display: flex;
  bottom:0;
  left:0;
  right:0;
  background-color:rgba(yellow, 0.5);
  flex-flow: column nowrap;
  padding: 10px;
}

.osram-grid__item{
  padding:0;//reset figure defaults
  margin:0;
  flex: 0 1 100%;
  
  @media screen and (min-width: $bp-expand-2-cols) {
    flex: 0 1 50%;
  }
  
  @media screen and (min-width: $bp-expand-3-cols) {
    flex: 0 1 percentage(1/3);
  }
}

.osram-grid__item-wrapper {
  margin: $gutter;
  position:relative;
}

.osram-grid__image{
  max-width: 100%;
  display: block;
}

//fiddle only
body, html {
  margin: 0;
  padding: 0;
  background-color: red;
}