JSFiddle - React, Tailwind, and code Playground

by ededev

HTML

<div id="conteudoAlbum">
        <img src="https://upload.wikimedia.org/wikipedia/en/8/89/In_the_Zone.png" />
        
        <span id="TituloAlbum">In The Zone</span>
        
        <a id="faixa" href="#">
            <span id="numeroFaixa">1</span>
            <div id="iconnum"><img src="https://i.ytimg.com/vi/LOZuxwVk7TU/maxresdefault.jpg" height="85px" /></div>
            <span id="nomeFaixa">Toxic</span>
        </a>
        <a id="faixa" href="#">
            <span id="numeroFaixa">1</span>
            <div id="iconnum"><img src="https://i.ytimg.com/vi/LOZuxwVk7TU/maxresdefault.jpg" height="85px" /></div>
            <span id="nomeFaixa">Toxic</span>
        </a>
    </div>
    
    <div id="conteudoAlbum">
        <img src="https://upload.wikimedia.org/wikipedia/pt/9/92/Britney_Circus_Album.png" />
        
        <span id="TituloAlbum">Circus</span>
        
        <a id="faixa" href="#">
            <span id="numeroFaixa">1</span>
            <div id="iconnum"><img src="https://i.ytimg.com/vi/lVhJ_A8XUgc/maxresdefault.jpg" height="85px" /></div>
            <span id="nomeFaixa">Circus</span>
        </a>
        
    </div>

CSS

#conteudoAlbum{
    position: relative;
    background: white;
    width: 300px;
    height: auto;
    margin-top: 30px;
    margin-right: 40px;
    display: inline-block;
    -webkit-box-shadow: 9px 10px 49px -18px rgba(0,0,0,0.75);
    -moz-box-shadow: 9px 10px 49px -18px rgba(0,0,0,0.75);
    box-shadow: 9px 10px 49px -18px rgba(0,0,0,0.75);
}
#TituloAlbum{
    position: relative;
    font-family: Arial;
    font-size: 1.4em;
    color: black;
    display: block;
    padding-left: 20px;
    padding-top: 5px;
    padding-bottom: 15px;
}
#faixa{
    position: relative;
    display: block;
    height: 85px;
    width: 100%;
    line-height: 85px;
    background-color: rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}
#faixa:hover{
    background-color: rgba(0, 0, 0, 0.1);
}
#numeroFaixa{
    position: absolute;
    display: block;
    padding-left: 10px;
    padding-right: 10px;
    font-family: Arial;
    font-size: 1.4em;
    color: #45C0CF;
    display: inline-block;
}
#iconnum{
    position: relative;
    left: 33px;
    display: inline-block;
    max-height: 85px;
}
#iconnum img{
    display: inline-block;
    max-height: 85px;
}
#nomeFaixa{
    position: absolute;
    display: block;
    left: 200px;
    font-family: Arial;
    font-size: 1.4em;
    color: black;
    display: inline-block;
}