JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <figure class="main-image">
    <a href="img/cannabislegalmap.png">
      <img src="http://www.gdnonline.com/gdnimages/20161002/20161002110750unnamed.jpg" width=" 100%" alt="Image of a map of states were recreational cannabis is legal">
    </a>
    <figcaption class="caption-clr">States were recreational cannabis use is legal.</figcaption>
  </figure>
</body>

CSS

.caption-clr {
  background-color: rgba(0, 0, 0, .1);
}

body {
  background-color: lightgreen;
}
figure img {
  display: block
}