JSFiddle - React, Tailwind, and code Playground

HTML

<div class="card">
  <img class="image" src="https://place-hold.it/200x300" />
  <span class="label">Exemplo de uma legenda</span>
</div>

CSS

html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

*,*:before,*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}
/* reset */
* { margin: 0; padding: 0 }


.card {
  display:inline-block;
  position:relative;
}

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

.label {
  background: rgba(0,0,0,0.4);
  color: #fff;
  display: block;
  line-height: 1;
  padding: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}