JSFiddle - React, Tailwind, and code Playground

HTML

<title>Rock, Paper, Scissors - CodePen</title>
<body>
     <h1>Rock, Paper, or Scissors?</h1>

    <p>A steam-powered bot has challenged you to a game. <strong>Rock</strong> beats <strong>scissors</strong>, <strong>scissors</strong> beats <strong>paper</strong>, and <strong>paper</strong> beats <strong>rock</strong>.</p>
    <div class="scoreboard">
         <h2>Scoreboard</h2>

        <table>
            <tbody>
                <tr>
                    <td id="humanScore">0</td>
                    <td id="computerScore">0</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th>You</th>
                    <th>Bot</th>
                </tr>
            </tfoot>
        </table>
    </div>
    
<h2>Choose Wisely</h2>

    <button id="rock">Rock</button>
    <button id="paper">Paper</button>
    <button id="scissors">Scissors</button>
    <div id="status"></div>
    <script src="js/main.js"></script>

CSS

body {
    font-family: monospace;
    font-size: 20px;
    text-align: center;
    background: black;
    color: lime;
    margin: 3em;
}
strong {
    text-decoration: underline;
}
button {
    background: lime;
    color: black;
    border: none;
    padding: 10px 15px;
    font-size: 1.2em;
    font-family: monospace;
    font-weight: bold;
}
button:active {
    background: green;
}
.scoreboard {
    width: 14em;
    margin: auto;
    border: 1px solid lime;
}
.scoreboard h2 {
    border-bottom: 1px solid lime;
    margin: 0;
    padding: 10px;
}
.scoreboard table {
    margin: 10px auto;
    width: 100%;
    border-collapse: collapse;
}
.scoreboard th, .scoreboard td {
    text-align: center;
}
.scoreboard td {
    font-size: 3em;
    padding: 0 20px;
}
#status {
    margin-top: 20px;
}

JavaScript

// First part - Initialize the ScoreBoard 

var humanScore = 0;
var computerScore = 0;

// Get the player input
document.getElementById('rock').onclick = playGame("rock");
document.getElementById('paper').onclick = playGame("paper");
document.getElementById('scissors').onclick = playGame("scissors");

/*
document.getElementById('rock').onclick = playRock;
document.getElementById('paper').onclick = playPaper;
document.getElementById('scissors').onclick = playScissors;

function playRock() {
    playGame("rock")
}

function playPaper() {
    playGame("paper")
}

function playScissors() {
    playGame("scissors")
}
*/

// Play the game
function playGame(humanMove) {
    // Main Idea 
    // A. Generate computerMove
    // B. Print out the humanMove and computerMove into the status section
    // C. Compare computerMove with humanMove
    // 1. Update status section with the result at the time of the compare
    // 2. Increment the score (human or computer) accordingly
    // D. Update the scoreboard humanScore and computerScore

    // A. To create computerMove:
    // 1. Generate Randomness (Math.random()) -- between 0 - 1 inclusive
    // 2. *3 and FLOOR it so it will always be a result between 1 to 3
    // 3. Assign that number to a rock, paper, or scissors accordingly 
    // Note: There will be a temptation to use a, b, c or some other easier variable
    // but this can easily cause confusion when comparing the moves
    var computerMove = ['rock', 'paper', 'scissors'][Math.floor(Math.random() * 3)];

    // B. Print out the humanMove and computerMove into the status section
    document.getElementById('status').innerHTML = "<p>You played <strong>" + humanMove + "</strong>. The bot played <strong>" + computerMove + "</strong>.</p>";
    var winner = 'none';
    // B. Compare computerMove with humanMove
    // If it is a tie
    if (humanMove == computerMove) {
        // You tied. :|
        // If it is not a tie --> start comparing each moves one by one 
   ...