JSFiddle - React, Tailwind, and code Playground

by gual

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> </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 class="especial">porttitor purus ac elit</span>. Suspendisse eleifend odio at dui. In in elit sed metus pretium elementum.</p>   <table summary="Descripción de la tabla y su contenido"> <caption>Título de la tabla</caption> <thead> <tr> <th scope="col"></th> <th scope="col" class="especial">Título columna 1</th> <th scope="col" class="especial">Título columna 2</th> </tr> </thead>   <tfoot> <tr> <th scope="col"></th> <th scope="col">Título columna 1</th> <th scope="col">Título columna 2</th> </tr> </tfoot>   <tbody> <tr> <th scope="row" class="especial">Título fila 1</th> <td>Donec purus ipsum</td> <td>Curabitur <em>blandit</em></td> </tr> <tr> <th scope="row">Título fila 2</th> <td>Donec <strong>purus ipsum</strong></td> <td>Curabitur blandit</td> </tr> </tbody> </table>   <div id="adicional"> <p>Donec purus ipsum, posuere id, venenatis at, <span>placerat ac, lorem</span>. Curabitur blandit, eros sed gravida aliquet, risus justo  porta lorem, ut mollis lectus tortor in orci. Pellentesque nec augue.</p>   <p>Fusce nec felis eu diam pretium adipiscing. <span id="especial">Nunc elit elit,...

CSS

p span#especial{
color:#D94EBD;
}

td>em{
font-style:italic;
}

table, th, td {
padding:6px;
border:1px solid black;
}

[scope=col]{
color:red;
font-weight:bold;
}

[scope=row]{
color:red;
font-weight:bold;
}

table .especial, td>strong{
color:orange;
font-weight:bold;
}

#titulo {
color:#2A98BD;
font-weight:bold;
font-size:30px;
}

strong {
color:red;
font-weight:bold;
}

.destacado {
color:orange;
}

#subtitulo{
color:blue;
font-size:25px;
    font-weight:bold;
}

div p a, td {
color:green;
}

p>a {
color:red;
}

p a em{
color:blue;
}

span.especial{
color:purple;
}

table>caption{
color:blue;
text-align:center;
}