JSFiddle - React, Tailwind, and code Playground

by JohnFish

HTML

<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
<title> Marijuana Game</title>
<link rel="stylesheet" type="text/css" href="CSS/game.css" />
<script type="text/javascript">
function alertone() {
alert("You have become addicted. You have lost two dollars, and your life.");
};
function alerttwo() {
alert("You live a long, prosperous life!");
};
</script>
</head>
<body>
<div id="body">
<p>
You have been offered some pot. What do you do?
</p>
<button class="badchoice" onclick="alertone()">
Smoke some pot!
</button>
<br />
<p>
Or...
</p>
<button class="goodchoice" onclick="alerttwo()">
Avoid any dealers!
</button>
</div>
</body>
</html>

CSS

html {
    background-color: black;
    }

#body {
    position: fixed;
    top: 100px;
    left: 300px;
    width: 600px;
    height: 400px;
    background-color: white;
    text-align: center;
    font-size: 30px;
    padding-left: 20px;
    padding-right: 20px;
    font-family: 'Arvo';
    }

button {
    font-size: 50px;
    }

button.badchoice {
    font-family: 'Special Elite';
    font-size: 50px;
    width: 500px;
    height: 75px;
    }

button.goodchoice {
    font-family: 'Times New Roman';
    font-size: 50px;
    width: 500px;
    height: 75px;
    }