JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<link href='https://css.gg/arrow-right-o.css' rel='stylesheet'>
<link href='https://css.gg/arrow-right.css' rel='stylesheet'>
<link href='https://css.gg/lock.css' rel='stylesheet'>

<div class="pw_overlay">
  <div class="pw_overlay__core">
    <p class="pw_overlay__title">Password required
    <i class="pw_overlay__lock_icon gg-lock"></i>
    </p>
    <p class="pw_overlay__lead">Please enter the password given to you to access this website.</p>
    <form class="pw_overlay__form">
      <label class="pw_overlay__field_block">
        <input class="pw_overlay__field" type="password"/>
      </label>
      <button class="pw_overlay__button">
      Enter website
<i class="pw_overlay__button__icon gg-arrow-right"></i>
      </button>
    </form>
  </div>
</div>

SCSS

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;200;300;400;500;600;700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,700;1,900&display=swap');

.pw_overlay,
.pw_overlay * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border:0;
  background-color: transparent;
  font: inherit;
  color: inherit;
  outline: none;
}

.pw_overlay {
  position: fixed;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
background: linear-gradient(45deg, #2f2f2f, #525252);
  font-family: roboto, ibm plex sans, sans-serif;
  color: rgba(255,255,255,.6);
  line-height: 1.5;
  font-size: 15px;
  
--color-1: #445;
--color-2: #99a;
--color-3: #556;

background-color:var(--color-3);
background-image: linear-gradient(30deg, var(--color-1) 12%, transparent 12.5%, transparent 87%, var(--color-1) 87.5%, var(--color-1)),
linear-gradient(150deg, var(--color-1) 12%, transparent 12.5%, transparent 87%, var(--color-1) 87.5%, var(--color-1)),
linear-gradient(30deg, var(--color-1) 12%, transparent 12.5%, transparent 87%, var(--color-1) 87.5%, var(--color-1)),
linear-gradient(150deg, var(--color-1) 12%, transparent 12.5%, transparent 87%, var(--color-1) 87.5%, var(--color-1)),
linear-gradient(60deg, var(--color-2) 25%, transparent 25.5%, transparent 75%, var(--color-2) 75%, var(--color-2)),
linear-gradient(60deg, var(--color-2) 25%, transparent 25.5%, transparent 75%, var(--color-2) 75%, var(--color-2));
background-size:80px 140px;
background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
}

.pw_overlay__core {
  animation: pw_overlay__coreEnter 2.3s;
}

@keyframes pw_overlay__coreEnter {
  0% {
    opacity: 0;
    transform: translateX(-50px)
  }
}


.pw_overlay__title {
  font-weight: 600;
  font-size: 1.25em;
  margin-bottom: .5em;
  color: rgba(255,255,255,.95)
}

.pw_overlay__lead {
  margin-bottom: 1em;
}

.pw_overlay__form {
  display:...

JavaScript

/*
const $pwOverlay = `
<div class="pw_overlay">
  <div class="pw_overlay__core">
    <p class="pw_overlay__title">Password required</p>
    <p class="pw_overlay__lead">Please enter the password given to you to access this website.</p>
    <form class="pw_overlay__form">
      <label class="pw_overlay__field_block">
        <input class="pw_overlay__field" type="password"/>
      </label>
      <button class="pw_overlay__button">Enter website</button>
    </form>
  </div>
</div>
`;

document.documentElement.innerHTML = $pwOverlay;
*/