JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div class='info-box vertical clickable'>
  <header>
    <div class='content'>
      <img src='http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg'/>
    </div>
  </header>
  <div class='title'>
    <h4>
      Title
    </h4>
  </div>
  <article>
    <p>
     body text
    </p>
  </article>
</div>

SCSS

body {
  background: white;
}
.info-box.vertical.clickable {
  
  width: 300px;
  margin: 20px;
  
  header {
    
    height: 150px;
    border: 1px solid #ccc;
    border-radius: 3px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s linear;
    
    .content {
      background-color: #ddd;
      width: 260px;
      height: 110px;
      overflow: hidden;
      opacity: 0.8;
      transition: opacity 0.2s linear;
      
      img {
        display: block;
        width: 100%;
        height: auto;
      }
    }
  }
  header:hover {
    cursor: pointer;
    border-color: #aaa;
    transition: border-color 0.2s linear;
  }
  header:hover .content {
    opacity: 1;
    transition: opacity 0.2s linear;
  }
  .title {
    
    padding: 15px 0;
    h4 {
      margin: 0;
      display: inline-block;
    }
  }
  article {
    padding: 5px 0;
    p {
      margin: 5px 0;
    }
    p:first-of-type {
      margin-top: 0;
    }
  }
}