JSFiddle - React, Tailwind, and code Playground

by NGLN

HTML

<div class="box">
        <div class="head">
            <span></span>
            <div class="like"><img src="http://lorempixum.com/50/20/abstract" alt="" /></div>
            <h3>User927</h3>
        </div>
        <span></span>
        <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">
            <span></span>
            <a href="">More</a>
        </div>   
        <span></span>
    </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 span:first-child,
    .box .head+span,
    .box .foot span:first-child,
    .box .foot+span {
        font-size: 0px; 
        content: ".";
        position: absolute;    
    }
    .box .head span:first-child {
        border-top: 5px solid white;
        border-right: 5px solid black;
        left: 0;
        top: 0;
    }
    .box .head+span {
        border-top: 5px solid white;
        border-left: 5px solid black;
        right: 0;
        top: 0;
    }
    .box .foot span:first-child {
        border-bottom: 7px solid white;
        border-right: 7px solid transparent;
        left: 0;
        bottom: 0;
    }
    .box .foot+span {
        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;
    }