JSFiddle - React, Tailwind, and code Playground

by sm1215

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<div class="modal"><a href="#" class="close-modal">Close</a>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed nunc dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed auctor justo in diam maximus, et pulvinar massa sollicitudin. Mauris lectus felis, laoreet rutrum aliquam vel, lacinia non nibh. Fusce consequat sit amet nulla consequat laoreet. Mauris sodales mollis dolor, a consectetur nisl mollis ut. Nullam et ipsum tristique, pellentesque leo a, sollicitudin lacus. In mattis euismod magna eu tristique. Morbi iaculis malesuada ultricies. Ut semper ante dui, id semper dui convallis quis. Phasellus varius ante faucibus nisi congue pellentesque.</p>

<p>Nam faucibus interdum pellentesque. Aenean non eros pellentesque lorem gravida luctus non fringilla erat. Vestibulum facilisis condimentum tristique. Mauris condimentum suscipit tellus, at sagittis mauris laoreet a. Nunc tristique elit sed lacus ultrices, at aliquam dui lobortis. Nullam vitae metus vitae orci gravida aliquet. Aliquam sodales, neque eget finibus interdum, dui mi consectetur felis, sed rhoncus neque elit nec justo. Fusce sodales maximus diam, eget gravida mauris dignissim ac. Mauris eget tellus at sapien auctor mattis nec et massa. Aenean auctor rhoncus erat, vel posuere nisl. Proin aliquet ligula felis, quis laoreet sem aliquet quis. Pellentesque sit amet quam vel turpis gravida porta id et massa. Sed non eleifend orci.</p>

<p>Nam ac vestibulum odio. Aenean vitae fermentum neque. Aliquam erat volutpat. Maecenas feugiat sapien id sodales dapibus. Integer sagittis libero et molestie bibendum. Donec lobortis velit massa, vitae suscipit ligula commodo a. Aenean pharetra ullamcorper aliquet. Nunc porttitor nibh leo, nec suscipit risus venenatis condimentum. Maecenas interdum egestas sollicitudin. Donec et bibendum dui. Proin eu sapien...

CSS

p{
	color:red;
}

.modal{
	display:none;
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background-color:blue;
	padding:30px 20px;
	height:100rem;
}

.modal.open{
	display:block;
}

.modal p{
	color:white;
}

.close-modal{
	position:absolute;
	top:20px;
	right:20px;
	height:20px;
	width:100%;
	border-bottom:1px solid white;
	font-family:arial;
	font-size:12px;
	font-weight:900;
	color:red;
	text-align:right;
}

JavaScript

$(document).ready(function(){

})
.on('click', '.open-modal', function(e){
	e.preventDefault();
	$('.modal').addClass('open');
})
.on('click', '.close-modal', function(e){
	e.preventDefault();
	$('.modal').removeClass('open');
})