JSFiddle - React, Tailwind, and code Playground

by RkDekkard

HTML

<html>
<head>

</head>
<body>
	
  <h1>
  Some text
  </h1>
  
	<div class="spotlight spot1"></div>
  
</body>
</html>

CSS

h1 {
  color: green;
  position: absolute;
}
  
		body { 
    background-color: black;  
    overflow: hidden; 
    margin: 0;
 }
 

		
    .spotlight {
		  position: relative;
			width: 10vw;
			height: 0vh;
 			border-top: 100vh solid rgba(255, 255, 255, 0.25);
			border-left: 12vw solid transparent;
			border-right: 12vw solid transparent;
			background-color: transparent;
			-webkit-transform-origin: 50% 100% 0;
			z-index: 0;
      -webkit-animation: move 7s ease-in-out;
		}
    
		 @-webkit-keyframes move {
		  0%  { 
		    -webkit-transform: rotate(-30deg) scaleX(0.4);
		  }
		  50% {
		    -webkit-transform: rotate(30deg) scaleX(0.4);
		  }
		  100% {
		    -webkit-transform: rotate(0deg) ;
		  }
		}