JSFiddle - React, Tailwind, and code Playground

by GMK Hussain

HTML

<div id="hdrani">
    
    <div class="header-text">
	Expert Creer Training for <strong>MBAs</strong>
</div>

</div>

CSS

body{
    background-color:#4E5E98;
}
body *{
    
}


.header-text {
    background: none repeat scroll 0 0 transparent;
    color: #999;
    display: block;
    margin-top: 28px;
    width: 100%;
	letter-spacing:4px;
}

.header-text:before, .header-text:after {
    color: #c1d72e;
    font-size: 42px;
}
.header-text:before {
    content: "[";
    position: relative;
    top: 3px;
	}

.header-text:after {
    background: none repeat scroll 0 0 transparent;
    content: "]";
    position: relative;
    top: 3px;
}

.header-text > strong {
    color: #4e5e98;
}


.hdrani2
.header-text:before {
    left: 37%;
}
.hdrani2
.header-text, .header-text strong {
    color: white !important;
}
.hdrani2
.header-text:after {
    right: 37%;
}

JavaScript

var i = 0;
function changeClass(){
    $("#hdrani").removeClass("hdrani" + i)
        i = (i==2)?1:i+1;    
    $("#hdrani").addClass("hdrani" + (i));
}
setInterval(changeClass, 500);