JSFiddle - React, Tailwind, and code Playground

by Vivekk Upadhyay

HTML

<script src="http://jnicol.github.io/particleground/js/jquery.particleground.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script>
    document.addEventListener('DOMContentLoaded', function() {
        particleground(document.getElementById('particles'), {
            dotColor: '#5cbdaa',
            lineColor: '#5cbdaa'
        });
        var intro = document.getElementById('intro');
        intro.style.marginTop = -intro.offsetHeight / 2 + 'px';
    }, false);
</script>
<div id="particles">
    <section class="container-fluid about">
        <div class="container parallax-window " data-parallax="scroll" data-image-src="/images/parallax.jpg">
            <div class="row">
                <div class="col-md-12">
                    <p>From concept to roll out, GM Motors...</p>
                </div>
            </div>
        </div>
    </section>
</div>

CSS

#particles {


    width: 100%;


    height: 400px;


    position: relative;


    overflow: hidden;


    background: #296496;


}


section.about {


    position: absolute;


    left: 0;


    top: 50%;


    padding: 0 20px;


    width: 100%;


    text-align: center;


}


section.about p {


    font-size: 26px;


    line-height: 1.5em;


    color: white;


    margin: 0;


    text-align: center;


    font-weight: 300;


}