JSFiddle - React, Tailwind, and code Playground

HTML

<div class="message">
    <h1>Content</h1>
    <p>Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.</p>
</div>
<div class="image">
    <img class="test" src="http://th03.deviantart.net/fs31/200H/i/2008/225/e/7/Dahlia_13_by_andras120.jpg" alt="dalia" />
</div>

CSS

.image, .message {
    margin-top:80px;
    display:inline-block;
    position:relative;
    vertical-align:top;
    width:340px;
    font-family:Calibri;
}
.message {
    padding:0 80px;
    width:280px;
}
.image:before, .image:after {
    content:'';
    position:absolute;
    width:0;
    border-left:20px solid white;
    left:0;
}
.image:before {
    top:0;
    height:20px;
    border-bottom:16px solid transparent;
}
.image:after {
    top:36px;
    bottom:0;
    border-top:16px solid transparent;
}
.test {
    display:block;
    width:100%;
}