JSFiddle - React, Tailwind, and code Playground

by Vicos

HTML

<body>
<div id="wrapper">
	<!--<header id="head">
        head
	</header> #head-->

	<section id="middle">

		<div id="container">
			<section id="content">
                <div id="add">
                  additions
                </div>
                <section id="top">
                    <section id="top-a">
                        top-a
                    </section>
                    <section id="top-b">
                        top-b
                    </section>
                </section>
                <section id="gallery">
                gallery
                </section>
                <section id="cont">
                <section id="c-top">
                    <section id="c-top-a">
                   c-top-a
                    </section>
                    <section id="c-top-b">
                    c-top-b
                    </section>
                </section>
                <aside>
                   article
                </aside>
                <section id="c-bottom">
                    <section id="c-bottom-a">
                    c-bottom-a
                    </section>
                    <section id="c-bottom-b">
                   c-bottom-b
                    </section>
                </section>
                </section>
                <section id="bottom">
                    <section id="bottom-a">
                    bottom-a
                    </section>
                    <section id="bottom-b">
                    bottom-b
                    </section>
                </section>
            </section><!-- #content-->
		</div><!-- #container-->

		<header id="header">
            <section id="logo">
            logo
            </section>
            <nav id="menu">
            menu
            </nav>
        </header><!-- #header -->
		<aside id="sidebar">
			sidebar
		</aside><!-- #sidebar -->
	</section><!-- #middle-->
	<footer id="footer">
    <section id="header-bottom">
    header-bottom
    </section>
   ...

CSS

body {
    background-color: #cccccc;
    background: url(../images/back.jpg) 0 0 no-repeat;
    background-attachment: fixed;
    color: #cc4c4f;
}
p {
	margin: 0 0 18px
}
img {
	border: none;
}
input {
	vertical-align: middle;
}
#wrapper {
	min-width: 790px;
	max-width: 1400px;
    height: 100%;
	margin: 0 auto;
    position: relative;
}


/* Head
-----------------------------------------------------------------------------*/
/*#head {
	height: 80px;
	background: #FFE680;
    position: relative;
}*/
/* Middle
-----------------------------------------------------------------------------*/
#middle {
	border-left: 250px solid #000;
	border-right: 250px solid #FFACAA;
	height: 100%;
	position: relative;
}
#middle:after {
	content: '';
	clear: both;
	display: table;
}
#container {
	width: 100%;
    height: 100%;
	float: left;
	overflow: hidden;
	margin-right: -100%;
}
#content {
	padding: 0 20px;
    position: relative;
}
#add{
    width: 100%;
    display: block;
    height: 50px;
}
#top{
    display: block;
    clear: both;
}
#top-a{
    width: 49.9%;
    display: inline;
    float: left;
}
#top-b{
    width: 49.9%;
    display: inline;
}
#gallery{
    width: 100%;
    height: 50px;
    margin: 0 auto;
    display: block;
}
#c-top{
    display: block;
}
#c-top-a{
    width: 49.9%;
    display: block;
    float: left;

}
#c-top-b{
    width: 49.9%;
    display: block;
    float: right;
}
#cont{
    width: 100%;
    
    display: block;
   
}
#c-bottom{
    display: block;
}
#c-bottom-a{
    width: 49.9%;
    display: block;
    float: left;

}
#c-bottom-b{
    width: 49.9%;
    display: block;
    float: right;
}
#bottom{
    display: block;

}
#bottom-a{
    width: 49.9%;
    display: block;
    float: left;


}
#bottom-b{
    width: 49.9%;
    display: block;
    float: right;

}
/* Header
-----------------------------------------------------------------------------*/
#header {
	float: left;
	width: 250px;
	position: relative;
	left: -250px;
    height:...