JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="posts">

 <li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
            <div class="bloglist text-center">
              <div class="overflow"></div>
              <div class="post-content">
                <div class="listHeader">
                  <h1>Title 1</h1>
                </div>
                <div class="sbMeta">
                  <div class="loader"></div>
                  <div class="sbCats">Category</div>
                  <div class="sbAuth">
                    Author
                  </div>
                </div>
                <div class="sbFooter">
                  <a href="singleblog.html" class="pull-left"><i class="esen-Calendar"></i>Date</a>
                  <a href="singleblog.html" class="pull-right sbflast"><i class="esen-Clock"></i>Min read</a>
                </div>
              </div>
            </div>
          </li>
          
<li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
            <div class="bloglist text-center">
              <div class="overflow"></div>
              <div class="post-content">
                <div class="listHeader">
                  <h1>Title 2</h1>
                </div>
                <div class="sbMeta">
                  <div class="loader"></div>
                  <div class="sbCats">Category</div>
                  <div class="sbAuth">
                    Author
                  </div>
                </div>
                <div class="sbFooter">
                  <a href="singleblog.html" class="pull-left"><i class="esen-Calendar"></i>Date</a>
                  <a href="singleblog.html" class="pull-right sbflast"><i class="esen-Clock"></i>Min read</a>
                </div>
              </div>
            </div>
          </li>
          
       <li class="wow fadeInUp" data-wow-duration="700ms" data-wow-delay="300ms">
            <div class="bloglist text-center">
              <div class="overflow"></div>
              <div...

CSS

#posts li {
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 33%;
    background: #efefef;
}

#posts li .bloglist {
    width: 100%;
    position: relative;
    border: 1px solid #f1f1f1;
    padding-bottom: 22px;
    overflow: hidden;
}

.text-center {
    text-align: center;
}

#posts li .bloglist .overflow {
    z-index: 2;
}

.overflow {
    background-color: #3994ce;
    mix-blend-mode: multiply;
    opacity: .8;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
}

#posts li .bloglist .post-content {
    position: relative;
    z-index: 3;
}

#posts li .bloglist .post-content .listHeader {
    position: relative;
    margin-bottom: 20px;
}

#posts li .bloglist .post-content .sbMeta {
    position: relative;
    width: 100%;
}

#posts li .bloglist .post-content .sbMeta .loader {
    height: 1px;
    width: 100px;
    margin: 0 auto;
    margin-bottom: 20px;
    position: relative;
    background: #fff;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}

#posts li .bloglist .post-content .sbAuth {
    width: 100%;
    text-align: center;
    margin-bottom: 40px;
}

#posts li .bloglist .post-content .sbAuth a {
    color: #fff;
}

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

#posts li .bloglist .post-content .sbFooter {
    width: 90%;
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
}