JSFiddle - React, Tailwind, and code Playground

by Hashem Qolami

HTML

<body>	
<div class="nav">
		<div class="logo">artistLog</div>
	</div>
<div class="topbar">This is the top search/login bar</div>
<div class="content">
    <div class="card">
        <img class="cover" src="img/cover.png" />
    </div>
    <div class="card">Description</div>
    <div class="card">Description</div>
</div>
</body>

CSS

html, body {
    background: #343434;
    margin:0px;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.nav {
    background: #565656;
    color: #b4b4b4;
    margin-right:0px;
    bottom: 0;
    left: 0;
    position: absolute;
    top: 0;
    border-right:7px solid #2b2b2b;
    width: 86px;
}
.nav .logo {
    background:#353535;
    height:60px;
    cursor:pointer;
    border-bottom:1px solid #353535;
}
.topbar {
    background: #1d1d1d;
    border-bottom: 1px solid #8d8d8d;
    height: 60px;
    left: 86px;
    position: absolute;
    right: 0;
    top: 0;
}
.content {
    bottom: 0;
    left: 120px;
    overflow: auto;
    position: absolute;
    right: 0;
    top: 62px;
    padding: 50px 25px 25px 20px;
}
.content .card {
    background: #101010;
    color:#a4a4a4;
    width:250px;
    height:320px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    margin-right:10px;
    margin-bottom: 15px;
    float: left;
}
.content .card .cover {
    max-width:250px;
    max-height:140px;
    background: transparent;
    float:left;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}