JSFiddle - React, Tailwind, and code Playground

HTML

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

<div id="openModal" class="modalDialog">
	<div>
		<a href="#close" title="Close" class="close">X</a>
		<hm1>THE BASICS</hm1>
<hr>
<hm2>The Box combines brain teasing and practical challenges that are woven into an exciting scripted storyline. You and your guests will be talking of nothing else for days after. </hm2>
<hr>
<hm3>What Happens?</hm3>
<p>You and your guests will be initiated into their teams and primed for the adventure that awaits.</p>
</br>
<pm>A table of intricately displayed items will be revealed, leaving it then up to you and your team to decipher and find the many challenging puzzles, riddles and hidden items which will finally decode and unlock The Box. But remember, time is of the essence, and you will not only be against our clock, but also the opposing team(s) too!</pm>

<hm3>Games</hm3>
<p>So far we have released three of our revolutionary challenging games. Each is different, but all will test you compellingly to your limits. You can browse through our current selection of games <a href="http://www.challenge-the-box.com/games" target="_parent">Here</a>. If that's not enough we also offer a <a href="http://www.challenge-the-box.com/wp-content/uploads/build.html">Build Your Own</a> option so we can tailor a game specifically for any occasion or theme you may have.</P>
</br>
<p>Our games are recommended for a minimum of 2 players. A maximum number of 4 players per table is recommended otherwise it can get too overcrowded! Each standard game comes with 2 tables. If you'd like more players then you can purchase additional ones in the Extra's section of the <a href="http://www.challenge-the-box.com/booking" target="_parent">Booking</a> form.</P>

<h3>Timing</h3>
<p>You will have a 30 minute briefing and then exactly ONE hour to solve the clues and challenges upon your teams table, to finally give you the key to unlock The Box</P>
</br>
<p>If our games are not already sounding exciting enough as they are, rest...

CSS

/* custom modal */

.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 > div {
	width: 750px;
	position: relative;
	margin: 10% auto;
	padding: 5px 20px 13px 20px;
	border-radius: 10px;
	background: #f3eedd;
	max-height: calc(100vh - 210px);
	overflow-y:auto;
    overflow-x:hidden;
}

.close {
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; }

  hm1 {
    font-family: 'Londrina Sketch', cursive;
	color: #c13e18;
	font-size: 50px;
	text-align: center;
	margin: 0px 30px 0px 30px;
}

hm2 {
	font-size: 20px;
	color: #c13e18;
	margin: 10px 30px 10px 30px;
}
 hm3 {
	font-size: 20px;
	margin: 30px 30px 0px 30px;
}

 
	pm {
	font-size: 20px;
	margin: 0px 30px 0px 30px;
	
}