JSFiddle - React, Tailwind, and code Playground

by fredd man

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
  <title>Tailwind CSS Full Screen Modal</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">  
  <style>
    .modal {
    transition: opacity 0.25s ease;
    }
    body.modal-active {
    overflow-x: hidden;
    overflow-y: visible !important;
    }
    .opacity-95 {opacity: .95;}
  </style>
</head>
<body class="bg-gray-900 flex items-center justify-center h-screen">

<button class="modal-open bg-transparent border border-gray-500 hover:border-indigo-500 text-gray-500 hover:text-indigo-500 font-bold py-2 px-4 rounded-full">Open Full Screen Modal</button>

<!--Modal-->
<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-white opacity-95"></div>

  <div class="modal-container fixed w-full h-full z-50 overflow-y-auto ">
    
	<div class="modal-close absolute top-0 right-0 cursor-pointer flex flex-col items-center mt-4 mr-4 text-black text-sm z-50">
      <svg class="fill-current text-black" xmlns="http://www.w3.org/2000/svg" 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>
      (Esc)
    </div>

    <!-- Add margin if you want to see grey behind the modal-->
    <div class="modal-content container mx-auto h-auto text-left p-4">
     
	  <!--Title-->
      <div class="flex justify-between items-center pb-2">
        <p class="text-2xl font-bold">Full Screen Modal!</p>
      </div>

      <!--Body-->
      <p>Modal content can go here</p>
      
      <!--Footer-->
      <div class="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...