In this tutorial, we will create responsive modal in react js using tailwind css. We will see reusable modal component, A fully-managed, renderless dialog component with headless ui Tailwind CSS & React.
Tool Use
React JS
Tailwind CSS 3.v
Headless UI
First you need to setup react project with tailwind css. You can install manually or you read below blog.
How to install Tailwind CSS in React
Install & Setup Vite + React + Typescript + Tailwind CSS 3
Example 1
Create simple dialog modal using tailwind and react js.
Modal.jsx
import { useState } from "react";
export default function Modal() {
const [showModal, setShowModal] = useState(false);
return (
<>
<div className="flex items-center justify-center h-60">
<button
className="px-6 py-3 text-purple-100 bg-purple-600 rounded-md"
type="button"
onClick={() => setShowModal(true)}
>
Open Modal
</button>
</div>
{showModal ? (
<>
<div className="fixed inset-0 z-10 overflow-y-auto">
<div
className="fixed inset-0 w-full h-full bg-black opacity-40"
onClick={() => setShowModal(false)}
></div>
<div className="flex items-center min-h-screen px-4 py-8">
<div className="relative w-full max-w-lg p-4 mx-auto bg-white rounded-md shadow-lg">
<div className="mt-3 sm:flex">
<div className="flex items-center justify-center flex-none w-12 h-12 mx-auto bg-red-100 rounded-full">
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-6 h-6 text-red-600"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
clipRule="evenodd"
/>
</svg>
</div>
<div className="mt-2 text-center sm:ml-4 sm:text-left">
<h4 className="text-lg font-medium text-gray-800">
Delete account ?
</h4>
<p className="mt-2 text-[15px] leading-relaxed text-gray-500">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore
et dolore magna aliqua.
</p>
<div className="items-center gap-2 mt-3 sm:flex">
<button
className="w-full mt-2 p-2.5 flex-1 text-white bg-red-600 rounded-md outline-none ring-offset-2 ring-red-600 focus:ring-2"
onClick={() =>
setShowModal(false)
}
>
Delete
</button>
<button
className="w-full mt-2 p-2.5 flex-1 text-gray-800 rounded-md outline-none border ring-offset-2 ring-indigo-600 focus:ring-2"
onClick={() =>
setShowModal(false)
}
>
Cancel
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</>
) : null}
</>
);
}
tailwind react modal
Example 2
Create short hand react with tailwind reusable modal component.
Components/Modal.jsx
import React from "react";
export default function Modal({ setOpenModal }) {
return (
<>
<div className="fixed inset-0 z-10 overflow-y-auto">
<div
className="fixed inset-0 w-full h-full bg-black opacity-40"
onClick={() => setOpenModal(false)}
></div>
<div className="flex items-center min-h-screen px-4 py-8">
<div className="relative w-full max-w-lg p-4 mx-auto bg-white rounded-md shadow-lg">
<div className="mt-3 sm:flex">
<div className="flex items-center justify-center flex-none w-12 h-12 mx-auto bg-red-100 rounded-full">
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-6 h-6 text-red-600"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
clipRule="evenodd"
/>
</svg>
</div>
<div className="mt-2 text-center sm:ml-4 sm:text-left">
<h4 className="text-lg font-medium text-gray-800">
Delete account ?
</h4>
<p className="mt-2 text-[15px] leading-relaxed text-gray-500">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
<div className="items-center gap-2 mt-3 sm:flex">
<button
className="w-full mt-2 p-2.5 flex-1 text-white bg-red-600 rounded-md outline-none ring-offset-2 ring-red-600 focus:ring-2"
onClick={() => setOpenModal(false)}
>
Delete
</button>
<button
className="w-full mt-2 p-2.5 flex-1 text-gray-800 rounded-md outline-none border ring-offset-2 ring-indigo-600 focus:ring-2"
onClick={() => setOpenModal(false)}
>
Cancel
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</>
);
}
App.jsx
import React, { useState } from "react";
import Modal from "./Components/Modal";
export default function App() {
const [showModal, setShowModal] = useState(false);
return (
<div className="flex flex-col items-center justify-center h-60">
<h1 className="text-2xl font-bold">
Click on the button to open the modal.
</h1>
<button
className="px-4 py-2 text-purple-100 bg-purple-600 rounded-md"
type="button"
onClick={() => {
setShowModal(true);
}}
>
Open Modal
</button>
{showModal && <Modal setOpenModal={setShowModal} />}
</div>
);
}
Example 3
You can use modal using headless ui. Headless Ui is a A fully-managed, renderless dialog component jam-packed with accessibility and keyboard features, perfect for building completely custom modal and dialog windows for your next application.
Install Headless UI
To get started, install Headless UI via npm:
npm install @headlessui/react
Modal.jsx
import { Dialog, Transition } from '@headlessui/react'
import { Fragment, useState } from 'react'
export default function MyModal() {
let [isOpen, setIsOpen] = useState(true)
function closeModal() {
setIsOpen(false)
}
function openModal() {
setIsOpen(true)
}
return (
<>
<div className="fixed inset-0 flex items-center justify-center">
<button
type="button"
onClick={openModal}
className="px-4 py-2 text-sm font-medium text-white bg-black rounded-md bg-opacity-20 hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
>
Open dialog
</button>
</div>
<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative z-10" onClose={closeModal}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-black bg-opacity-25" />
</Transition.Child>
<div className="fixed inset-0 overflow-y-auto">
<div className="flex items-center justify-center min-h-full p-4 text-center">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className="w-full max-w-md p-6 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl">
<Dialog.Title
as="h3"
className="text-lg font-medium leading-6 text-gray-900"
>
Payment successful
</Dialog.Title>
<div className="mt-2">
<p className="text-sm text-gray-500">
Your payment has been successfully submitted. We’ve sent
you an email with all of the details of your order.
</p>
</div>
<div className="mt-4">
<button
type="button"
className="inline-flex justify-center px-4 py-2 text-sm font-medium text-blue-900 bg-blue-100 border border-transparent rounded-md hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
onClick={closeModal}
>
Got it, thanks!
</button>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition>
</>
)
}
Read Also
React Tailwind CSS Accordion (FAQ) Example
React Tailwind CSS Tabs Examples
How to use Tailwind CSS 3 with Headless UI In React
Toggle Switch in React JS with Tailwind CSS Example
Create Reusable Button Component with React & Tailwind CSS
React Tailwind CSS Search Bar Example
React Tailwind CSS Sidebar Example
React JS Login Form with Tailwind CSS Example
React Responsive Navbar Menu With Tailwind CSS Example
How to install Tailwind CSS in React
React Tailwind CSS Dialog (Modal) Example
React Tailwind Registration Form Example