Free Open Source Tailwind CSS Starter Component

Simple Modal

Based on:


Buy Me A Coffee



The code for the starter component which you can drop into your existing project.

<!DOCTYPE html>
<html lang="en">
  <title>Tailwind CSS Modal</title>
  <link href="" rel="stylesheet">  
    .modal {
      transition: opacity 0.25s ease;
    body.modal-active {
      overflow-x: hidden;
      overflow-y: visible !important;

<body class="relative bg-gray-100 font-sans leading-normal tracking-normal">
  <div class="container mx-auto text-center pt-12">

    <div class="py-12">
      <button class="modal-open bg-indigo-500 p-3 rounded-lg text-white hover:bg-indigo-400">Open Modal</button>
      <p class="py-4">or</p>
        <a href="#" class="modal-open text-indigo-500 underline hover:text-indigo-400">Open Modal</a>
      <div class="modal opacity-0 pointer-events-none fixed w-full h-full top-0 left-0 flex items-center justify-center">
        <div class="modal-overlay absolute w-full h-full bg-gray-900 opacity-50 top-0 left-0 cursor-pointer"></div>
        <div class="modal-close absolute top-0 right-0 cursor-pointer mt-2 mr-4 text-white font-bold">[X] Close (or Esc)</div>
        <div class="z-50 w-5/6 md:w-1/2 md:max-w-md bg-white rounded-lg shadow-2xl mx-2 md:mx-0 p-4">

        <div class="modal-title flex justify-between items-center pb-2">
          <p class="text-2xl font-bold">Simple Modal!</p>
	  <div class="modal-close cursor-pointer">
	    <svg class="fill-current text-black" xmlns="" width="18" height="18" viewBox="0 0 18 18"><path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path></svg>
        <div class="modal-body py-4 text-left">
          <p>Modal message can go here</p>

        <div class="modal-footer flex justify-end pt-2">
          <button class="px-4 bg-transparent p-3 rounded-lg text-indigo-500 hover:bg-gray-100 hover:text-indigo-400 mr-2">Action</button>
          <button class="modal-close px-4 bg-indigo-500 p-3 rounded-lg text-white hover:bg-indigo-400">Close</button>

var openmodal = document.querySelectorAll('.modal-open')
for (var i = 0; i < openmodal.length; i++) {
  openmodal[i].addEventListener('click', function(event){

const overlay = document.querySelector('.modal-overlay')
overlay.addEventListener('click', toggleModal)

var closemodal = document.querySelectorAll('.modal-close')
for (var i = 0; i < closemodal.length; i++) {
  closemodal[i].addEventListener('click', toggleModal)

document.onkeydown = function(evt) {
  evt = evt || window.event
  var isEscape = false
  if ("key" in evt) {
    isEscape = (evt.key === "Escape" || evt.key === "Esc")
  } else {
    isEscape = (evt.keyCode === 27)
  if (isEscape && document.body.classList.contains('modal-active')) {

function toggleModal () {
  const body = document.querySelector('body')
  const modal = document.querySelector('.modal')



Find more components at: