JSFiddle - React, Tailwind, and code Playground

by tomarriola

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
<div class="csi-gate-banner" role="alert">
  <div class="csi-gate-inner">

    <div class="csi-gate-icon">
      <div id="csi-padlock-anim" class="csi-padlock-anim"></div>
    </div>

    <div class="csi-gate-text">
      <p class="csi-gate-heading">Detective Access Required</p>
      <p class="csi-gate-sub">This document is available to Case Detectives only.</p>
      <p class="csi-gate-free">
        <a href="#">You can access the featured case for free.</a>
      </p>
    </div>

    <div class="csi-gate-actions">
      <a href="#" class="csi-gate-btn csi-gate-btn--primary">Subscribe Now</a>
      <a href="#" class="csi-gate-btn csi-gate-btn--secondary">Log In</a>
    </div>

  </div>
</div>

CSS

body { background: #191919; padding: 24px; }

.csi-gate-banner {
  box-sizing: border-box;
  width: 100%;
  background-color: #000;
  border: 4px solid #ffff00;
  padding: 24px 20px;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0,0,0,0.35);
}
.csi-gate-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  max-width: 860px;
  margin: 0 auto;
}
.csi-gate-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background-color: #ffff00;
  border-radius: 6px;
}
.csi-padlock-anim {
  width: 52px;
  height: 52px;
}
.csi-gate-text { flex: 1 1 200px; }
.csi-gate-heading {
  font-family: sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: #ffff00;
  margin: 0 0 5px 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.csi-gate-sub {
  font-family: sans-serif;
  font-weight: 300;
  font-size: 0.9rem;
  color: #fff;
  margin: 0 0 6px 0;
}
.csi-gate-free {
  font-family: sans-serif;
  font-size: 0.85rem;
  color: #bdbdbd;
  margin: 0;
}
.csi-gate-free a { color: #F7931E; }
.csi-gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.csi-gate-btn {
  display: inline-block;
  border-radius: 6px;
  font-family: sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  padding: 10px 20px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.csi-gate-btn--primary {
  background: #ffff00; color: #000; border: 2px solid #ffff00;
}
.csi-gate-btn--primary:hover {
  background: #000; color: #ffff00;
}
.csi-gate-btn--secondary {
  background: #000; color: #fff; border: 2px solid #ffff00;
}
.csi-gate-btn--secondary:hover {
  background: #ffff00; color: #000;
}

JavaScript

var padlockData = {"v":"5.9.6","fr":30,"ip":0,"op":90,"w":100,"h":100,"nm":"CSI Padlock","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shackle","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[50,50,0]},"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","nm":"Shackle Arc Group","it":[{"ty":"sh","nm":"Arc","d":1,"ks":{"a":1,"k":[{"t":0,"s":[{"i":[[0,0],[-8.28,0],[0,-8.28],[0,0]],"o":[[-8.28,0],[0,0],[0,8.28],[0,0]],"v":[[15,-4],[-15,-4],[-15,-24],[15,-24]],"c":false}],"i":{"x":0.42,"y":1},"o":{"x":0.58,"y":0}},{"t":18,"s":[{"i":[[0,0],[-8.28,0],[0,-8.28],[0,0]],"o":[[-8.28,0],[0,0],[0,8.28],[0,0]],"v":[[15,-4],[-15,-4],[-15,-32],[15,-32]],"c":false}],"i":{"x":0.42,"y":1},"o":{"x":0.58,"y":0}},{"t":50,"s":[{"i":[[0,0],[-8.28,0],[0,-8.28],[0,0]],"o":[[-8.28,0],[0,0],[0,8.28],[0,0]],"v":[[15,-4],[-15,-4],[-15,-24],[15,-24]],"c":false}],"i":{"x":0.42,"y":1},"o":{"x":0.58,"y":0}},{"t":90,"s":[{"i":[[0,0],[-8.28,0],[0,-8.28],[0,0]],"o":[[-8.28,0],[0,0],[0,8.28],[0,0]],"v":[[15,-4],[-15,-4],[-15,-24],[15,-24]],"c":false}]}]}},{"ty":"st","nm":"Stroke","c":{"a":0,"k":[1,0.945,0,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":6},"lc":2,"lj":2},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ip":0,"op":90,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Lock Body","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"t":0,"s":[50,50,0],"i":{"x":0.42,"y":1},"o":{"x":0.58,"y":0}},{"t":18,"s":[50,54,0],"i":{"x":0.42,"y":1},"o":{"x":0.58,"y":0}},{"t":50,"s":[50,50,0],"i":{"x":0.42,"y":1},"o":{"x":0.58,"y":0}},{"t":90,"s":[50,50,0]}]},"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","nm":"Body Rect","it":[{"ty":"rc","nm":"rect","d":1,"p":{"a":0,"k":[0,12]},"s":{"a":0,"k":[40,30]},"r":{"a":0,"k":4}},{"ty":"fl","nm":"Yellow...