JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<div class="border">
<section class="bg-primary fade">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 text-center">
                <h2 class="section-heading">Sloo Pay?&#46;&#46;&#46; <br>of your billing pain points! </h2>
                <hr class="light">
                <p class="text-faded">blah blah blah.</p>
            </div>
        </div>
    </div>
</section>
</div>

CSS

.fade {
    opacity: 0;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}

.fade:hover {
    opacity: 1;
}

.border { border: 1px solid red;}