JSFiddle - React, Tailwind, and code Playground
by akogch
HTML
<div class="static">
<div></div>
</div>
<div class="scan"></div>
CSS
html,
body,
div {
height: 100%;
}
body {
background-image:
radial-gradient(transparent, hsla(0, 0%, 0%, 0.85)),
linear-gradient(transparent 75%, hsl(0, 0%, 0%) 75%),
linear-gradient(
left,
hsl(0, 0%, 82%) 14.29%,
hsl(54, 100%, 50%) 14.29%,
hsl(54, 100%, 50%) 28.57%,
hsl(184, 100%, 50%) 28.57%,
hsl(184, 100%, 50%) 42.86%,
hsl(121, 98%, 42%) 42.86%,
hsl(121, 98%, 42%) 57.14%,
hsl(320, 93%, 37%) 57.14%,
hsl(320, 93%, 37%) 71.43%,
hsl(349, 100%, 50%) 71.43%,
hsl(349, 100%, 50%) 85.71%,
hsl(240, 100%, 38%) 85.71%
);
background-image:
radial-gradient(transparent, hsla(0, 0%, 0%, 0.85)),
linear-gradient(transparent 75%, hsl(0, 0%, 0%) 75%),
linear-gradient(
to left,
hsl(0, 0%, 82%) 14.29%,
hsl(54, 100%, 50%) 14.29%,
hsl(54, 100%, 50%) 28.57%,
hsl(184, 100%, 50%) 28.57%,
hsl(184, 100%, 50%) 42.86%,
hsl(121, 98%, 42%) 42.86%,
hsl(121, 98%, 42%) 57.14%,
hsl(320, 93%, 37%) 57.14%,
hsl(320, 93%, 37%) 71.43%,
hsl(349, 100%, 50%) 71.43%,
hsl(349, 100%, 50%) 85.71%,
hsl(240, 100%, 38%) 85.71%
);
position: relative;
overflow: hidden;
}
body:before {
content: "";
position: absolute;
display: block;
background-image: linear-gradient(
left,
hsl(240, 100%, 38%) 14.29%,
hsl(0, 0%, 0%) 14.29%,
hsl(0, 0%, 0%) 28.57%,
hsl(320, 93%, 27%) 28.57%,
hsl(320, 93%, 27%) 42.86%,
hsl(0, 0%, 0%) 42.86%,
hsl(0, 0%, 0%) 57.14%,
hsl(184, 100%, 50%) 57.14%,
hsl(184, 100%, 50%) 71.43%,
hsl(0, 0%, 0%) 71.43%,
hsl(0, 0%, 0%) 85.71%,
hsl(0, 0%, 82%) 85.71%
);
background-image: linear-gradient(
to left,
hsl(240, 100%, 38%) 14.29%,
hsl(0, 0%, 0%) 14.29%,
hsl(0, 0%, 0%) 28.57%,
hsl(320, 93%, 27%) 28.57%,
hsl(320, 93%, 27%) 42.86%,
hsl(0, 0%, 0%)...