JSFiddle - React, Tailwind, and code Playground

by Victor Melnik

HTML

<div id="container">
  <canvas class="canvas" height='320' width='480' id='example'>Обновите браузер</canvas>
  <div id="front">
    <h1>Kalcid</h1>
    <h2>game</h2>
    <p>Игры</p>
    <p><a href="/game/game2/gam.html">dasd</a></p>
  </div>
</div>

CSS

body {
  background-color: #66CDAA;
}

h1 {
  text-align: center;
  font: normal small-caps 60px/56px serif;
}

h2 {
  text-align: center;
}

p {
  text-align: center;
  font-size: 20px;
  color: red;
}

#container {
  position: relative;
}
#front {
  position: absolute;
  left: 130px;
  top: 10px;
}

JavaScript

var example = document.getElementById("example"),
  ctx = example.getContext('2d');
ctx.fillStyle="#dddddd";
ctx.fillRect(0, 0, example.width, example.height);