JSFiddle - React, Tailwind, and code Playground

HTML

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

        <ul class="vermelho">               
            <li class="eventos">
                <a href="@Href("~/AreaLogada/DetalheEvento")">
                    <span class="label dia">9</span>
                    <div id="detalhes">
                        <img id="foto" style="margin-top:10px;height:70px;" src="http://s19.postimage.org/g5ifowwdb/foto.png">
                        <div id="nome">Inauguração do Banco do Nordeste</div>
                        <div id="empresa">Banco do Nordeste</div>
                        <div id="data">19 de janeiro de 2011 - Rio de Janeiro, RJ</div>
                    </div>
                    <span class="arrow"></span>
                </a>
            </li>
            <li class="eventos">
                <a href="@Href("~/AreaLogada/DetalheEvento")">
                    <span class="label dia">13</span>
                    <span class="label nome">Name <br>of <br>second <br>event <br>i<br>am<br>very<br>long</span>
                    <span class="arrow"></span>
                </a>
            </li>            
        </ul>                        

</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 ul.vermelho {
    display: table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 5px;
    border: 1px solid blue;
}
#ListaEventosPorMes ul.vermelho li {
    display: table-row-group;
    position: relative;
}

#detalhes{
   display: table; 
    background-color: #722827;    
    outline: solid black 1px;
    position: relative;
}
    #data{
        display: table-row;
    }

#foto{
    float: left;
}

#ListaEventosPorMes ul.vermelho li div,
#ListaEventosPorMes ul.vermelho li a {
    display: table-row;
}
#ListaEventosPorMes ul.vermelho li   span {
    display: table-cell;
    height: 74px;    
}

#ListaEventosPorMes li,
#ListaEventosPorMes li a,
#ListaEventosPorMes li span {
    -webkit-border-radius: 10px 10px 10px 10px;
       -moz-border-radius: 10px 10px 10px 10px;
            border-radius: 10px 10px 10px 10px;
    behavior: url(/Themes/Default/Scripts/PIE.htc);
}

#ListaEventosPorMes li .eventos {
    margin: 0 0 8px 0;
}

#ListaEventosPorMes li a {
    text-decoration: none;
}
#ListaEventosPorMes li .label {
    font-weight: bold;
    text-decoration: none;
    color: white;
}

#ListaEventosPorMes #mes {

}

#ListaEventosPorMes .arrow {
    height: 74px;
    width: 50px;
}

#ListaEventosPorMes .vazio {
    height: 40px;
    width:  50px;
}
#ListaEventosPorMes .dia {
    width:  40px;
    vertical-align: middle;
}

#ListaEventosPorMes .arrow {
    background: url("/Content/SetaBrancoh40.png") no-repeat center center;
}

#ListaEventosPorMes .vermelho .label {
    background-color: #722827;
}
#ListaEventosPorMes .vermelho .arrow,
#ListaEventosPorMes .vermelho...