JSFiddle - React, Tailwind, and code Playground

by batcave

HTML

<div class="post">
  <div class="thumb">
    <img class="image" src="https://picsum.photos/400/200">
    <h3 class="title">title</h3>
  </div>
  <p class="content">Content</p>
</div>

SCSS

.post {
  .thumb {
    position: relative;
    background-color: deepskyblue;
    
    .image {
      display: block;
      max-width: 100%;
      max-height: 100%;
    }
    
    .title {
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background: rgba(#000, .7);
      color: #fff;
      padding: .5rem;
      margin: 0;
    }
  }
  .content {
    
  }
}