JSFiddle - React, Tailwind, and code Playground

by karan shah

HTML

<div class="inner">

					<h2 class="animated-headline" data-delay=2000>A investment service built for

						<br>
						<span class="animation fifth">unpredictable markets.</span>
						<span class="typed-cursor">|</span>
						<span class="headline-partial">retiring comfortably.</span>
						<span class="headline-partial">lowering fees.</span>
						<span class="headline-partial">dreaming big.</span>
					</h2>
					<ul class="actions">
						<li><a href="#content" class="button big special">Sign Up</a></li>
						<li><a href="#elements" class="button big alt">Learn More</a></li>
					</ul>
				</div>

CSS

.inner .animated-headline .animation,
.inner .animated-headline .animation.first {
    color: #90caf9
}
.inner .animated-headline .animation.second {
    color: #7fb800
}
.inner .animated-headline .animation.third {
    color: #ffb400
}
.inner .animated-headline .animation.fourth {
    color: #90caf9
}
.inner .animated-headline .animation.fifth {
    color: #7fb800
}


.inner .animated-headline .headline-partial {
    display: none
}

@keyframes blink {
    0%, 100% {
        opacity: 1
    }
    50% {
        opacity: 0
    }
}

.inner .animated-headline .typed-cursor {
    color: #999;
    font-weight: 300;
    opacity: 1;
    animation: blink .7s infinite;
    display: inline-block
}