JSFiddle - React, Tailwind, and code Playground

by Peyton Hessler

HTML

<!DOCTYPE html>
<html>
<body>
<head>
<link rel="stylesheet" type="text/css" href="adventure.css">
</head>

<div class = "right">
	<p>This is an example of how the placement will be for right alignment</p>
	<input type="button" value="option 1">
	<input type="button" value="option 2">
	<input type="button" value="option 3">
	<input type="button" value="option 4">
	
</div>


<div class = "center">

<h1>Welcome adventurer,</h1>

<p id="points_left">Points remaining 15</p>

<p>Strength</p>
<input type="button" value="-" id="minus_str_btn" onclick="minus_str();generate_player()">
<input type="button" value="+" id="plus_str_btn" onclick="plus_str();generate_player()">

<input type="text" size="1" value="0" id="str_count" readonly>

<br>

<p>Dexterity</p>
<input type="button" value="-" id="minus_dex_btn" onclick="minus_dex();generate_player()">
<input type="button" value="+" id="plus_dex_btn" onclick="plus_dex();generate_player()">

<input type="text" size="1" value="0" id="dex_count" readonly>

<br>

<p>Constitution</p>
<input type="button" value="-" id="minus_con_btn" onclick="minus_con();generate_player()">
<input type="button" value="+" id="plus_con_btn" onclick="plus_con();generate_player()">

<input type="text" size="1" value="0" id="con_count" readonly>

<br>

<p>Intelligence</p>
<input type="button" value="-" id="minus_int_btn" onclick="minus_int();generate_player()">
<input type="button" value="+" id="plus_int_btn" onclick="plus_int();generate_player()">

<input type="text" size="1" value="0" id="int_count" readonly>

<br>

<p>Wisdom</p>
<input type="button" value="-" id="minus_wis_btn" onclick="minus_wis();generate_player()">
<input type="button" value="+" id="plus_wis_btn" onclick="plus_wis();generate_player()">

<input type="text" size="1" value="0" id="wis_count" readonly>

<br>

<p>Charisma</p>
<input type="button" value="-" id="minus_cha_btn" onclick="minus_cha();generate_player()">
<input type="button" value="+" id="plus_cha_btn"...

CSS

body {
    background-color: #1a1a1a;
	
}

h1{
	color: #bfbfbf;
}

p{
	color: #bfbfbf;
}

span{
	color: #bfbfbf;
}

input[type="button"]{ 
  color: white; 
  font: bold 84% 'trebuchet ms',helvetica,sans-serif; 
  background-color:#333333;
  transition-duration: 0.4s;
  cursor: pointer;
} 



input[type="button"]:hover{
	background-color: #000000; 
    color: white;
}

input[type="button"]:disabled {
	background-color: #b30000;
    opacity: 0.6;
    cursor: not-allowed;
}

input[type="button"]:active {
  transform: translateY(2px);
}

#Start{
	color: #a6a6a6;
}

.center {
    margin: auto;
    width: 60%;
    padding: 10px;
}

.right {
    position: absolute;
    right: 0px;
    width: 200px;
    border: 3px solid #73AD21;
    padding: 90px;
	text-align: center;
}


#alert {
    visibility: hidden;
	color: black;
	background-color: #b30000;
	padding: 15px;
	border-radius: 5px;
	width: 250px;
	
}