JSFiddle - React, Tailwind, and code Playground

by Pete_D

HTML

<body>
<div id="wrapper">
    <header>
        <nav>
            <ul id="menu1">
                <li><a href="">link 1</a></li>
                <li><a href="">link 2</a></li>
                <li><a href="">link 3</a></li>
                <li><a href="">link 4</a></li>
            </ul>
        </nav>
    </header>
    <div id="bodywrapper">
        <div id="main">
            111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111
        </div>
        <div id="images">
            222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
        </div>
        <div id="related">
            333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333
        </div>
    </div>
</div>
</body>

CSS

body {
            margin:0;
            padding:0;
            }
        header nav {
            float:left;
            }
        header nav ul {
            margin:0;
            padding:0px;
            }
        #menu1 li {
            list-style-type:none;
            float:left;
            margin:0;
            width:200px;
            height:50px;
            background:orange;
            margin-right:1px;
            }
        #bodywrapper {
            clear:both;
            float:left;
            position:relative;
            }
        #images {
            position:relative;
            margin:0 300px 0 600px;
            background:cyan;
            }
        #main {
            position:absolute;
            top:0;
            left:0;
            width:600px;
            background:lime;
            }
        #related {
            position:absolute;
            top:0;
            right:0;
            width:300px;
            background:red;
            }
        #wrapper {
            width:100%;
            height:auto;
            margin:0;
            padding:0;
            }

        @media screen and (max-width: 1280px){
            #bodywrapper {
                clear:both;
                float:left;
                position:relative;
                }
            #images {
                float:left;
                position:relative;
                margin:0;
                background:cyan;
                }
            #main {
                float:left;
                position:relative;
                margin:0;
                width:200px;
                background:lime;
                }
            #related {
                clear:both;
                float:left;
                position:relative;
                margin:0;
                width:100%;
                background:purple;
                }
            #wrapper {
                width:100%;
                height:auto;
                margin:0;
               ...

JavaScript

<script type="text/javascript" src="https://github.com/scottjehl/Respond/blob/master/respond.min.js"></script>