JSFiddle - React, Tailwind, and code Playground

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;
	min-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 = 10;

	
	$(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 (
		"can this pulsate whilst writing blagcan this pulsate whilst writing blagcan this pulsate whilst writing blagcan this pulsate whilst writing blagcan this pulsate whilst writing blagcan this pulsate whilst writing blag");
	});