JSFiddle - React, Tailwind, and code Playground

by Dejan Munjiza

HTML

<div class="cs-top-list">
  <div class="cs-half">
    <div class="top-ten toplist">
      <div class="tt-option toplist-single">
        <div class="tt-rank">1</div>
        <div class="tt-title">
          <div class="tt-artist">
            Metallica
          </div>
          <div class="tt-song">
            For whom the bell tolls
          </div>
        </div>
        <div class="tt-update up"></div>
        <div class="tt-vote">
          <div class="score">5,442</div>
          <a href="#" class="vote-up">+</a>
        </div>
        <div class="tt-update same"></div>
      </div>
      <div class="tt-option toplist-single">
        <div class="tt-rank">2</div>
        <div class="tt-title">
          <div class="tt-artist">
            Disturbed
          </div>
          <div class="tt-song">
            Liberate
          </div>
        </div>
        <div class="tt-update up"></div>
      </div>
      <div class="tt-option toplist-single">
        <div class="tt-rank">3</div>
        <div class="tt-title">
          <div class="tt-artist">
            Tenacious D
          </div>
          <div class="tt-song">
            Senorita
          </div>
        </div>
        <div class="tt-update up"></div>
      </div>
      <div class="tt-option toplist-single">
        <div class="tt-rank">4</div>
        <div class="tt-title">
          <div class="tt-artist">
            Iron Maiden
          </div>
          <div class="tt-song">
            The Trooper
          </div>
        </div>
        <div class="tt-update same"></div>
      </div>
      <div class="tt-option toplist-single">
        <div class="tt-rank">5</div>
        <div class="tt-title">
          <div class="tt-artist">
            Helloween
          </div>
          <div class="tt-song">
            If I Could Fly
          </div>
        </div>
        <div class="tt-update same"></div>
      </div>
      <div class="tt-option toplist-single">
        <div class="tt-rank">6</div>
 ...

SCSS

/*
Theme Name: Loud Child
Theme URI: http://demos.wolfthemes.com/loud/landing/
Description: Loud Child theme
Author: WolfThemes
Author URI: https://wolfthemes.com
Template: loud
Version: 1.6.2
*/

* {
  font-family: Arial !important;
}

body, html {
  background: black;
}
.title-font {
    font-family: “Permanent Marker” !important;
}

.voting-chart__row {
    clear: both;
}

.voting-chart__col {
    float: left;
}

.r-row {
    width: 100%;
    float: left;
    display: flex;
    flex-direction: row;
    justify-content: top;
    align-items: flex-start;
    flex-wrap: nowrap;
}
.r-row .r-homepage {
    flex-direction: column !important;
}
.r-column {
    width: 14.25%;
    display: flex;
    flex-direction: column;
    justify-content: top;
    align-items: flex-start;
}
.r-homepage .r-column {
    width: 100% !important;
}
.r-column:nth-child(odd) {
    background: #f7f7f7;
}
.r-column > div {
    width: 100%;
    float: left;
    box-sizing: border-box;
    padding: 10px 5px;
}

.r-column .r-day {
    background: #f7f7f7;
    text-transform: uppercase;
    /* font-family: "Kalam", Sans-serif; */
    font-weight: 700;
    font-size: 17px;
}

.r-column .r-show {
    border-bottom: 1px solid #e1e1e1;
    cursor: pointer;
    transition: .2s all ease-in;
    font-size: 15px;
    line-height: 1.5em;
}

.r-column .r-show:hover {
    background: rgba(0,0,0,.44) !important;
}

.r-column .r-show a {
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
}

.r-column .r-show a span {
    float: left;
    background: rgba(0,0,0,.44);
    box-sizing: border-box;
    padding: 9px 4px;
    margin-right: 10px;
    border-radius: 3px;
    color: white;
}


/* Top 10 */
.cs-top-list {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    background: rgba(0, 0, 0, 0.5294117647058824);
    padding: 20px;
}

.cs-half {
    width: 50%;
    float: left;
}

.top-ten {
    width: 100%;
   ...