JSFiddle - React, Tailwind, and code Playground

by jhorvath

HTML

<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
<div id="typewriter"></div>

CSS

.type {
  color: green
}

.variable {
  color: lightblue;
}

.method {
  color: yellow;
}

body {
  background-color: #222;
  color: white;
  font-family: Consolas,monaco,monospace; 
}

JavaScript

const typewriter = new Typewriter('#typewriter', {
  loop: true,
  delay: 25
});

function typeString(text, cssClass) {
	typewriter.typeString(`<span class="${cssClass}">${text}</span>`);
}

function type(name) {
	typeString(name, "type");
}
function variable(name) {
	typeString(name, "variable");
}
function method(name) {
	typeString(name, "method");
}

type("WebApplicationBuilder")
typeString(" ")
variable("builder")
typeString(" = ")
type("WebApplicationBuilder")
typeString(".")
method("CreateBuilder")
typeString("(args ?? ")
type("Array")
typeString(".")
method("Empty<string>")
typeString("());")

typewriter
	.typeString("<div></div>")
  .pauseFor(100)
  .typeString('public sealed record Account(Guid Id, string Name, Contact MainContact);<div></div>')
  /* .deleteAll() */
  .pauseFor(500)
  .start();
  
  /* const instance= new Typewriter('#typewriter', {
      strings: ['<span class="wrapper"><span class="span-1">Hello</span>, <span class="span-2">How</span> </br><span class="span-3">are</span> <span class="span-4">you</span>?</span>', '<span class="wrapper"><strong>Test</strong></span>'],
      autoStart: true,
      loop: true,
      delay: 50
    }); */