JSFiddle - React, Tailwind, and code Playground

HTML

<div class='round'><div class='match' round='1' num='1' winner_side='true' style='padding-top:0px; padding-bottom:0px'>
                          <div class='player_1'>
                              <div class='player'></div>
                              <div class='score'></div>
                          </div>
                          <div class='player_2'>
                              <div class='player'></div>
                              <div class='score'></div>
                          </div>
                      </div><div class='match' round='1' num='2' winner_side='true' style='padding-top:40px; padding-bottom:0px'>
                          <div class='player_1'>
                              <div class='player'></div>
                              <div class='score'></div>
                          </div>
                          <div class='player_2'>
                              <div class='player'></div>
                              <div class='score'></div>
                          </div>
                      </div><div class='match' round='1' num='3' winner_side='true' style='padding-top:40px; padding-bottom:0px'>
                          <div class='player_1'>
                              <div class='player'></div>
                              <div class='score'></div>
                          </div>
                          <div class='player_2'>
                              <div class='player'></div>
                              <div class='score'></div>
                          </div>
                      </div><div class='match' round='1' num='4' winner_side='true' style='padding-top:40px; padding-bottom:0px'>
                          <div class='player_1'>
                              <div class='player'></div>
                              <div class='score'></div>
                          </div>
                          <div class='player_2'>
                              <div class='player'></div>
                ...

CSS

.round {
    float: left;    
}

.match {
    margin: 0px 50px 40px 0px;
    overflow:auto;
}

.player_1 div {
    float: left;
}

.player_2 div {
    float: left;
}

.player {
    width: 160px;
    height: 20px;
    background: rgb(210,210,210);
    border: 2px solid red;
}

.score {
    width: 20px;
    height: 20px;
    background: rgb(210,210,210);
    border-top: 2px solid red;
    border-right: 2px solid red;
    border-bottom: 2px solid red;
    text-align: center;
}

.round .match:first-child {
    margin-top: 40px;
}

.player_1 .player {
    background: rgb(240,240,240);
    border-bottom-width: 0px;
}

.player_1 .score {
    background: rgb(240,240,240);
    border-bottom-width: 0px;
}

.loser {
    color: rgba(0,0,0,0.5);
}

JavaScript

var format = "Single Elimination";
        var players = [{"id":"1","name":"Etan Mizrahi"},{"id":"2","name":"David Rau"},{"id":"13","name":"David Richardson"},{"id":"20","name":"Glenn Umemoto"},{"id":"23","name":"Robert Farwell"},{"id":"29","name":"David Espinoza"},{"id":"31","name":"Kenny Ash"},{"id":"36","name":"Ron Ramirez"},{"id":"49","name":"Fernando Perez"},{"id":"52","name":"Andrew DiDomenico"},{"id":"57","name":"Mark Davidson"},{"id":"64","name":"Senai Tesfay"},{"id":"70","name":"Sam Paniccia Jr"},{"id":"71","name":"Jaynard Orque"},{"id":"74","name":"Daiby Fuentes"},{"id":"97","name":"Dan Ramirez"}];
        var match_data =...