JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Tic Tac Toe - Create Room</title>

	<!-- Style-->
	<link type="text/css" rel="stylesheet" href="ttt.css" />
	<link rel="stylesheet" href="fonts/stylesheet.css" type="text/css" charset="utf-8" />	

	<!-- get jQuery from the google apis -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>	
	<script type="text/javascript" src="http://localhost:8080/socket.io/socket.io.js"></script>
    <script type="text/javascript" src="js/misc.js"></script>
    <script type="text/javascript">

    var socket = io('http://localhost:8080');

    /*
		This is very important, since we're identifying every client with username, not with socket,
		because every time a client reloads site it's like another connection and we won't this.
    */
	username   = "user3";

	$( document ).ready(function() {
		$('#username').html(username);
	});

	function sendInfo(){
		name = $('#text').val();
		
		if(name == "") alert("You must fill the name camp.");
		else{
			if(checkBalance()){
				bet = parseFloat($('#amount').html());
				// All is correct, send room info to the server.
				socket.emit('createRoom', {name: name, bet: bet, user: username});
			}else alert("You can't afford that debt.");
		}

	}

	// It's important that room creator is redirected automatically to his room.
	socket.on('roomCreated', function(data){
		window.location.href = './enter_new.html?id='+data.id+' ';
	});

    </script>
</head>

<body>
<center>
	
	<div class="content_menu">
		<div class="select_balance">
				<select>
					<option value="0">Paidverts</option>
					<option value="1">Mytrafficvalue</option>
					<option value="2">SolidTrustPay</option>
					<option value="3">OK...