JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mainCnt"><div class="news-item"><div class="news-title">Brilliant news number 3 <span>2011-12-21 13:51:03</span></div><div class="news-content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper consectetur nisl, sit amet accumsan lacus mollis eget. Nam libero nulla, commodo ut suscipit in, scelerisque quis nulla. Sed dapibus ultricies ligula, quis adipiscing ipsum ornare sed. In hac habitasse platea dictumst. Pellentesque nec diam arcu, ac tristique quam. Morbi egestas, metus sit amet porta tristique, neque magna dapibus massa, at rutrum tortor diam eget tortor. Integer enim massa, condimentum ut convallis et, pellentesque sit amet turpis. Vestibulum quis odio nec tortor facilisis tincidunt eget at sapien. Vestibulum vel odio ut mauris mollis aliquet.</p>
</div></div></div>

CSS

body{
padding:50px;
    background: url(http://storage4.static.itmages.ru/i/12/0114/h_1326509050_1766753_5c4d263a88.png) no-repeat;
}

.mainCnt {
background: rgba( 149,154,160, 0.5); padding: 3px; 
    -webkit-border-radius: 8px; 
}

//Creating styles for the news section
.news-item {
    -webkit-border-radius: 8px;
}
.news-item .news-title {
    background: -webkit-gradient(linear, left top, left bottom, from(#D3D0E1), to(#778085));
    -webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;
    padding: 5px;
}
.news-item .news-content {
    //opacity: 0.75;
background: rgba(80,85,91, 0.4);
    background: -webkit-gradient(linear, left top, left bottom, from(#505960), to(#082B3F));



    color: white;
    -webkit-border-bottom-left-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    padding: 5px;
}

.news-item .news-title SPAN {
    color: #C42738;
    font-size: 14px;
    padding-left: 5px;
}