JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mboard-block-up">
    <h2>Lorem %TitleName%</h2>    
</div>
<div class="content">
    <div class="floatedblock left">I</div>
    <div class="floatedblock right">II</div>
    <div class="mboard-block">
        <h2>%SubTitleName%</h2>    
        <p>Content here.. content here.. content here.. content here.. content here.. content here.. content here.</p>
    </div>
</div>

CSS

.content {
    position: relative;
    padding-top: 20px;
}

.floatedblock {
        position: absolute;
    top: 0;
        background:red;
        width:64px;
        height:64px;
        text-align: center;
        }
    .floatedblock.left{
        left: -10px;
        }
    .floatedblock.right{
        right: -10px;
        }

.mboard-block {
    margin: 10px;
    padding: 14px;
	background-color: #f5f5f5;
	border: 1px solid #eee;
}
.mboard-block-up{
    margin: 10px;
    padding: 20px;
	background-color: #EFEFEF;
	border: 1px solid #000;
    text-align: center;
}
.mboard-block h2{
	font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	font-size: 14px;
	font-weight:normal;
	text-align: center;
}
.mboard-block p{
	font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    padding: 14px;
    font-size: 13px;
}