JSFiddle - React, Tailwind, and code Playground

by PuckinZebra

HTML

<!DOCTYPE html>
<html>
  <head>
    <link href="./resources/css/index.css" type="text/css" rel="stylesheet">
    <title>Learning Code</title>
  </head>
  <body>
    <h1>Friends Golf Weekend, Round 1</h1>
     <!-- Editable table -->
<div class="card">
  <h3 class="card-header text-center font-weight-bold text-uppercase py-4">Editable table</h3>
  <div class="card-body">
    <div id="table" class="table-editable">
      <span class="table-add float-right mb-3 mr-2"><a href="#!" class="text-success"><i
            class="fas fa-plus fa-2x" aria-hidden="true"></i></a></span>
      <table class="table table-bordered table-responsive-md table-striped text-center">
        <thead>
          <tr>
            <th class="text-center">Player</th>
            <th class="text-center">Hole 1</th>
            <th class="text-center">Hole 2</th>
            <th class="text-center">Hole 3</th>
            <th class="text-center">Hole 4</th>
            <th class="text-center">Hole 5</th>
            <th class="text-center">Hole 6</th>
            <th class="text-center">Hole 7</th>
            <th class="text-center">Hole 8</th>
            <th class="text-center">Hole 9</th>
            <th class="text-center">Out</th>
            
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="pt-3-half" contenteditable="Flase">John Smith</td>
            <td class="pt-3-half text-center" contenteditable="true">-</td>
            <td class="pt-3-half text-center" contenteditable="true">-</td>
            <td class="pt-3-half text-center" contenteditable="true">-</td>
            <td class="pt-3-half text-center" contenteditable="true">-</td>
            <td class="pt-3-half text-center" contenteditable="true">-</td>
            <td class="pt-3-half text-center" contenteditable="true">-</td>
            <td class="pt-3-half text-center" contenteditable="true">-</td>
            <td class="pt-3-half text-center" contenteditable="true">-</td>
           ...

CSS

* {
    font-family: Helvetica, Arial, sans-serif;
  }
   
   
  h1 {
    color: rgb(70, 187, 121);
  }
   
   
  p, 
  li {
    font-size: 18px;
  }
   
   
  a {
    text-decoration: none;
  }
  .pt-3-half {
    padding-top: 1.4rem;
    text-align: left;
    }
.pt-3-half, .text-center{
    text-align: center;
}