JSFiddle - React, Tailwind, and code Playground

HTML

<div id="gameScreen">
    <img src="image/logo.png" />
    <br />
    <hr />
     <h3>You will play 10 rounds against the computer and I'll keep score!<br /><br />


    Wins: <span id="wins">0</span>
    <br />
    Losses: <span id="losses">0</span>
    <br />
    Ties: <span id="ties">0</span>
    <br />
    <br />


    Current Game: <br /><br />
    <span id="whoWon">

    </span> 
    <br /><br />
    You've got
    <span id="triesLeft"></span>
    tries left!
    <br />
    <br />

    <br />

    Select your weapon!<br /><br />

    <img src="image/rock1.jpg" name="rock" onclick ="playGame('rock');" onmouseover="over(0)" onmouseout="out(0)">
    <img src="image/paper1.jpg" name="paper" onclick ="playGame('paper');" onmouseover="over(1)" onmouseout="out(1)">
    <img src="image/scissors1.jpg" name="scissors" onclick ="playGame('scissors');" onmouseover="over(2)" onmouseout="out(2)">
    </h3>

JavaScript

revert = new Array();
var inames = new Array('rock', 'paper', 'scissors');
var userOption = "";
var triesLeft = 10;
var wins = 0;
var ties = 0;
var losses = 0;
var results;
var computerSelection;


//Main function for the game logic
function playGame(userSelect) {

    userOption = userSelect;

    var computerSelection = Math.random();

    if (computerSelection < 0.34) {
        computerSelection = "rock";

    } else if (computerSelection < 0.67) {
        computerSelection = "paper";
    } else {
        computerSelection = "scissors";
    }

    results = compareChoices(userOption, computerSelection);

    document.getElementById("result").innerHTML = "<p>The computer chose " + computerSelection;
    document.getElementById("whoWon").innerHTML = results;


    document.getElementById("triesLeft").innerHTML = triesLeft;
}


function updateScore(results) {
    var ties = document.getElementById("ties");
    var wins = document.getElementById("wins");
    var losses = document.getElementById("losses");

    if (results === "tie") {
        ties++;
        ties.innerHTML = ties;
    }

    if (results === "win") {
        wins++;
        wins.innerHTML = wins;
    }

    if (results === "lose") {
        losses++;
        losses.innerHTML = losses;
    }
}


function compareChoices(userOption, computerSelection) {

    if (computerSelection == "rock") {
        document.getElementById("imageResult").setAttribute("src", "image/rock2.jpg");
    }

    if (computerSelection == "paper") {
        document.getElementById("imageResult").setAttribute("src", "image/paper2.jpg");
    }

    if (computerSelection == "scissors") {
        document.getElementById("imageResult").setAttribute("src", "image/scissors2.jpg");
    }



    if (userOption == computerSelection) {
        ties++;
        updateScore("tie")
        return "It's a tie!";

    }

    if (userOption == "rock") {
        if (computerSelection == "scissors") {
            wins++;
           ...