JSFiddle - React, Tailwind, and code Playground
HTML
<textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec dapibus nunc. Donec eleifend est eget feugiat maximus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi condimentum massa porttitor rutrum lobortis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam rutrum neque maximus neque facilisis ornare. Vestibulum nisi tortor, vehicula scelerisque risus non, rutrum porta metus. Fusce urna sapien, ultricies a finibus a, rhoncus porttitor felis.
Nullam egestas tellus auctor nunc facilisis, vel ultricies sapien lacinia. Sed vel justo in massa maximus tincidunt. Proin consequat enim sit amet semper lacinia. Aliquam dictum, tellus et dapibus dignissim, orci augue volutpat risus, ut hendrerit nunc est at nisl. Praesent eget dolor sem. Vivamus pellentesque velit eu lectus imperdiet accumsan. Aenean non pharetra dui, id rhoncus libero. Fusce at posuere elit.
Curabitur fermentum non nunc semper vehicula. Nulla a arcu a risus laoreet sagittis. Nullam ullamcorper a est in tempor. Nullam gravida tortor blandit nisl eleifend, sit amet dignissim nisl suscipit. Vivamus scelerisque erat a aliquet rhoncus. Etiam iaculis metus ligula, vel luctus ante eleifend eget. Nam et consectetur dolor. Ut sagittis mauris gravida, finibus lorem at, ultrices est. Suspendisse nisi ante, dignissim ac imperdiet sit amet, elementum placerat dolor. Curabitur malesuada euismod purus.
Donec tincidunt ligula ac scelerisque fringilla. Vivamus in sapien in risus feugiat suscipit in in quam. Pellentesque scelerisque ac ligula id luctus. Sed laoreet ante a velit luctus, vitae fringilla odio imperdiet. Mauris et tellus sed diam scelerisque gravida. Pellentesque semper vel tellus quis finibus. Pellentesque fringilla mauris eu neque ultrices, in elementum turpis efficitur. Morbi fringilla lacus diam, sit amet congue est suscipit nec. Proin cursus at ipsum ut sagittis. Cras eget metus ultrices, efficitur arcu nec, pulvinar sem. Nullam...
CSS
textarea
{
outline: n
box-sizing: border-box;
border-radius: 17px;
padding: 20px;
width: 640px;
height: 420px;
resize: horizontal;
}
JavaScript
var textArea = document.querySelector("textarea");
var text = textArea.innerHTML;
var count = {value: 1};
function typing(textArea, text, count)
{
var typedText = text.slice(0, count.value) + "|";
count.value ++;
textArea.innerHTML = typedText;
}
function typingTime(textArea, text, count)
{
setTimeout(typing, 1000 / (Math.random() * 10), textArea, text, count);
}
setInterval(typingTime, 1000/10, textArea, text, count);