JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
		<div id="logo-globo">
			<div class="inside"></div>
		    <div class="top-grad"></div>
		    <div class="bottom-grad"></div>
		    <div class="square">
		    	<div class="globo2">
		    		<div class="globo2-inside"></div>
		    		<div class="globo2-top-grad"></div>
		    		<div class="globo2-bottom-grad"></div>		
		    	</div>	
		    </div>
		</div>
	</div>
	<h1>css a gente se liga em você.</h1>
	<h1 class="maldito">IE a gente ainda não se liga em você.</h1>

CSS

body{
		background: rgb(255,255,255); 
		background-repeat: no-repeat; 
		background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0.98) 35%, rgba(161,161,171,0.95) 99%, rgba(161,161,171,0.95) 100%);  
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(35%,rgba(255,255,255,0.98)), color-stop(99%,rgba(161,161,171,0.95)), color-stop(100%,rgba(161,161,171,0.95))); 
		background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.98) 35%,rgba(161,161,171,0.95) 99%,rgba(161,161,171,0.95) 100%); 
		background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.98) 35%,rgba(161,161,171,0.95) 99%,rgba(161,161,171,0.95) 100%); 
		background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.98) 35%,rgba(161,161,171,0.95) 99%,rgba(161,161,171,0.95) 100%); /
		background: linear-gradient(to top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.98) 35%,rgba(161,161,171,0.95) 99%,rgba(161,161,171,0.95) 100%); 
	}

	h1 {
		padding-top: 30px;
		color: #45556e;
		font-size: 50px;
		font-family: 'Cookie', 'trebuchet ms', 'arial', cursive;
		text-align: center;
	}
	.maldito{display: none;}/*IE SEU LIXO*/

	#content{
		position: relative;
		margin: 0 auto;
		width: 600px;
		height: 400px;
	}
	
	#logo-globo{
		 margin: 100px auto;
		 position:absolute;
		 top: 10%;
		 left: 50%;
		 overflow: hidden;
		 margin-left: -150px;
		 width:300px;
		 height:300px;
		 border-radius: 50%;
		 background:#232436;
		 background-image: -webkit-radial-gradient(circle, rgba(0,0,0,0) 50%, rgba(0,0,0,.6));
		 background-image: -moz-radial-gradient(circle, rgba(0,0,0,0) 50%, rgba(0,0,0,.6));
		 background-image: -o-radial-gradient(circle, rgba(0,0,0,0) 50%, rgba(0,0,0,.6));
		 background-image: -ms-radial-gradient(circle, rgba(0,0,0,0) 50%, rgba(0,0,0,.6));
		 background-image: radial-gradient(circle, rgba(0,0,0,0) 50%, rgba(0,0,0,.6));
	}

	#logo-globo div{position:...