JSFiddle - React, Tailwind, and code Playground

by Manna

HTML

<body>
  <div class="blackjack" style="display: block;">
    <article>
      <header>
        <div class="container">
          <div class="title">
            <h1>ROULETTE1</h1>
            <span>Online</span>
          </div>
          <div class="status">
          </div>
        </div>
      </header>
    <section>
      <div class="dealer"></div>
      <div class="stake-limits"></div>
      <div class="stats"></div>
    </section>
    <footer>
      <span class="num-players"></span>
      <a class="play" href="#"></a>
    </footer>
  </div>
</div>

CSS

body {
	background-color: #29251c;
  	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.625em;
  	color: #ffffff;
}

article {
	width: 300px;
	height: 500px;
	background: #352d20;	
}

.container {
   	display: block;
    height: 30px;   
   	width: 309px;
    position: absolute;
    top: 10px;
    color: red;    
   	text-align: left;    
   	background: #4d432a;
    margin-top: 10px;
}

.container .title {
	width: 100%;
	display: block;
	position: relative;
	float: left;
}

.container .title h1 {
	margin: 8px;
}

.container .title span {
	float: right;
	position: relative;
	bottom: 20px;
	right: 15px;
}

.container .status {
    border-color: #ECBF4F transparent transparent #463A1B;
    border-style: solid;
    border-width: 0px 10px 15px 10px;
    width: 0px;
    height: 0px;
    display: block;
    position: absolute;
    top: 30px;
    right: -10px;
    color: red;
}