JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="wrapper">
<div class="wrapper_inner">
<div class="top_bar"></div>
<div class="top_sec">
<div class="inner_container">
<img src="https://lh4.googleusercontent.com/m6hW5w0kSPpU_4dLy_ZcFaF_OI688vO93gDTYK4fqw=w272-h207-p-no" height="38" width="50" border="0" class="profile_pic" />
<div class="center_part">
<div class="center_top">
<div class="center_top_inner">
<div class="center_top_name">
<span>Jitendra Singh</span>
<span class="textspan" style="margin-top:3px;"> 3 days ago</span>
</div>
<div class="center_top_right">
<span class="textspan" style="float:left; margin-top:15px;">Posted under</span>
<img src="https://lh6.googleusercontent.com/5DhrG48QdcuAKIsE8EcWUKCuJHw_KbLOOG7DpUTHQQ=s207-p-no" border="0" class="google_img" />
<div class="newsupdate">News<br /><span class="textspan" style="float:left;">update</span> </div>
</div>
</div>
</div>
<div class="content_outer">
<img src="https://lh5.googleusercontent.com/HKkeXHssfexcv74qr-pnbNJHdud4XlaJ-e2eJu1jTw=w150-h114-p-no" border="0" class="blog_img" />
<div class="blog_right">
<p style="margin:0 0 10px 0; font-size:24px;">Spot-fixing: Sreesanth talked to bookie friend after 'fixed' over, allege police </p>
<p class="textspan" style="float:left; margin:0 0 10px 0; color:#b5b5b5;font-size:14px;"> Kerala pacer Sreesanth says he is innocent and his lawyers have argued that the police, who have based their investigations heavily on phone conversations that they intercepted, have...
CSS
body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#bcbcbc;
margin:0px;
padding:0px;
background:#fff;
}
#wrapper{
width:1053px;
margin:0px auto;
padding:0px;
background:#fff;
height:150px;
}
.wrapper_inner{
width:98%;
margin:0px auto;
}
.top_bar{
width:100%;
float:left;
height:15px;
background:#f0f0f0;
}
.top_sec{
width:99.8%;
float:left;
height:140px;
background:url(https://lh5.googleusercontent.com/dGk75Zi7o8s97XuABtHCP1X6osroz44hjPyeFyrFpg=w5-h140-n) repeat-x #fff;
border:1px solid #c3c3c3;
}
.inner_container{
width:98%;
margin:0px auto;
margin-top:47px;
}
.profile_pic{
width:50px;
height:38px;
float:left;
}
.center_part{
width:653px;
float:left;
height:290px;
background:#fff;
-moz-box-shadow: 0px 0px 6px #e0e0e0;
-webkit-box-shadow: 0px 0px 6px #e0e0e0;
box-shadow: 0px 0px 6px #e0e0e0;
border:1px solid #ededed;
position:absolute;
margin-left:71px;
}
.center_top{
width:100%;
float:left;
height:49px;
border-bottom:1px solid #e5e5e5;
}
.center_top_inner{
width:91%;
margin:0px auto;
overflow:hidden;
min-height:48px;
}
.center_top_name{
width:183px;
float:left;
font-size:16px;
color:#8c8c8c;
font-weight:bold;
margin-top:10px;
/*font-family:Arial, Helvetica, sans-serif;*/
}
.textspan{
font-size:12px;
float:right;
color:#c3c3c3;
font-weight:normal;
}
.center_top_right{
width:183px;
float:right;
}
.google_img{
width:44px;
height:44px;
float:left;
margin-left:11px;
margin-right: 11px;
}
.newsupdate{
width:auto;
float:right;
font-size:16px;
color:#8c8c8c;
margin-top:10px;
font-weight: bold;
}
.content_outer{
width:582px;
margin:0px...