JSFiddle - React, Tailwind, and code Playground

by Haze32

HTML

<div class="blockedAni">
  <svg id="lockIcon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
    <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
    <g id="SVGRepo_iconCarrier">
      <path d="M16 10V7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7V10M12 14V17M18 15C18 18.3137 15.3137 21 12 21C8.68629 21 6 18.3137 6 15C6 11.6863 8.68629 9 12 9C15.3137 9 18 11.6863 18 15ZM13 14C13 14.5523 12.5523 15 12 15C11.4477 15 11 14.5523 11 14C11 13.4477 11.4477 13 12 13C12.5523 13 13 13.4477 13 14Z" stroke="#999" stroke-width="1.224" stroke-linecap="round" stroke-linejoin="round"></path>
    </g>
  </svg>
  <div class="spinner"></div>
</div>

<div class="content">
  <h1>
    Access Blocked
  </h1>
  <p>
    Use of this site is limited by the firm's data loss prevention (DLP) policies. These include restrictions from uploading files and pasting content from the clipboard.
  </p>
  <p><strong>Blocked website URL:</strong></p>
</div>

CSS

body {
    font-family: HelveticaNeue, Arial, Helvetica, sans-serif;
    color: #000;
    background-color: #fff;
    margin: 0;
    position: relative;
    padding: 0;
    line-height: 1.4;
}

.blockedAni {
  position: relative;
  width: 100%;
  display: block
}

#lockIcon {
  display: block;
  margin: auto;
  width: 200px;
  height: 200px;
  margin-bottom: -173px;
  z-index: 999;
  position: relative;
}

.lockb {
  fill: green;
}

.lock {
  fill: transparent;
  stroke: green;
  stroke-width: 3;
}

.spinner {
  position: relative;
  margin: auto;
  box-sizing: border-box;
  background-clip: padding-box;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 4px solid #eee;
  -webkit-mask: linear-gradient(rgba(24, 24, 24, 0.2), rgba(24, 24, 24, 0.9) 90%);
  transform-origin: 50% 60%;
  transform: perspective(200px) rotateX(66deg);
  filter: drop-shadow(#999c 0px 0px 6px);
}

.spinner:before,
.spinner:after {
  content: "";
  position: absolute;
  margin: -4px;
  box-sizing: inherit;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  opacity: 0.05;
  border: inherit;
  border-color: transparent;
  animation: spinner-spin 3.2s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, spinner-fade 3.2s linear infinite;
}

.spinner:before {
  border-top-color: #140be3;
}

.spinner:after {
  border-top-color: #9ef5fa;
  animation-delay: 0.1s;
}

@keyframes spinner-spin {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes spinner-fade {
  20% {
    opacity: 0.1;
  }

  40% {
    opacity: 1;
  }

  60% {
    opacity: 0.1;
  }
}



.content{
  max-width:750px;
  margin: 0 auto;
  text-align: center;
}