JSFiddle - React, Tailwind, and code Playground

by ipyxel

HTML

<div class="typewrapper">
<div class="typetext">
<div class="headline">
</div>
</div>
</div>

CSS

.typewrapper{
	position: relative;
	margin-right: auto;
	margin-left: auto;
	background-repeat: no-repeat;
	border: medium solid #333333;
	background-color: #CCCCCC;
	height: 100px;
	width: 300px;
}

.typetext{
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	color: #0066FF;
	font-size: 14px;
	line-height: 17px;
}

.headline {
	font-size: 18px;
	font-weight: bold;
	color: #FF0000;
	text-align: center;
}

JavaScript

var text = "";
	var count = 0;
	var maxspeed = 200;

	
	$(document).ready(function(){
		function type_what_you_want(your_text){
				text = your_text;
				type();
		}
		
		function character(start, end, text){
				return text.substring(start, end);
		}
		
		function type() {
				var random = Math.floor (Math.random() * maxspeed);
				setTimeout (type, random);
				$('.headline').append(character (count, count+1, text));
				count++;
		}
		type_what_you_want (
		"This Is A Headline That Grabs Attention!");
	});