JSFiddle - React, Tailwind, and code Playground
HTML
<a href="#" data-modal>open modal here</a>
<div class="modal">
<div class="modal-close">CLOSE</div>
<div class="modal-content">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis cursus pulvinar. Sed tincidunt felis lorem, et semper mi venenatis at. Vivamus eu tincidunt quam. Donec nec interdum neque. Vivamus in porta diam, quis ultrices orci. Morbi vitae
consectetur lectus. Nam eu commodo augue, vitae porttitor turpis. Donec vitae suscipit elit. Maecenas euismod leo eros, sed luctus nisi vestibulum ac. Curabitur dui eros, ornare eu purus ut, viverra auctor neque. Etiam neque enim, condimentum
et aliquam eget, sagittis at ligula. In risus justo, elementum ac tellus id, egestas consequat odio. Maecenas tortor ipsum, porta ornare sapien eu, lobortis pellentesque urna. Sed vel dictum massa, iaculis bibendum orci. Vestibulum at libero dui.
Suspendisse nec nisi quis dui ornare sagittis. Fusce nec congue neque. Proin ullamcorper neque vel est mattis, id ullamcorper metus elementum. Proin vitae odio tincidunt, semper ipsum in, aliquet ex. Aliquam sit amet auctor leo. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla iaculis mi ut sem ultricies commodo. Sed efficitur molestie luctus. Sed lacinia leo orci, mollis dignissim sapien lacinia quis. In ac nulla in diam mattis scelerisque.
Integer eget ipsum turpis. In quis egestas quam, quis ultricies quam. Etiam volutpat posuere massa sed vehicula. Vestibulum condimentum arcu libero, sed commodo lacus facilisis id. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Maecenas vulputate accumsan nulla. Aliquam leo leo, facilisis sed diam in, cursus suscipit nibh. Donec gravida tellus id iaculis facilisis. Aliquam ut ultricies urna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut viverra, orci
ac consectetur sagittis, arcu nibh faucibus odio, et iaculis mauris nunc...
CSS
* {
box-sizing: border-box;
}
.modal {
display: none;
z-index: 700;
position: fixed;
/* center */
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
/* end- center */
width: calc(100vw - 40px);
max-width: 650px;
height: fit-content;
max-height: calc(100vh - 40px);
overflow: auto;
padding: 40px 20px;
border: 10px solid #000;
background-color: #fff;
}
.modal-close {
position: absolute;
z-index: 700;
top: 10px;
right: 10px;
}
JavaScript
$("[data-modal]").click(function(e) {
e.preventDefault();
var modal = $(".modal"); // modal you want to interact with
modal.css("display", "block");
});