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...

CSS

.osram-grid {
  display: flex;
  flex-flow: row wrap;
  padding: 10px;
}

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

.osram-grid__item {
  padding: 0;
  margin: 0;
  flex: 0 1 100%;
}
@media screen and (min-width: 480px) {
  .osram-grid__item {
    flex: 0 1 50%;
  }
}
@media screen and (min-width: 800px) {
  .osram-grid__item {
    flex: 0 1 33.33333%;
  }
}

.osram-grid__item-wrapper {
  margin: 10px;
  position: relative;
}

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

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