JSFiddle - React, Tailwind, and code Playground

by otinanaipali

HTML

<div class="content">
    <div class="row">
        <div class="img">
            <img src="//beta.akazoo.com/MusicStore/images/4/Release/75/6001411.jpg" />
        </div>
        <div class="info">
            <p class="track">Lorem Ipsum Dolor Sit</p>
            <p class="artist">Test Artist</p>
        </div>
        <div class="time">
            <p>4:46</p>
        </div>
        <div class="action">
            <a href="#" class="icon icon-context"></a>
        </div>
    </div>
    
</div>

CSS

body,
html {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-family: Arial;
    line-height: 1;
}

p {
    margin: 0;
    padding: 0
}

.content {
    background: #373737;
    max-width: 640px;
    margin: 0 auto;
	padding: 50px 0;
}

.row {
    background: #4b4b4b;
    position: relative;
    display: table;
	table-layout: fixed;
	margin: 0 3.125% 2px;
}

.row > div {
    display: table-cell;
    vertical-align: middle;
}

.img {
    line-height: 0;
    width: 12.33333333%;
	min-width: 52px;
	max-width: 74px;
}

img {
    width: 100%;
    height: auto;
}

.info {
    font-size: 1em;
    line-height: 1.125em;
    white-space: nowrap;
    padding-left: 3.125%;
	width: 75.6667%;
	box-sizing: border-box;
}

.track,
.artist {
    color: #fff;
    margin-bottom: 4px;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-top: -1px;
}

.artist {
    margin: 0 0 -3px;
    color: #989898;
}

.time,
.action {
    font-size: 14px;
    color: #989898;
    width: 6%;
    text-align: center;
}

.action {
    font-size: .938em;
}

.action a {
    color: #989898;
    text-decoration: none;
    font-size: 200%;
}

@font-face {
    font-family: 'icomoon';
    src:...