JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<div class="i-wrapper">
    <div class="wrapper">
        <div class="sidebar left">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam architecto delectus distinctio et eum iste iusto minima mollitia praesentium voluptatibus? Dolor, exercitationem quasi? Animi harum, perspiciatis placeat quia quibusdam quos.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam architecto delectus distinctio et eum iste iusto minima mollitia praesentium voluptatibus? Dolor, exercitationem quasi? Animi harum, perspiciatis placeat quia quibusdam quos.</p>
        </div>

        <div class="sidebar right">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam architecto delectus distinctio et eum iste iusto minima mollitia praesentium voluptatibus? Dolor, exercitationem quasi? Animi harum, perspiciatis placeat quia quibusdam quos.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam architecto delectus distinctio et eum iste iusto minima mollitia praesentium voluptatibus? Dolor, exercitationem quasi? Animi harum, perspiciatis placeat quia quibusdam quos.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam architecto delectus distinctio et eum iste iusto minima mollitia praesentium voluptatibus? Dolor, exercitationem quasi? Animi harum, perspiciatis placeat quia quibusdam quos.</p>
        </div>

        <div class="main">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus accusantium, beatae dolore dolorem ex excepturi fugiat harum iure laudantium necessitatibus nesciunt nihil omnis porro quis tempore ut, voluptas voluptates voluptatum?</p>
            <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia,...

CSS

body {
    background: #eee;;
    }

    .i-wrapper {
        position: relative;;
        }
        .wrapper {}
        .wrapper:after {
            display: block;
            clear: both;

            content: "";
            }

            .sidebar {}
            .sidebar.left,
            .sidebar.right {
                float: left;
                width: 200px;
                position: relative;
                z-index: 2;
                }
            .sidebar.right {
                float: right;
                }
            .sidebar.left {
                color: #fff;
            }
            .main {
                float: none;
                margin: 0 200px;
                }
            .main:before,
            .main:after {
                display: block;
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                height: 100%;
                width: 200px;
    
                content: "";

                background: #000;
                }
            .main:after {
                left: auto;
                right: 0;

                background: rgba(255, 0, 0, 0.37);
                }