HTML, CSS and JavaScript playground

<style>

@font-face {
font-family: handy;
src: url(https://dl.dropbox.com/s/ga9hf4idu3egjb5/handy00.ttf);
}

img:hover {
cursor:help;
}

#musicplayer{
display:grid;
grid-template-columns:20px auto;
align-items:center;
width: 20em;
font-family: handy;
font-size: 15px;
color:#FF78BC;
line-height:140%;
border: 1px solid #FFB3DE;
border-radius: 3px;
background:white;

}

#musictitle{
font-family: arial;
overflow: hidden;
white-space: nowrap;
display:inline-block;
width: calc(100% - 10px - 1px);
margin-left: calc(10px + 1px);
}

#musicpixel{
width: 1.4em;
padding: 5px;
position:relative;
min-height: 15px;
background:white;
border-right: 1px solid #FFB3DE;
}

.overlay {
opacity:0;
position:absolute;
top:0;
left:0;
text-align:center;
width:100%;
height:100%;
transition:0.3s ease;

background: pink;
}

#musicplayer:hover .overlay {
opacity: 1;
transition:0.3s ease;
}

.playpause{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-40%, -50%);
}

.playpause:hover{
cursor:help;
}

#musicpixel img{
display:block;
}

.marquee{
display: inline-block;
padding-left: 100%;
animation: marquee 10s linear infinite;
}

@keyframes marquee{
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
}

</style>

<div id='musicplayer'>
<div id='musicpixel'>
<img src='https://tomomi.neocities.org/pixeles/187.gif'>
<div class='overlay'>
<div class='playpause'><i class="fas fa-play"></i></div>
</div>
</div>
<div id='musictitle'>
<span class='marquee'>visa wisa testingggggg teehee </span>
</div>
</div>

Check out our Python playground!