JSFiddle - React, Tailwind, and code Playground

by oduska

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<p>
    6 seconds between transitions.
</p>

<div class="tagline-latest-verdict">
    <div class="fade-wrap">
        <div class="we-win">
            <h2>
                We Win <span>For You</span>
            </h2>
        </div>

        <div class="latest-verdict">
            <h3>
                $1.8 Million Verdict in Whistleblower Case
            </h3>

            <p>
                Cynthia Begazo had been retaliated against based upon her complaints of others being discriminated against due to disability... <a href="#">Read More</a>
            </p>
        </div>
    </div>
    
    <a href="#" class="button">
        Request a FREE Consultation
    </a>
</div>

SCSS

@import url('//fonts.googleapis.com/css?family=Roboto:400,500,700');

body {
    font-family: 'Roboto', sans-serif;
    text-align: center;
    padding: 2em;
}

/* **************************************************** */

.tagline-latest-verdict {
    background-color: rgba(18, 87, 144, 0.85);
    color: #fff;
    width: 100%;
    max-width: 368px;
    padding: 2em 2em 2.5em 2em;
    margin: 0 auto;
}

.button {
    display: block;
    color: rgba(50, 103, 149, 1);
    background-color: #fff;
    border-radius: 4px;
    text-align: center;
    max-width: 320px;
    margin: 0 auto;
    padding: 0.5em 0.5em;
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
}

.fade-wrap {
    position: relative;
    
    &:after {
        padding-top: 56.25%;
        display: block;
        content: ' ';
    }
}

.we-win {
    z-index: 50;
    opacity: 1;
    
    h2 {
        text-transform: uppercase;
        text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
        font-size: 78px;
        margin: 0 0 0.15em 0;
        font-weight: 500;
        line-height: 0.9;
        text-align: center;
        
        span {
            font-size: 68px;
        }
    }
}

.latest-verdict {
    opacity: 0;
    
    p {
        line-height: 1.2;
        
        a {
            color: #fff;
            text-decoration: underline;
        }
    }
}

.we-win, .latest-verdict {
    position: absolute;
    left: 0;
    top: 0;
    transition: opacity 0.4s ease-in-out;
}

.fade-wrap.crossfade {
    .latest-verdict {
        opacity: 1;
        z-index: 51;
    }
    
    .we-win {
        opacity: 0;
    }
}

JavaScript

(function($){
	
    // Flip tagline after 6 seconds
    setInterval(
        function(){
            $('.fade-wrap').toggleClass('crossfade');
        }
    , 6000);
    
})(jQuery);