JSFiddle - React, Tailwind, and code Playground

by NGLN

HTML

<div class="box">
    <div class="head">
        <div class="like"><img src="http://lorempixum.com/50/20/abstract" alt="" /></div>
        <h3>User927</h3>
    </div>
    <div class="cont">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="foot">
        <a href="">More</a>
    </div>   
</div>

CSS

.box {
    width: 310px;
    color: gray;
    position: relative;
}
.box .head {
    background: black url('http://lorempixum.com/25/25/abstract') no-repeat 9px 7px;
    color: white;
    padding: 7px 5px 3px 40px;
    font-weight: bold;
    font-size: 150%;
}
.box .cont {
    border-left: 1px solid silver;
    border-right: 1px solid silver;
    padding: 5px 20px 5px 40px;
}
.box .foot {
    background: lightgray;
    border: 1px solid silver;
    border-bottom-width: 3px;
    text-transform: uppercase;
    text-align: center;
    padding: 5px;
}
.box .head:before,
.box .head:after,
.box .foot:before,
.box .foot:after {
    font-size: 0px; 
    content: ".";
    position: absolute;    
}
.box .head:before {
    border-top: 5px solid white;
    border-right: 5px solid black;
    left: 0;
    top: 0;
}
.box .head:after {
    border-top: 5px solid white;
    border-left: 5px solid black;
    right: 0;
    top: 0;
}
.box .foot:before {
    border-bottom: 7px solid white;
    border-right: 7px solid transparent;
    left: 0;
    bottom: 0;
}
.box .foot:after {
    border-bottom: 7px solid white;
    border-left: 7px solid transparent;
    right: 0;
    bottom: 0;
}
.box .head .like img {
    float: right;
    padding: 2px 4px;
}
.box .foot a {
    text-decoration: none;
    color: gray;
    font-weight: 900;
}