JSFiddle - React, Tailwind, and code Playground

by Natan Tavares Martins

HTML

<div id=maisAssistido>
            <img class=coverMais src='http://img.cache.vevo.com/Content/VevoImages/video/2d1961b695668084192b339abe343231201625523629713.png'/>
            
            <div class=descricao>
            <div id=areaVideo></div>
                    
                    <p id=linkArtista>Britney Spears</p>
                    <p id=tetehov>Britney Spears - Megamix (2016 Billboard Music Awards Performance)</p>
                </div>
            
           
        </div>
        
        <div id=maisAssistido>
            <img class=coverMais src='https://i.ytimg.com/vi/VBmMU_iwe6U/maxresdefault.jpg'/>
            
            <div class=descricao>
            <div id=areaVideo></div>
                    
                    <p id=linkArtista>Beyonce</p>
                    <p id=tetehov>Beyonce - Run the World (Girls)</p>
                </div>
            
           
        </div>

CSS

* {
    margin: 0px;
    padding: 0px;
}

#maisAssistido{
    display: inline-block;
    width: 220px;
    height: auto;
}
img.coverMais{
    width: 220px;
    height: 124px;
    
}
#areaVideo{
    height: 85px;
    cursor: pointer;
}
#linkMaisAssistidos{
    position: relative;
    font-family: arial;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95em;  
    color: white;
    left: 3px;
}
#linkMaisAssistidos:hover {
    text-decoration: underline;
}
#tetehov{
    position: relative;
    font-family: arial;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95em;  
    color: white;
    left: 3px;
    top: -15px;
    
    
  
  line-height: 13px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: max-height 1s, top 1s, opacity 0.5s;
  line-height: 18px;
  max-height: 18px;
  
}
#tetehov:hover{
  opacity: 1;
  white-space: normal;
  max-height: 60px;
text-decoration: underline;
cursor: pointer;
}
#linkArtista{
    position: relative;
    color: #aaaaaa;
    font-family: arial;
    text-decoration: none;
    font-size: 0.8em;
    left: 3px;
    top: 18px;
}
#linkArtista:hover{
    text-decoration: underline;
    cursor: pointer;
}

.descricao{                         /* AREA DE HOVER DO ESPAÇO PARA COVER'S DAS DIV'S ULTIMOS E MAIS VISTOS INDEX ADMIN */    
    position: relative;
    float: left;
    margin-top: -127px;
    left: 0px;
    width: 220px;
    height: 124px;
    display: none;
    background: rgba(255,255,255,0);
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(100%, rgba(0,0,0,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%);
   ...