JSFiddle - React, Tailwind, and code Playground

by orjan

HTML

<div class="resource image illustration">
  <figure>
    <div class="byline">KUNGLIGA BIBLIOTEKETS SAMLINGAR/FLICKR (CC BY 2.0)</div>
    <div class="asset">
      <a href="https://laromedel.ne.se/assets/image/2016.06.03.13.06.28_medium_563141.jpg">
                                            <img src="https://laromedel.ne.se/assets/image/2016.06.03.13.06.28_medium_563141.jpg" alt="Hark! Hark! The dogs do bark! – en politisk karikatyrkarta över Europa från 1914 med en rad stereotypa symboler för olika länder. Kartan illustrerar det spända läget i Europa under månaderna närmast före första världskrigets utbrott.">
                                        </a>
    </div>
    <figcaption>
      <p>
        <em>Hark! Hark! The dogs do bark!</em> – en politisk karikatyrkarta över Europa från 1914 med en rad stereotypa symboler för olika länder. Kartan illustrerar det spända läget i Europa under månaderna närmast före första världskrigets utbrott.
      </p>
    </figcaption>
  </figure>
</div>

CSS

.resource.image {
  background-color: black;
  text-align: center;
  display: inline-block;
}

figure {
  display: flex;
  margin: 0;
  justify-content: flex-end;
  flex-flow: row wrap;
}

figcaption {
  margin: 0;
  text-align: left;
}

figcaption,
.asset,
.byline {
  display: block;
  flex: 1 100%;
}

a,
img,
p {
  margin: 0;
  padding: 0;
}

.byline {
  background-color: lightgrey;
  text-align: right;
  font-size: .8rem;
  padding-bottom: .5rem;
}

.asset {
  background-color: grey;
}

figcaption {
  background-color: darkgrey;
  color: white;
  padding: 1em 2em;
}