JSFiddle - React, Tailwind, and code Playground

by nukeboy212

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-xs-6">
  <h1>
YouTuber
</h1>
  <button id="RV">
    Record Video
  </button>
  <button id="vlog">
    Vlog
  </button>
  <button id="game">
    Game
  </button>
  <button id = "gtp">
    GTP
  </button>
<button id = "deepio">
Deep.io
</button>
<button id = "digcraft">
Digcraft
</button>
<button id ="cimCity">
Cim City
</button>
<button id = "rublox">
Rublox
</button>
</div>
<div class="col-xs-6">
  <h2 id="subs">
Subscribers
</h2>
  <h3>
Views
</h3>
  <h3>
Videos
</h3>

</div>

CSS

body {
  background-color: Red;
}

h1 {
  color: white;
  font-family: arial, sans-serif;
}

h2 {
  float: right;
}

h3 {
  float: right;
  clear: right;
  color: white;
}

:target cimCity {
  float: right;
  clear: right;
}

JavaScript

var views = 0;
var subs = 0;
var moneyz = 50;
var videos = 0;
//var food = 0;
$("#vlog").hide();
$("#game").hide();
$("#digcraft").hide();
$("#gtp").hide();
$("#deepio").hide();
$("#rublox").hide();
$("#cimCity").hide();

var answer = prompt("Who are you going to call yourself in this magical adventure?");
$("h1").text("YouTuber: " + answer)

function show(){
$("#RV").hide();
}

$("#RV").click(function() {
  $("#RV").hide();
  $("#vlog").show();
  $("#game").show();

});

$("#game").click(function() {
  $("#vlog").hide();
  $("#game").hide();
  $("#digcraft").show();
	$("#gtp").show();
	$("#deepio").show();
	$("#rublox").show();
	$("#cimCity").show();
  $("#subs").text("Subscribers: " + subs)
    
});