JSFiddle - React, Tailwind, and code Playground

by rcuzcano

HTML

<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" cellspacing ="0" cellpading="0">
<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, vehicula vulputate</span>, venenatis in, 
posuere id, lorem. Etiam sagittis, tellus in ultrices accumsan, diam nisi feugiat ante, eu congue magna mi non nisl.</p>
 
<p>Vivamus ultrices aliquet augue. <a...

CSS

h1, tbody > tr > td {
    color: #62D9D1;    
}

tbody > tr >th, tfoot > tr > td {
    color: #FFFC52;
    
}

table td, table th {
    border: 1px solid #000;
    padding: 3px 5px;
}

strong {    
    color: #FC0000;
}

#subtitulo, caption, em {
    color: #3D68F5;    
}

#adicional {
    color: #F5CA3D;
}

p > a, tfoot > tr, tr > th {
    color: #FC0000;;
}

p > span {
    color: #FFFC52;
}

#especial {
    color: #FF52FF;
}