JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container-fluid lights">
<div class="row inner-lights">
<div class="probe"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div...
CSS
.lights{
overflow:hidden;
}
.inner-lights{
position:absolute;
z-index:-2;
background:#040044;
overflow:hidden;
}
.probe{
position:absolute;
z-index:-1;
background-color:#DF68BA;
width:50px;
height:100%;
animation:strobe 2s steps(18, start) infinite;
-webkit-animation:strobe 2s steps(18, start) infinite;
border-radius:10px;
-webkit-box-shadow: 0px 0px 150px 10px rgba(223,104,186,0.75);
-moz-box-shadow: 0px 0px 150px 10px rgba(223,104,186,0.75);
box-shadow: 0px 0px 150px 10px rgba(223,104,186,0.75);
}
.probe-2{
left:50px;
background-color:blue;
}
.light{
float:left;
display:inline-block;
width:50px;
height:50px;
position:relative;
overflow:hidden;
}
.light:before{
content:'';
position:absolute;
left:5px;
top:5px;
width:40px;
height:40px;
border-radius:15px;
box-shadow:0 0 0 50px #010133;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
}
.home-header{
position:relative;
width:70%;
margin:auto;
text-align:center;
color:white;
padding-top:60px;
}
.home-header h1{
font-size:120px;
}
.home-header p{
font-size:30px;
}
@keyframes strobe{
0%{
transform:translateX(0);
}
100%{
transform:translateX(1800%);
}
}
@-webkit-keyframes strobe{
0%{
transform:translateX(0);
}
100%{
transform:translateX(1800%);
}
}