JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml"> 
     <head> 
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Ejercicio de selectores</title>
        <style>
        h1 {
            color: #008484;
            font-size: 28px;
        }
        h2 {
            color: #0000FF;
            font-size: 20px;
        }
        strong {
            color: #FF0000;
        }
        .destacado {
            color: #FFA500;
        }
        p a:link {
            color: #FF0000;
        }
        p a:link em {
            color: #0000FF;
        }
        .especial {
            color: #940084;            
        }
        table caption {
            color:  #0000FF;
        }
        
        table .especial {
            color: #FFA500;
        } 
        table tr {
            color: #4A8400;
        }
        table th {
            color: #FF0000;
        }
        table strong {
            color: #FFA500;
        }
        
        #adicional p {
            color: #948400;
        }

        #especial {
            color: #FF00FF;
        }
        
        #adicional a:link {
            color: #008400;
        }
        </style>
    </head>   
    
    <body> 
        <h1 id="titulo">Lorem ipsum dolor sit amet</h1>
           <p>Nulla pretium. Sed tempus nunc vitae neque. <strong>Suspendisse gravida</strong>, metus a scelerisque sollicitudin, lacus velit  ultricies nisl, nonummy tempus neque diam quis felis. <span class="destacado">Etiam sagittis tortor</span> sed arcu sagittis tristique.</p> 
        <h2 id="subtitulo">Aliquam tincidunt, sem eget volutpat porta</h2> 
            <p>Vivamus velit dui, placerat vel, feugiat in, ornare et, urna. <a href="#">Aenean turpis metus, <em>aliquam non</em>, tristique in</a>, pretium varius, sapien. Proin vitae nisi. Suspendisse <span...