JSFiddle - React, Tailwind, and code Playground

by Darren Galway

HTML

<button class="toggle-modal">Toggle Modal</button>

<div class="modal">
    <div class="modal-content-container">
        <div class="modal-header">
            <span>Modal Header</span>
            <button class="close-button">X</button>
        </div>
        <div class="modal-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam ex soluta quas aperiam ipsa modi odit illum nihil nulla expedita quibusdam repellendus rerum, id, magni nesciunt! Cupiditate repellendus ratione nisi.</div>
        <div class="modal-footer">
            <button class="close-button">Cancel</button>
            <button class="close-button">Save</button>
        </div>
    </div>
</div>

CSS

html,
body {
    height: 100%;
    background: #CCC;
}

body {
    font-family: sans-serif;
}

button {
	border: 0;
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 3px;
	text-transform: uppercase;
	letter-spacing: .03rem;
	transition: all 300ms ease;
}

button:focus {
	transform: scale(1.1)
}

.modal {
    position: fixed;
    background: rgba(0, 0, 0, .4);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 300ms ease;
    z-index: -1;
}

.modal.toggle {
    opacity: 1;
    z-index: 4;
}

.modal.toggle > div {
    transform: scale(1);
}

.modal-content-container {
    transition: all 300ms ease;
    transform: scale(.4);
    max-width: 23rem;
    background: #fff;
    border: 1px solid #e5e5e5;
}

.modal-header {
    padding: .5rem;
    background: #e5e5e5;
    display: flex;
    justify-content: space-between;
}

.modal-body {
    padding: 1rem;
}

.modal-footer {
    padding: .5rem;
    border-top: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-between;
}

JavaScript

const showModal = document.querySelector('.toggle-modal')
const modal = document.querySelector('.modal')
const closeButton = document.querySelectorAll('.close-button')
const body = document.querySelector('.modal')

showModal.addEventListener('click', show)
closeButton.forEach(button => button.addEventListener('click', close))

body.addEventListener('click', (e) => {
	if (e.target !== body) {
		return;
	}
	modal.classList.remove('toggle')
})

function show() {
    modal.classList.add('toggle')
}

function close() {
    modal.classList.remove('toggle')
}