JSFiddle - React, Tailwind, and code Playground

by Boban Stojanovski

HTML

<div class="scores-container">
  <!-- Filter bar -->
  <div class="filter-bar">
    <div class="filter-button">ALL</div>
    <div class="filter-button">LIVE</div>
    <div class="filter-button">ODDS</div>
    <div class="filter-button active">FINISHED</div>
    <div class="filter-button">SCHEDULED</div>
  </div>
  
  <!-- League Section -->
  <div class="league-header">
    <div class="league-title">
      <span class="country-flag">🇺🇸</span>
      <div class="league-name">USA: NBA</div>
    </div>
    <div class="standings-button">Standings ▼</div>
  </div>
  
  <!-- Match Rows - Vertical Stacked Layout -->
  <div class="match-row finished">
    <div class="star-icon">☆</div>
    <div class="match-info">
      <div class="match-status">Finished</div>
      <div class="team-container">
        <div class="team-logo home-logo">🏀</div>
        <div class="team-name home-team">Detroit Pistons</div>
        <div class="team-logo away-logo">🏀</div>
        <div class="team-name away-team">Washington Wizards</div>
      </div>
    </div>
    <div class="score-column">
      <div class="score-container">
        <div class="home-score">125</div>
        <div class="away-score">129</div>
      </div>
    </div>
    <div class="period1">31<br>31</div>
    <div class="period2">31<br>38</div>
    <div class="period3">39<br>27</div>
    <div class="period4">24<br>33</div>
  </div>
  
  <div class="match-row finished">
    <div class="star-icon">☆</div>
    <div class="match-info">
      <div class="match-status">Finished</div>
      <div class="team-container">
        <div class="team-logo home-logo">🏀</div>
        <div class="team-name home-team">Milwaukee Bucks</div>
        <div class="team-logo away-logo">🏀</div>
        <div class="team-name away-team">Los Angeles Lakers</div>
      </div>
    </div>
    <div class="score-column">
      <div class="score-container">
        <div class="home-score">126</div>
        <div class="away-score">106</div>
      </div>
   ...

CSS

/* Main container for the scores grid */
.scores-container {
  max-width: 1200px;
  margin: 0 auto;
  font-family: 'Arial', sans-serif;
  background-color: #0a1625;
  color: white;
}

/* League header styles */
.league-header {
  background-color: #15396a;
  color: white;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  margin-bottom: 1px;
  justify-content: space-between;
}

.league-flag {
  width: 20px;
  height: 14px;
  margin-right: 8px;
}

.league-title {
  display: flex;
  align-items: center;
}

.league-name {
  font-weight: bold;
  font-size: 14px;
}

.standings-button {
  font-size: 12px;
  display: flex;
  align-items: center;
}

/* Match row styles - vertical layout */
.match-row {
  display: grid;
  grid-template-columns: 30px auto 80px repeat(4, 40px);
  background-color: #0f2136;
  border-bottom: 1px solid #1a324d;
  padding: 12px 0;
  font-size: 13px;
  align-items: center;
}

.match-row:hover {
  background-color: #183050;
}

.star-icon {
  grid-column: 1;
  text-align: center;
  color: #555;
  font-size: 16px;
}

.star-icon:hover {
  color: #ffcc00;
}

.match-info {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  padding: 0 10px;
}

.match-status {
  color: #8e9eb0;
  font-size: 12px;
  margin-bottom: 5px;
}

.team-container {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: repeat(2, auto);
  gap: 8px 10px;
  align-items: center;
}

.team-logo {
  grid-column: 1;
  width: 20px;
  height: 20px;
}

.home-logo {
  grid-row: 1;
}

.away-logo {
  grid-row: 2;
}

.team-name {
  grid-column: 2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-team {
  grid-row: 1;
  font-weight: 500;
}

.away-team {
  grid-row: 2;
  font-weight: 500;
}

.score-column {
  grid-column: 3;
  font-weight: bold;
  font-size: 15px;
  text-align: center;
}

.score-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.home-score {
  font-weight:...