JSFiddle - React, Tailwind, and code Playground

by ankit saxena

HTML

<header class="clearfix" style="background:#b49e66; padding:20px; width:98%; float:left;">
			
				<h2 style="text-shadow: 4px 4px 0px #41838e; font-size: 62px; font-family: arial; color: #fff; font-weight: 400; line-height:normal; float:left; width:100%;">CSS Zilla
                    <span style="font-weight: 700; text-transform: uppercase; letter-spacing: 10px; font-size: 18px;color: #F26328;text-shadow: none; font-family: arial; float:left; width:100%;">CSS innovation simplified</span></h2>
				
				
</header>
<div class="top_header">
	<div class="block1"> header left 
    	<p>Demo content nothing to read here Demo content nothing to read here This is just some filler text This is just some filler text This is just some filler text This is just some filler text Welcome to css zilla This is just some filler text Welcome to css zilla</p>
    </div>    
    <div class="block2"> header right
    <p>Demo content nothing to read here Demo content nothing to read here This is just some filler text This is just some filler text This is just some filler text This is just some filler text Welcome to css zilla This is just some filler text Welcome to css zilla</p>
    </div>
</div>

<div class="middle_part">
	<div class="left_part"> left part
    	<p>Demo content nothing to read here Demo content nothing to read here This is just some filler text This is just some filler text This is just some filler text This is just some filler text Welcome to css zilla This is just some filler text Welcome to css zilla</p>
    </div>
    <div class="right_part"> right part
    	<p>Demo content nothing to read here Demo content nothing to read here This is just some filler text This is just some filler text This is just some filler text This is just some filler text Welcome to css zilla This is just some filler text Welcome to css zilla</p>
    </div>
</div>

<div class="footer_part">
	<div class="col1"> footer first
    	<p>Demo content nothing to read here Demo content nothing to...

CSS

<style>
	body { font-size:1.5em;}

	.top_header { background:#666; color:#fff; min-height:50px; width:100%; float:left; padding:15px 0px;}
	.block1 { width:50%; float:left; background:#033; min-height:50px;}
	.block2 { width:50%; float:left; background:#090; min-height:50px;}
	
	.middle_part { background:#CCC; width:100%; float:left; padding:15px 0px;}
	.left_part { min-height:100px; float:left; width:30%; background:#960;}
	.right_part { min-height:100px; float:left; width:70%; background:#690;}
	
	
	.footer_part { background:#930; float:left; width:100%; padding:30px 0px;}
	.col1 { background:#999; width:33.333%; float:left; min-height:300px;}
	.col2 { background:#333; width:33.333%; float:left; min-height:300px;}
	.col3 { background:#CCC; width:33.333%; float:left; min-height:300px;}
	
	
		@media screen and (max-width:980px) { body { font-size:1.4em;}}
	
		@media screen and (max-width:767px) { body { font-size:1.2em;}}
		
		@media screen and (max-width:480px) { body { font-size:0.8em;}}
		
	
	
	
</style>