JSFiddle - React, Tailwind, and code Playground

by DustyWhite

HTML

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400&family=Teko:wght@500&display=swap" rel="stylesheet">

<h2>Salutations human!</h2>
<div id="helloworld"></div>
<div id="intro">
  <p>
  I am Peppi, the <span>friendly</span> AI. You may refer to me as your perennial overlord, or <span>"Dear benefactor"</span> for short.
  </p>
  <p>
  Your form of torture this morning will be to concatenate strings with variables and arrays into a looping cycle whose length is to be determined by boolean logic.
  </p>
</div>

CSS

body {  
background-image: url("https://image.freepik.com/free-vector/matrix-style-binary-code-digital-background-with-falling-numbers_1017-25336.jpg");
background-color: #000;
}
/* BACKGROUND IMAGE used under paid license @ freepik.com */

h2 {
  color: #fff;
  font-family: 'Teko', sans-serif;
  font-size: 2.5rem;
  margin-bottom: -1px;
  margin-top: -1px;
  text-align: center;
}

#helloworld {
  color: blue;
  font-size: 1.15rem;
  text-shadow: 1px 1px 2px coral, -1px -1px 10px aqua, 0 0 15px yellow;
  text-align: center;
}

p {
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 100;
  line-height: 1.6;
}

p:last-of-type {
  padding-bottom: 1.5rem;  
}

span {
  font-style: italic;
}

span:first-of-type {
    color: salmon;
    font-weight: 400;
}

span:nth-of-type(2) {
  color: DodgerBlue;
  text-decoration: underline;
}

JavaScript

var name = prompt("What is the label you were assigned at birth, humanoid?");  
  document.getElementById("helloworld").innerHTML="Welcome to life inside the machine, " +name;