JSFiddle - React, Tailwind, and code Playground

by vovkasolovev

HTML

<div class="bg"></div>
<div class="container">
</div>

CSS

body{background:#d2d2d2;margin: 0}
.bg{background: red; width: 300px; height: 150px;}


.container {
	position: absolute;
	width: 200px;
	height: 200px;
  left: 50px;
  top: 50px;
  animation: spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.container,.container:before, .container:after {border-radius: 30px;}

.container:before{
    box-shadow: -10px -10px 20px 0 rgba(255,255,255,0.7);
	mix-blend-mode: screen;
	content: " ";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;}

.container:after{
    box-shadow: 10px 10px 20px 0 rgba(0,0,0,0.3);
	mix-blend-mode: multiply;
	content: " ";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;}