JSFiddle - React, Tailwind, and code Playground

HTML

<div>
	<span></span>
	<span></span>
</div>

CSS

div {overflow:hidden;position:relative;width:340px;padding-top:1px;margin:auto;}
div {-moz-transform-origin:50% 0;-webkit-transform-origin:50% 0;-ms-transform-origin:50% 0;-o-transform-origin:50% 0;transform-origin:50% 0;}
span:first-child {position:absolute;width:320px;height:340px;top:98px;border:solid #222;border-radius:20px;}
span:first-child {-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
span+span {position:relative;display:block;height:210px;margin-top:200px;box-shadow:0 0 200px 50px #000 inset;background:#fff;border-radius:6px;}

JavaScript

var div	= document.querySelector("div"),
	maxAngle = 33,
	sens = 1, angle = 0;

function anime(){
	sens = (angle == maxAngle) ? -1 : 1;
	var doAnime = setInterval(function(){
		angle += 1 * sens;
		div.style.cssText = 
			"-moz-transform:rotate("+ angle +"deg);"+
			"-webkit-transform:rotate("+ angle +"deg);"+
			"-ms-transform:rotate("+ angle +"deg);"+
			"-o-transform:rotate("+ angle +"deg);"+
			"transform:rotate("+ angle +"deg);";
		if (angle >= maxAngle && sens == 1 || angle == -maxAngle && sens == -1) {
			clearInterval(doAnime);
			anime();
		}
	}, 14);
}

window.addEventListener("load", anime, false);
anime();