HTML

 <div class="card-big">
    <div class="card">
      <div class="card-img">
        <img src="https://images.unsplash.com/photo-1499856871958-5b9627545d1a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1640&q=80" alt="Parisian bridge during night time">
        </div>
      <div class="tags">
        <p class="posted-date">Posted 12 July 2021</p>
        <p class="tag">Travel</p>
      </div>

      <div class="content">
        <h1 class="heading">Heading</h1>
        <p class="intro-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi interdum mauris elementum egestas gravida netus...</p>
      </div>
      <div class="read-more">
        <p>Read more</p>

      </div>
    </div>
    </div>

CSS

*{
  padding:0;
  margin:0;
}
.card-big{
  margin:20px;
}
.card{
  width:300px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 4px 15px 0 rgba(0, 0, 0, 0.14);

  padding:15px;
  border-radius:20px;
}
.card:hover{
  cursor:pointer;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}
img,
.content{
  width:300px;
}
.tags{
  padding-top:8px;
  display:flex;
  justify-content:space-between;
}
.posted-date{
  color:#AAA9A9;
}
.tag{
  color:white;
  background-color:#B290A0;
  padding:2px 8px;
  border-radius:8px;
}
.heading{
  padding-top:8px;


}
.intro-text{
    padding:8px 0;
}

.read-more {   
  font-size:16px;
  color:#AAA9A9;
  display:flex;
  justify-content:flex-end;  
  position: relative;
  color: #AAA9A9;
}

.read-more:after {
  content: '';
  position: absolute;
  width: 21%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  right: 0;
  background-color: #AAA9A9;
  transform-origin: bottom left;
  transition: transform 0.25s ease-out;
}

.read-more:hover:after {
  transform: scaleX(1);
  transform-origin: bottom right;
}

check the final result of this tutorial on codepen

Conclusion Some articles and tutorials that will help to understand more about box-shadow & flex CSS Flexbox css box shadow