JSFiddle - React, Tailwind, and code Playground

by Blanca B

HTML

<table>
    <tr>
        <th>Taller</th>    
        <th>Fecha</th>
        <th>Hora</th>
        <th>Estado</th>
    </tr>
    
    <tr class="impares">
        <td class="primera-fila">Diseña tu blog</td>    
        <td>Viernes 1 de enero</td>
        <td>16:30 - 20:30 h</td>
        <td>Plazas disponibles</td>
    </tr>
    
    <tr class="pares">
        <td class="primera-fila">HTML & CSS</td>      
        <td>Sábado 2 de enero</td>
        <td>10:00 - 14:00 h  </td>
        <td>Queda una plaza</td>
    </tr>
    
    <tr class="impares">
        <td class="primera-fila">Gana dinero</td>          
        <td>Sábado 2 de enero</td>
        <td> 16:00 - 20:00 h </td>
        <td>Últimas plazas</td>
    </tr>
        
    <tr class="pares">
        <td class="primera-fila">Promociona tu blog</td>           
        <td>Domingo 3 de enero</td>
        <td>10:00 - 14:00 h</td>
        <td>Plazas disponibles</td>
    </tr>
    
</table>

CSS

body {
  font-family: "Open Sans";
  font-size: 14px;
  color: #787878;
}

table, th, td {
  border: 1px solid white;
  border-collapse: collapse;  
}

table {
  width: 95%;
}

th {
  height: 30px;
  background-color: #FCB0B1;
  color: white;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
}

td {
  padding: 6px;
  text-align: center;
}

.impares {
  background-color: #FED3C8;
}

.pares {
  background-color: #FFF2E9;
}

.primera-fila {
  color: #F5A0A4;
  font-weight: bold;
  text-align: left;
  padding-left: 10px;  
}