JSFiddle - React, Tailwind, and code Playground

by Jihad Dzikri Waspada

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<article class="blog">
    <header class="blog-header">
        <div class="blog-bg-header" style="background-image: url('http://placehold.it/1350x750')"></div>
    </header>
    <div class="blog-body">
        <time class="blog-date">24 Jan</time> <a href="example.com">
      <h2>Title</h2>
      <p>Content</p>
    </a>

    </div>
</article>

CSS

.blog {
    background: white;
    margin-top: 20px;
    border-top: 3px primary solid;
    border-bottom 3px solid #eee;
}
.blog .blog-header {
    overflow: hidden;
    z-index 90;
}
.blog .blog-header .blog-bg-header {
    height: 275px;
    background-position: center;
    background-size: cover;
    transition: 0.25s ease-in-out;
}
.blog .blog-header .blog-bg-header:hover {
    cursor: pointer;
    transform: scale(1.3);
}
.blog-body {
    margin: -60px 20px 0 20px;
    padding: 20px 20px 10px 20px;
    background: white;
    z-index 100;
}