JSFiddle - React, Tailwind, and code Playground

by Botond Balázs

HTML

<div class="allout">
    <div class="allout-controls">
        <div class="allout-header">
            <h1 class="allout-title">All Out</h1>
            <p class="allout-author">Készítette: Balázs Botond (BABVACT.SZE)</p>
        </div>
        <div class="allout-counters"></div>
        <div class="allout-settings">
            <div class="allout-setting">Szint: <span class="level-count">1</span></div>
            <div class="allout-setting allout-toggle allout-js-music">Zene: <span class="allout-toggle-off">BE</span><span class="allout-toggle-on">KI</span></div>
            <div class="allout-setting allout-toggle allout-js-sound">Hang: <span class="allout-toggle-on">BE</span><span class="allout-toggle-off">KI</span></div>
            <div class="allout-setting">Név: <input class="allout-name" value="Névtelen"></div>
        </div>
        <div class="allout-highscores"></div>
    </div>
    <canvas class="allout-canvas" width="200" height="200"></canvas>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Monofett|Squada+One);

.allout {
  width: 500px;
  background: #000;
  padding: 5px 5px 5px 10px;
  color: #304045;
  display: flex;
}

.allout-controls {
    font-family: 'Squada One', cursive;
    font-size: 16px;
    width: 300px;
    display: flex;
    flex-wrap: wrap;
}

.allout-header {
    width: 210px;
    height: 80px;
}

.allout-title {
    font-family: 'Monofett', cursive;
    font-size: 35px;
    letter-spacing: 3px;
    color: #aaa;
    margin: 0 0 5px 0;
    padding: 0;
}

.allout-author {
    margin: 0; padding: 0;
    font-size: 13px;
}

.allout-counters {
    width: 90px;
    height: 80px;
}

.allout-settings {
    width: 150px;
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.allout-setting {
    width: 150px;
    margin: 0 0 4px 0;
}

.allout-toggle-on {
    display: inline-block;
    border: 1px solid #304045;
    background: #304045;
    color: #000;
    padding: 0 3px 0 3px;
    cursor: pointer;
}

.allout-toggle-off {
    display: inline-block;
    border: 1px solid #304045;
    padding: 0 3px 0 3px;
    cursor: pointer;
}

.allout-name {
    background: #000;
    border: 1px solid #304045;
    color: #304045;
    font-family: 'Squada One', cursive;
    font-size: 13px;
    width: 70px;
}

.allout-highscores {
    width: 150px;
    height: 120px;
}

.allout-canvas {
}