JSFiddle - React, Tailwind, and code Playground

by anmol sandal

HTML

<div class="score-card">

  <span class="left">
    <span class="team"> Arsenal </span>
    <span class="score"> 2 </span>
  </span>

  <span class="right">  
    <span class="score"> 0 </span>
    <span class="team"> Southampton </span>
  </span>

</div>

<div class="score-card">

  <span class="left">
    <span class="team"> Arsenal </span>
    <span class="score"> 2 </span>
  </span>

  <span class="right">  
    <span class="score"> 0 </span>
    <span class="team"> Southampton </span>
  </span>

</div>

<div class="score-card">

  <span class="left">
    <span class="team"> Manchester united </span>
    <span class="score"> 2 </span>
  </span>

  <span class="right">  
    <span class="score"> 0 </span>
    <span class="team"> Southampton </span>
  </span>

</div>

CSS

.score-card {
  margin:5px;
  padding:10px;
  text-align:center;
  font-size: 20px;
  border-bottom:1px solid #eee; 
}

.left {
  text-align: right;
  margin: 5px;
}

.right {
  text-align: left;
  margin: 5px;
}

.team {
  margin: 5px;
}

.score {
  padding: 5px;
  background: #ffd536;
}