JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Main Section -->
<section class="main pageNavigationTarget" id="mainSlider" data-title="A Useful Slider">
    <div class="inner">
        <section class="slideshow">
            <div class="slide">
                <h2>Slide 1</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, dignissimos perferendis illo id vel repellat accusamus possimus. Voluptates, magni autem natus dolorum molestiae numquam doloremque. Harum beatae saepe impedit distinctio!</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, dignissimos perferendis illo id vel repellat accusamus possimus. Voluptates, magni autem natus dolorum molestiae numquam doloremque. Harum beatae saepe impedit distinctio!</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, dignissimos perferendis illo id vel repellat accusamus possimus. Voluptates, magni autem natus dolorum molestiae numquam doloremque. Harum beatae saepe impedit distinctio!</p>
            </div>
            <div class="slide">
                <h2>Slide 2</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, dignissimos perferendis illo id vel repellat accusamus possimus. Voluptates, magni autem natus dolorum molestiae numquam doloremque. Harum beatae saepe impedit distinctio!</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, dignissimos perferendis illo id vel repellat accusamus possimus. Voluptates, magni autem natus dolorum molestiae numquam doloremque. Harum beatae saepe impedit distinctio!</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, dignissimos perferendis illo id vel repellat accusamus possimus. Voluptates, magni autem natus dolorum molestiae numquam doloremque. Harum beatae saepe impedit distinctio!</p>
            </div>
            <div class="slide">
                <h2>Slide 3</h2>
         ...

CSS

*, *:after, *:before{
    -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
}

/* Layout */
    header .inner, section.main .inner, footer .inner{
        position: relative;
        width: 1000px;
        margin-left: -500px;
        left: 50%;
    }
    section.main, footer{
        padding: 40px 10px;
    }

/* Main Section */
    section.main{ background: #fff; width: 1200px; max-width: 100%; margin:0 auto; }
    section.main.gray{ background: #ddd; }
    section.main.darkGray{ background: #444; }
    section.green{ background: url('http://ignitepixels.com/sandbox/svg/images/bg-equations.png') center top no-repeat #00a950; }
    section.main .slideshow{
        padding-bottom: 20px;
    }
    .js section.main .slideshow .slide{
        padding-bottom: 16px;
        position: absolute;
    }
    section.main .slideshow .pager{
        position: absolute;
        bottom: 5px;
        right: 10px;
        z-index: 10;
    }
    section.main .slideshow .pager a{
        padding: 2px 5px;
    }
    .separator{
        display: block;
        position: relative;
        width: 1200px;
        margin: 0 auto;
        max-width: 100%;
        background: transparent;
    }
    .separator.blendWhite{ background: #fff; }
    .separator.blendGray{ background: #ddd; }
    .separator.blendDarkGray{ background: #444; }
    .separator.blendGreen{ background: #00a950; }
    .separator path.white{ fill: #fff; }
    .separator path.gray{ fill: #ddd; }
    .separator path.darkGray{ fill: #444; }
    .separator path.green{ fill: #00a950; }