JSFiddle - React, Tailwind, and code Playground

HTML

<a href="http://example.com">
  <section>
    <h1>This heading should link together...</h1>
      <br />
    <p>...with this paragraph text.</p>
  </section>
</a>



<a href="http://example.com">
  <figure>   
      <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/GoldenRetrieverPuppyDaisyParker.JPG/220px-GoldenRetrieverPuppyDaisyParker.JPG" alt="puppy">
      <figcaption>...that image should link with thie caption.</figcaption>
  </figure>
</a>

CSS

h1 {
    font-size: 20px;
    font-weight: bold;
}

section {
    padding-bottom: 50px;
    text-align: center;
}

figcaption {
    background: yellow;
    width: 200px;
    padding: 10px;
    margin-top: 20px;
}