JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<h1 class="h1">
Как настроение?
</h1>

<input type="range" min="1" max="10" class="r1">

<input type="button" value="post" class="b1">

</body>

CSS

body {
  background: #ddf;
}
.d1 {
  display: flex;
  width: 300px
  max-width: 300px;
  position: relative;
}


.h1 {
  font-family: Arial;
}

.r1 {
  display: block;
  width: 30%;
  margin: 40px 0 50px 200px;
  size: 2em;
  transform: scale(2);
}

.b1 {
  display: block;
  font-size: 3em;
  background: blue;
  color: white;
  border: 0;
  border-radius: 100px;
  padding: 10px 30px;
  margin: 0 0 0px 30px;
}