JSFiddle - React, Tailwind, and code Playground

by Ty

HTML

<html>
    
    <head>
        <title>Blackjack</title>
        <link rel="stylesheet" type="text/css" href="assets/css/blackjack.css">
        <script src="assets/js/jquery-2.0.3.min.js"></script>
        <script src="assets/js/modernizr.custom.18896.js"></script>
        <script src="assets/js/mustache.js"></script>
        <script src="assets/js/blackjack.js"></script>
    </head>
    
    <body>
        <div id="wrapper">
             <h1><img id="logo" src="assets/images/rocket-u-logo-large.png">Blackjack</h1>

            <p>Hi, thanks for stopping by our blackjack table. Pull up a chair and let's play...</p>
            <div id="dealer">
                 <h2>Dealer</h2>

                <div id="status">
                     <h2 id="status1">Ready to play? Click 'New Game' to start...</h2>

                </div>
                 <h2 id="player">Player</h2>

                <button id="newgame">New Game</button>
            </div>
        </div>
    </body>

</html>

CSS

body {
	background-color: #003054;
}

#wrapper {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
	background-color: #003054;
}

h1 {
	color: white;
	font-size: 80px;
	font-weight: bold;
}

p  {
	color: white;
	font-size: 25px;
}

#dealer {
	width: 900px;
	height: 500;
	border-radius: 30px;
	background-color: #19c36b;
   text-align: center;
}

h2 {
	font-size: 40px;
	color: white;
	text-align: center;
}

#status {
   margin-top: 145px;
}

#player {
   margin-top: 145px;
}

#newgame {
   text-align: center;
}

#cards {
	width: 900;
	height: 150;


#logo {
	width:  250px;
	float:  left;
}

/* unordered lists */

ul {
	width: 300px;
	padding: 15px;
	background-color: #7c0106;
	background-color: #fff;
	list-style: none;
	color: #fff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;	
}

ul li {
	color: #003054;
	padding: 2px;
}

JavaScript

//Blackjack