JSFiddle - React, Tailwind, and code Playground

by navjot singh

HTML

<a href="#__spooky_auth_popup">Open Modal</a>

<div id="__spooky_auth_popup" class="modalDialog">
	<div id="__spookyPopup">
		<a href="#close" title="Close" class="close">X</a>
	
					
					
						<div class="profile_container">
				
							<div class="profile_div"></div>
						</div>
								<div class="head_div">
								<p style="margin:0;padding:0;text-align:center;
								  font-size:25px;color:#8d8686;"><I>Hey, please login to access your private content.</I></p>
								</div>
					
					
					<div class="media_layer">
					
							 <div class="social collapse" tabindex="1">
							 <p style="margin:0;padding:0;text-align:center;
								  font-size:25px;color:#000;line-height:50px;">SOCIAL</p>
							 </div>
							 
							 
							<div class="manual">
							 <p style="margin:0;padding:0;text-align:center;
								  font-size:25px;color:#000;line-height:50px;">MANUAL</p>
							</div>
							
							
					</div>
					
	
						
	
	
					<div class="collapse"  style="float:right;" tabindex="1">
					  <a>Collapse 1</a>
					 <div class="social_link_container"  style="float:left;">Content internal 1....</div>
					</div>

					<div class="collapse" style="float:left;" tabindex="1">
					  <a>Collapse 2</a>
					  <div  class="social_link_container" >Content internal 2....</div>
					</div>
					
					</div>
</div>

CSS

.modalDialog {
					position: fixed;
					font-family: Arial, Helvetica, sans-serif;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					background: rgba(0,0,0,0.8);
					z-index: 99999;
					opacity:0;
					-webkit-transition: opacity 400ms ease-in;
					-moz-transition: opacity 400ms ease-in;
					transition: opacity 400ms ease-in;
					pointer-events: none;
				}

				.modalDialog:target {
					opacity:1;
					pointer-events: auto;
				}

				.modalDialog > #__spookyPopup {
					width: 400px;
					position: relative;
					margin: 10% auto;
					padding: 5px 20px 13px 20px;
					border-radius: 10px;
					background: #fff;
					background: -moz-linear-gradient(#fff, #999);
					background: -webkit-linear-gradient(#fff, #fff);
					background: -o-linear-gradient(#fff, #999);
				}



				.profile_container
				{				
				height:160px;
				width:400px;			
				background:#ccc;	
				display:inline-block;				
				}
				.profile_div
				{
				height:120px;
				width:130px;	
				margin-top:20px;
				margin-left:130px;				
				background:#ddd;	
				border:1px solid grey;
				}
				.head_div
				{
				min-height:12px;
				width:100%;							
							
				}
				
				.media_layer
				{
				margin-top:20px;
				mi-height:12px;
				width:400px;			
				background:#;	
				display:inline-block;				
				}
				
				
				.manual
				{
				height:50px;
				width:197px;
				float:right;				
				background:#;
				display:inline-block;					
			
				}
				.manual:hover
				{
					border-bottom:2px solid #ab0a72;	
				}
				.social
				{
				
				height:50px;
				width:197px;							
				background:#;	
				
				display:inline-block;
				
				}
				.social:hover
				{
					border-bottom:2px solid...