JSFiddle - React, Tailwind, and code Playground

by Mukul kant

HTML

<div id="wrapper">
         <header>
         <div id="header">
            <img src="http://s28.postimg.org/vylbwijkt/logo.png" alt="logo" /> 
            </div>   
            <div class="header-content">
               <img src="http://s3.postimg.org/9x25zh9n7/banner.png" alt="banner" />
               <div class="issue">
                  <img  class="issue-image-1" src="http://s15.postimg.org/rr9hd486f/issue_no_img.png" alt="issue" />    
                  <img class="issue-image-2" src="http://s8.postimg.org/wrpcre4ap/left_note_img.png" alt="left-notes" />
                <span class="issue-no">Issue No.<br /><b>376</b></span>
               </div>
               <div class="header-content-center">
                  <p>
                     <span class="new">NEW!</span>&nbsp;
                     <date>JUN O7,2013</date>
                  </p>
                  <p><i>Get your breakpoints on.</i></p>
                  <h1 class="h1-clear">DOT NET ARTICLES</h1>
                  <p><i>by</i>&nbsp;<a class="jon" href="#"> JOHN WOO</a><i>-10 comments</i></p>
                 <form>
                    <input type="search" placeholder="Search.."/>
                </form>
               </div>
            </div>
            <hr class="hr-style" />
         </header>
         <section id="content">
            <p class="content-paragraph">
               Text, navigation, and tables, oh, my! What's a responsive web designer to do? How can you confine your design to as few major breakpoints as possible? Where and when will you sketching?  Is it possible to sketch on actual devices, and what are the accessibility implications of doing so? The answers to these and other profound questions will be found in this exclusive excerpt from Chapter 7 of Responsive Design Workflow, Stephen Hay's new book, available now from New Riders.
            </p>
            <hr class="hr-style" />
            <p class="more">More from A List Apart</p>
            <hr class="hr-style"...

CSS

html {
    position: relative;
    min-height: 100%;
}
body 
{
	font-family : Raleway, sans-serif;
	text-decoration:none;
	line-height : 1.42857143;
	margin: 0;
}
* {
	box-sizing: border-box;
}
section.footerWidth{
	width: 960px;
	margin: 0 auto
}
#header
{
margin: 10px;	
	
}
h1,h2,h3,h4,h5,h6,li,p,a 
{
	text-decoration:none;
}
.h5-color 
{
	color: chocolate;
}
.h1-clear 
{
	font-weight:700;
	font-size:40px;
}
.header-content-center
{
	clear:left;	
	line-height: 20px;
}
#wrapper 
{
	width: 960px;
	margin-left:auto;
	margin-right:auto;
}
.header-content 
{
	text-align:center;	
}
.hr-style 
{
	background : url('http://s30.postimg.org/c6cbi6l19/horizontal_line.png') 50% 0 repeat-x;
	border : 0;
	height : 15px;
}
.content-paragraph 
{
	
	font-size : 24px;
	letter-spacing : 1.2px;
	line-height : 1.5;
	margin-left: 15px;
}
.issue
{
	width: 23px;
	height: 50px;
	float:left;
}
.issue-no
{
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	left: 52px;
	position: absolute;
	top: 435px;
	line-height: normal;
}
b,strong
{
	font-size: 40px;
	font-weight: 700;	

}
input[type=search] {
	background:url('http://s18.postimg.org/6tr7e2wqd/search_btn.png') no-repeat;
	border: solid 1px #ccc;
    border-radius:15px;
	padding: 6px;
	background-position: right 1px center;
}
form 
{
	float:right;
	margin-top: -45px;
}
.issue-image-1 
{
	margin-top:-100px;	
}
.issue-image-2
{
	margin-top: 67px;
}
date 
{
	font-weight:700;
}
.new 
{
	background-color: chocolate;
	color: white;
	font-weight: 600;
	letter-spacing: 0.3px;
	border-radius: 4px;
}
i 
{
	font-weight: 400;
	letter-spacing: 0.05em;
}
.jon 
{
	font-weight: 600;
}
.more 
{
	text-align: center;
	font-size: 32px;
	margin-top: -10px;
	margin-bottom: 10px;
}
.column-layout 
{
	display:inline-block;	
	
}
.column-3 
{
	margin-top: 43px;	
}
.column-4
{
	margin-top: 40px;	
}
.column-1,.column-2, .column-3,...