JSFiddle - React, Tailwind, and code Playground

HTML

<h1>My First Heading</h1>

<p>My first paragraph.
<div id="features">
    <div class="wrapper">
        <ul>
            <li class="feature-1">
                <h4>Easy to Edit</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis turpis ac libero interdum, id fringilla purus feugiat. Etiam malesuada mattis nibh at bibendum.</p>
            </li>
            <li class="feature-2">
                <h4>Layered PSD</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis turpis ac libero interdum, id fringilla purus feugiat. Etiam malesuada mattis nibh at bibendum.</p>
            </li>
            <li class="feature-3">
                <h4>Ready to Go</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis turpis ac libero interdum, id fringilla purus feugiat. Etiam malesuada mattis nibh at bibendum.</p>
            </li>
            <div class="clear"></div>
        </ul>
    </div>
</div>

CSS

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
	background: linear-gradient(to bottom,#5f4d93 15%,#e37682 85%)
}

#features ul {
    margin: 80px 0;
}
#features ul li {
    width: 300px;
    padding-top: 140px;
    float: left;
    margin-right: 10px;
    text-align: center;
}