JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/bgrins/loremjs/master/lorem.js"></script>
<br />
<div class="banner">
<h3>Banner Heading</h3>
<div class="banner-content">
<div class="banner-thumb">
<img src='http://placehold.it/350x150' />
</div>
<div class="banner-description" data-lorem='1'>
</div>
<div class='banner-footer'>
</div>
<br class='clear' />
</div>
</div>
CSS
.banner {
margin: 5px 40px;
background: #EDEDED;
border: solid 2px #AAA;
box-shadow: 0 0 8px #aaa;
border-radius: 0 0 5px 5px;
}
.banner h3 {
padding: 15px 5px;
margin: 10px -20px;
border: solid 3px #AAA;
position:relative;
font-weight: normal;
font-size: 20px;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
text-align: center;
border-radius: 3px;
background: #efefef;
background: -webkit-linear-gradient(top, #efefef, #dfdfdf);
background: -moz-linear-gradient(top, #efefef, #dfdfdf);
background: -ms-linear-gradient(top, #efefef, #dfdfdf);
background: linear-gradient(top, #efefef, #dfdfdf);
}
.banner h3:after, .banner h3:before {
content: '';
position: absolute;
bottom: -7px;
background: #555;
border:solid 2px #aaa;
width: 25px;
height: 20px;
z-index: -1;
}
.banner h3:after {
left: 2px;
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
}
.banner h3:before {
right: 2px;
-webkit-transform: rotate(80deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
}
.banner-content {
position: relative;
padding: 30px 18px;
margin: 12px;
margin-top: none;
font-size: 20px;
font-family: Georgia serif;
border: solid 4px #e3e3e3;
}
.banner-description {
}
.banner-thumb {
float:right;
}
.banner-thumb img {
padding-left: 20px;
padding-bottom: 20px;
}
.banner-footer {
clear:both;
}