JSFiddle - React, Tailwind, and code Playground

by lunar1a

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

<div class="modal" id="modal">

  <div class="modal__content">
  <div class="modal__close"></div>
    <div class="modal__content__title">Авторизация</div>
    <div class="modal__content__block">
      <label for="email">E-mail</label>
      <input type="text" name="email" id="email" placeholder="Введите e-mail">
    </div>
    <div class="modal__content__block">
      <label for="pass">Пароль</label>
      <input type="text" name="pass" id="pass" placeholder="Введите пароль">
    </div>
  </div>
</div>
<a href="#modal" class="btn">Открыть</a>
  
</body>
</html>

SCSS

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.5); 
  z-index: 1050;
  display: flex;
  transition: opacity 200ms ease-in; 
  margin: 0;
  padding: 0;
  &__content {
    position: relative;
    background-color: #fff;
    padding: 60px;
    height: fit-content;
    width: fit-content;
    &__title {
      font-size: 40px;
      text-align: center;
      margin-bottom: 35px;
    }
    &__block {
      display: block;
      &:first-child {
        margin-bottom: 18px;
      }
    }
  }
}

input {
  width: 370px;
  height: 50px;
}
label {
  display: block;
}