JSFiddle - React, Tailwind, and code Playground

by ric47121

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Torneo de Padel</h2>
  <p>Todos contra todos</p>
  
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Pista 1</h4>
      <!--p class="card-text">Juan - Pepe vs Toto - Manolo</p-->
      <div class="row">
        <div class="col">
          Juan <br>
          pepe
        </div>
        <div class="col text-center">
        <b>vs</b> <br>
          <input type="number" class="puntaje" id="" placeholder="00" >
          <input type="number" class="puntaje" id="" placeholder="00" >
          
        </div>
        <div class="col text-end">
          toto <br>
          manolo
        </div>
      </div>
      
    </div>
  </div>

</div>

</body>
</html>

CSS

.puntaje{
  color: #fff;
  width: 50px;
  background-color: #000;
  font-weight: bold;
}