JSFiddle - React, Tailwind, and code Playground

by Nonamenonamevi4

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <fieldset>
  <legend>Выбор варианта</legend>
  <img src="http://htmlbook.ru/files/check-bg.png" alt="Галочка">
  <p>Какой раздел психологии изучает познавательные процессы человеческого сознания?</p>
  <form>
  <label><input type="radio"> Психоанализ</label>
  <label><input type="radio"> Бихевиоризм</label>
  <label><input type="radio"> Когнитивная психология</label>
  <label><input type="radio"> Гуманистическая психология</label>
  <label><input type="radio"> Гештальт психология</label>
  </form>
  <button>Ответить</button>
</fieldset>
</body>
</html>

CSS

fieldset {
  background-color: #e1e3b8;
  border: 2px solid #899e7f;
  height: 300px;
  width: 500px;
  position: relative;
}

legend {
  color: #a66246;
  font-weight: bold;
  font-size: 20px;
}

img {
  position: absolute;
  left: 15px;
  top: 20px;
  z-index: 0;
  pointer-events: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

p {
  position: absolute;
  z-index: 1;
  font-weight: bold;
}

form {
  position: absolute;
  display: flex;
  flex-direction: column;
  left: 160px;
  top: 100px;
}

label {
  margin-bottom: 15px;
}

button {
  position: absolute;
  border: 1px solid white;
  color: white;
  background-color: #b98f5c;
  left: 160px;
  top: 275px;
}