JSFiddle - React, Tailwind, and code Playground

HTML

<div id="game-container">
    <div id="button-group">
    <span id="rock">Rock</span>
	<span id="paper">Paper</span>
	<span id="scissor">Scissors</span>
	<span id="reset">Reset</span>

    </div>
    <div id="choice-group">
        <div id="user-choice">
            	<h1 id="user-text"></h1>

        </div>
        <div id="computer-choice">
            	<h1 id="computer-text"></h1>

        </div>
    </div>
    <div id="results">
        	<h1 id="results-text"></h1>

    </div>
</div>

CSS

body {
    font-family: sans-serif;
    background: #5D6377;
    color: #fff;
}
#game-container {
    margin: 0 auto;
    margin-top: 5%;
}
#rock, #paper, #scissor, #reset {
    width: 200px;
    height: 100px;
    border: 2px solid #fff;
    border-radius: 3px;
    padding: 10px;
    cursor: pointer;
}
#rock:hover, #paper:hover, #scissor:hover, #reset:hover {
    width: 200px;
    height: 100px;
    border: 2px solid red;
    border-radius: 3px;
    padding: 10px;
    cursor: pointer;
}
#button-group {
    text-align: center;
    margin: 0 auto;
}
#choice-group {
    text-align: center;
    margin-left: 25%;
}
#user-choice, #computer-choice {
    border: 2px solid #fff;
    border-radius: 3px;
    width: 300px;
    height: 300px;
    float: left;
    margin-top: 5%;
    margin-right: 5%;
}
#results {
    clear: both;
    text-align: center;
}
#user-text, #computer-text {
    margin-top: 120px;
}

JavaScript

var $rockButton = $('#rock').text();
var $paperButton = $('#paper').text();
var $scissorsButton = $('#scissor').text();
var $resetButton = $('#reset');
var $resultsText = $('#results-text');

// var rpsArray = ['Rock', 'Paper', 'Scissors']

var userChoice = 'Rock' || 'Paper' || 'Scissors';
var computerChoice = 'Rock' || 'Paper' || 'Scissors';


function setComputerChoice(){
    computerChoice = Math.random();

    if(computerChoice < 0.34){
        computerChoice = 'Rock';
    }else if (computerChoice <= 0.67){
        computerChoice = 'Paper';
    }else{
        computerChoice = 'Scissors';
    }
    $('#computer-text').text(computerChoice);
};

var deactivateButton = function(currentButton) {
    var buttonid = "#" + currentButton;
    var buttons = ['#rock','#scissor','#paper'];
    buttons.forEach(function(button) {
        if(button != buttonid) {
            $(button).css({'visibility': 'hidden'})
        };
    });
};


function showResult(){
    console.log(userChoice, computerChoice);
    if ( userChoice == computerChoice){
        $('#results-text').text('Tie');
    }
    else if (userChoice == 'Rock') {

        if (computerChoice == 'Paper') {
            $('#results-text').text('Paper Wins!!');
        } 
        else if(computerChoice == 'Scissors') {
            $('#results-text').text('Rock Wins!!');
            
        }
    }
    else if(userChoice == 'Scissors'){

        if(computerChoice == 'Rock'){
            $('#results-text').text('Rock Wins!!');
        }
        else if(computerChoice == 'Paper'){
            $('#results-text').text('Scissors Wins!!');
        }
    }     
    else if(userChoice == 'Paper'){

        if(computerChoice == 'Rock'){
            $('#results-text').text('Paper Wins!!');
        }
        else if(computerChoice == 'Scissors'){
            $('#results-text').text('Scissors Wins!!');
        }
    }  
}//end of function
$(function(){
    $('#rock').on('click', function(){
        $('#user-text').text('Rock');
...