JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Making Popups Without JavaScript is Simple!</h1>   
	<p>(When you know what to copy/paste without figuring it out, that is).</p>      

	<div>    
		<input type="checkbox" id="our-popup" />
		<label for="our-popup">Click on this to make the popup appear</label>   

		<!-- invisible; when checked, the popup opens -->    
		<label for="our-popup" class="overlay"></label>        

		<!-- the popup starts here -->        
		<div class="overlay-dialogue">     
			<h2>Whatever you Need to Write</h2>     
			<p>Content goes here</p>     
			<label for="our-popup">Close</label>    
		</div>   
	</div>         
	<div>    
		<input type="checkbox" id="our-popup-2" class="smoosh" />
		<label for="our-popup-2">Click here to invoke the second popup</label>   

		<!-- invisible; when checked, the popup opens -->    
		<label for="our-popup-2" class="overlay"></label>        

		<!-- the popup starts here -->        
		<div class="overlay-dialogue">     
			<h2>Popup 2</h2>     
			<p>Content goes here</p>     
			<label for="our-popup-2">Close</label>    
		</div>   
	</div>

CSS

input[type=checkbox]:checked ~ label.overlay {  
	display: block;  
	z-index: 500;
} 

div.overlay-dialogue {  
	position: fixed;  
	display: none;
	width: 50%;  
	left: 20%;  
	top: 15%;  
	bottom: 15%;
	background: whitesmoke; 

  /* Add drop shadow
  horz-pos, vert-pos, blur amount, size of shadow, color */
  -webkit-box-shadow: 5px 5px 20px 5px #222;
  -moz-box-shadow: 5px 5px 20px 5px #222;
  box-shadow: 5px 5px 20px 5px #222;
 
  /* Rounded image corners */
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
} 

/* ~ if in the same parent, there is a div of class overlay-dialogue */
input[type=checkbox]:checked ~ div.overlay-dialogue {  
	display: block; 
	z-index: 505; /* way on top of the page */
} 


div.overlay-dialogue {  
	padding: 20pt 5% 20pt 5%;  
	overflow-y: auto;  
	animation: ANIM_NAME 0.5s ease-in-out; 
} 

@keyframes ANIM_NAME {  
	0% {
		-webkit-transform: translate3d(0, 0, 0) rotateY(55deg); 
		-moz-transform: translate3d(0, 0, 0) rotateY(55deg); 
		transform: translate3d(0, 0, 0) rotateY(55deg); 
		opacity: 0;
	}  
	100% {
		-webkit-transform: translate3d(0, 0, 0) rotateY(0deg); 
		-moz-transform: translate3d(0, 0, 0) rotateY(0deg); 
		transform: translate3d(0, 0, 0) rotateY(0deg); 
		opacity: 1;
	} 
} 

@-webkit-keyframes ANIM_NAME {  
	0% {
		-webkit-transform: translate3d(0, 0, 0) rotateY(55deg); 
		-moz-transform: translate3d(0, 0, 0) rotateY(55deg); 
		transform: translate3d(0, 0, 0) rotateY(55deg); 
		opacity: 0;
	}  
	100% {
		-webkit-transform: translate3d(0, 0, 0) rotateY(0deg); 
		-moz-transform: translate3d(0, 0, 0) rotateY(0deg); 
		transform: translate3d(0, 0, 0) rotateY(0deg); 
		opacity: 1;
	} 
} 

@-moz-keyframes ANIM_NAME {  
	0% {
		-webkit-transform: translate3d(0, 0, 0) rotateY(55deg); 
		-moz-transform: translate3d(0, 0, 0) rotateY(55deg); 
		transform: translate3d(0, 0, 0) rotateY(55deg); 
		opacity: 0;
	}  
	100% {
		-webkit-transform: translate3d(0, 0, 0) rotateY(0deg);...