JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="it" xml:lang="it">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="it" />

<link rel="stylesheet" href="style.css" />
</head>
<body><h1>Segnali di Soccorso</h1>

<p style="text-align:center;" ><em>&laquo;Quando i muri crollano, quando perdi tutto quello che hai, hai sempre la famiglia. E la tua famiglia ha sempre la tribù.&raquo;</em></p>

<p>Famiglia.</p>

<p>Non era una parola che usassi molto, né un concetto a cui mi sentissi legata.</p>

<p>Non ho mai conosciuto mio padre (situazione non molto comune, per una puledra cresciuta nella Scuderia Due). Quando mia madre aveva la mia età aveva passato gran parte della sua esistenza&hellip; beh, utilizzerei termini differenti per descrivere gli altri pony. Ma era mia madre. Per lei preferirei utilizzare parole come &laquo;promiscua&raquo; e &laquo;inebriata&raquo;.</p>

<p>Crescendo avevo avuto mia madre. Ma i ricordi di lei erano per lo più del tipo &laquo;stai qui e lascia che siano i grandi a parlare&raquo;. Comunque mi insegnò qualche gioco. Anche se mi ero resa conto (già pure da fiancobianco) che lo faceva per alleviare più la sua noia che la mia, avevo a cuore ogni ricordo felice di quando giocavo assieme a lei con tutti i giochi da tavolo, strategia e con i blocchi dai colori sgargianti che la Scuderia aveva da offrire.</p>

<p>Ma anche allora non ho mai pensato a noi come una &laquo;famiglia&raquo; nel vero senso affettivo della parola.</p>

<p>Ora, attraverso la nebbia di dolore, mi rendevo conto che questo stava cambiando. Era già cambiato, a mia insaputa.</p>

<p>Con l'effetto degli antidolorifici svanito e senza più l'adrenalina ad alimentare il mio corpo riuscivo davvero a sentire il dolore. Le fasciature...

CSS

body {
    width: 600px;
    margin: auto;
}

.simpleScreenplay {
    font-family: 'monospace';
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width:80%;
}

.letter {
    font-style: italic;
    margin-left: 0.3in;
    margin-right: 0.3in;
}

.letter em {
    font-style: normal;
}

.diary {
    font-style: italic;
}

.diary em {
    font-style: normal;
}

.radio {
    font-style: italic;
}

.radio em {
    font-style: normal;
}

.terminal {
    font-family: 'monospace';
    margin-left: 0.3in;
    margin-right: 0.3in;
}

.center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.song {
    font-style: italic;
    position: relative;
}

.songnote {
    position: absolute;
    top: 0px;
    left: -20px;
    width: 1px;
}

.memoryOrbOpen {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.memoryOrbClose {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.songnote:after {
    content:"\266A";
}

.scene {
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.scene:after {
    content:"* * *"
}

.levelup {
    font-size: 80%;
}

.levelUp {
    font-size: 80%;
}

h1 {
    text-align: center;
}

h2 {
    text-align: center;
    font-size: 100%;
    font-style: italic;
}