JSFiddle - React, Tailwind, and code Playground

HTML

<div class="QuadroPrincipal">
    <h1 class="Titulo">Selecione o evento desejado para obter mais detalhes:</h1>
<div id="ListaEventosPorMes">  
    <ul>  
        <li>
            <div class="mes">janeiro</div>
            <div class="vazio">&nbsp;</div>
        </li>
    </ul>
    <ul>    

            <li class="evento">
                    <div class="dia"><a href="@Href("~/AreaLogada/Evento/")">23</a></div>
                    <div class="detalhes">
                        <img class="foto" src="http://s19.postimage.org/g5ifowwdb/foto.png" alt="" width="169" height="63" />
                        <div class="nome">Titulo do evento</div>
                        <div class="data">23</div>
                        <div class="cidade">London</div>
                    </div>
                    <div class="seta"></div>
            </li>                     

    </ul>        
</div>
</div>

CSS

/* Area logada - Estilos comuns
----------------------------------------------------------*/      
h1.Titulo{
    color: #979797;
}

div.QuadroPrincipal{
    margin: auto;
    width: 90%;
    text-align: center;
    font-family: sans-serif;
    position: relative;
}

/* Area logada - Eventos por mês
----------------------------------------------------------*/  
#ListaEventosPorMes{
    color: white;
}
        #ListaEventosPorMes a{
            display: block;
            width: 100%;
            height: 100%;
            color: White;
        }
#ListaEventosPorMes ul {
    display: table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 5px;
}
    #ListaEventosPorMes li {
        display: table-row;
        position: relative;
    }    
        #ListaEventosPorMes .vazio {
            height: 40px;
            width:  35px;
            display: table-cell;
            background-color: #A9462F;
        }
        #ListaEventosPorMes .mes{
            font-weight: bold;
            font-size: 1.3em;
            text-align: left;
            padding: 10px;
            vertical-align: middle;
            display: table-cell;
            background-color: #722827;                
        }
        #ListaEventosPorMes .mes:first-letter{
            text-transform: uppercase;
        }
        #ListaEventosPorMes .dia {
            width:  50px;
            font-size: 2em;
            vertical-align: middle;
            font-weight: bold;
            display: table-cell;
            background-color: #722827;
        }
        #ListaEventosPorMes .detalhes{
            display: block; 
            background-color: #722827;          
            text-align: left;
            padding: 10px;
        }
            #ListaEventosPorMes .detalhes .nome{
                font-size: 1.3em;
            }
        #ListaEventosPorMes .detalhes:hover{
            background-color: rgba(114,40,39,0.8);
        }
            #ListaEventosPorMes .foto{
              ...