JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div id="center">

	<button id="button" onclick="play()">Play</button>
	<p>You rolled:</p><span id="myroll"></span>
	<p>Your opponent rolled:</p><span id="opproll"></span>
	
	<p id="outcome"></p>
	</div>

	</body>

CSS

html { margin: 0px; padding: 0px; width: 100%; height: 100%; }

body { margin: 0px; padding: 0px; width: 100%; height: 100%; }

#center { margin: 100px auto; width: 200px; }

JavaScript

function play() {

var ROCK = 0;
var PAPER = 1;
var SCISSORS = 2; 
var LIZARD = 3;
var SPOCK = 4;

var choices = ['rock', 'paper', 'scissors', 'lizard', 'spock'];

var myRoll = Math.floor(Math.random()*choices.length);
var opponentRoll = Math.floor(Math.random()*choices.length);

document.getElementById("myroll").innerHTML=choices[myRoll];
document.getElementById("opproll").innerHTML=choices[opponentRoll];

if (myRoll == opponentRoll) {
	document.getElementById("outcome").innerHTML="It's a draw.";
	return;
} //end of if

switch(myRoll) {

	case ROCK:
		document.getElementById("outcome").innerHTML=(opponentRoll == SCISSORS ? 'You win!' : 'You lose!');
		return;
	
	case ROCK:
		document.getElementById("outcome").innerHTML=(opponentRoll == LIZARD ? 'You win!' : 'You lose!');
		return;
	
	case PAPER:	
		document.getElementById("outcome").innerHTML=(opponentRoll == ROCK ? 'You win!' : 'You lose!');
		return;
		
	case PAPER:
		document.getElementById("outcome").innerHTML=(opponentRoll == SPOCK ? 'You win!' : 'You lose!');
		return;
		
	case SCISSORS:
		document.getElementById("outcome").innerHTML=(opponentRoll == PAPER ? 'You win!' : 'You lose!');
		return;
	
	case SCISSORS:
		document.getElementById("outcome").innerHTML=(opponentRoll == LIZARD ? 'You win!' : 'You lose!');
		return;
		
	case LIZARD:
		document.getElementById("outcome").innerHTML=(opponentRoll == SPOCK ? 'You win!' : 'You lose!');
		return;
	
	case LIZARD:
		document.getElementById("outcome").innerHTML=(opponentRoll == PAPER ? 'You win!' : 'You lose!');
		return;
	
	case SPOCK:
		document.getElementById("outcome").innerHTML=(opponentRoll == SCISSORS ? 'You win!' : 'You lose!');
		return;
		
	case SPOCK:
		document.getElementById("outcome").innerHTML=(opponentRoll == ROCK ? 'You win!' : 'You lose!');
		return;
        
} //end of switch(myRoll)


} //end of play()