JSFiddle - React, Tailwind, and code Playground

HTML

<div class="a1">
  <h1 class="a2">COMING SOON</h1>
  <p class="a3">SUBCRIBE TO GET NOTIFED ON UPDATES</p>
</div>
<div>
  <form action="input1.php" name="test" method="post" class="a4">
    <input class="a5" type="email" name="email" placeholder="Type your e-mail adress">
    <input class="a6" type="submit" value="Subscribe">
  </form>
</div>
<div class="a7">
  <h1>DAYS HOURS MINS</h1>
</div>
<div class="a8">
  <canvas id="circle1" width="180" height="180">
    <p>Ваш браузер не поддерживает рисование.</p>
  </canvas>
</div>
<div class="a9">
  <canvas id="circle2" width="250" height="250">
    <p>Ваш браузер не поддерживает рисование.</p>
  </canvas>
</div>
<div class="a10">
  <canvas id="circle3" width="200" height="200">
    <p>Ваш браузер не поддерживает рисование.</p>
  </canvas>
</div>

CSS

.a1 {
  height: 300px;
}

.a2 {
  font-size: 50px;
  font-family: Bold;
  color: white;
  text-align: center;
  line-height: 0.5em;
  margin-top: 125px;
}

.a3 {
  color: darkblue;
  text-align: center;
  font-family: Bold;
  line-height: 0em;
}

.a4 {
  margin-left: 630px;
  margin-top: -220px;
  size: 500px;
}

.a5 {
  width: 180px;
  height: 30px;
}

.a6 {
  background-color: orange;
  color: white;
  border-color: orange;
  height: 35px;
}

.a7 {
  color: white;
  font-family: Bold;
  margin-left: 610px;
  margin-top: 300px;
  word-spacing: 15px;
  position: relative;
}

.a8 {
  margin-left: 550px;
  margin-top: -140px;
}

.a9 {
  margin-left: 600px;
  margin-top: -150px;
}

.a10 {
  margin-left: 650px;
  margin-top: -150px;
}

JavaScript

window.addEventListener("load", function() {
  var drawingCanvas = document.getElementById('circle1');
  if (drawingCanvas && drawingCanvas.getContext) {
    var context = drawingCanvas.getContext('2d');
    // Рисуем окружность 
    context.strokeStyle = "#538ec2";
    context.fillStyle = "#538ec2";
    context.beginPath();
    context.arc(100, 100, 50, 0, Math.PI * 2, true);
    context.closePath();
    context.stroke();
    context.fill();
  }
})

window.addEventListener("load", function() {
  var drawingCanvas = document.getElementById('circle2');
  if (drawingCanvas && drawingCanvas.getContext) {
    var context = drawingCanvas.getContext('2d');
    // Рисуем окружность 
    context.strokeStyle = "#538ec2";
    context.fillStyle = "#538ec2";
    context.beginPath();
    context.arc(100, 100, 50, 0, Math.PI * 2, true);
    context.closePath();
    context.stroke();
    context.fill();
  }
})

window.addEventListener("load", function() {
  var drawingCanvas = document.getElementById('circle3');
  if (drawingCanvas && drawingCanvas.getContext) {
    var context = drawingCanvas.getContext('2d');
    // Рисуем окружность 
    context.strokeStyle = "#538ec2";
    context.fillStyle = "#538ec2";
    context.beginPath();
    context.arc(100, 100, 50, 0, Math.PI * 2, true);
    context.closePath();
    context.stroke();
    context.fill();
  }
})