Create Custom Modal in React with Tailwind CSS | Modal in NextJS with Tailwind

In this tutorial, you'll learn how to create a custom modal or popup in react js with tailwind CSS. Here I have used next js with tailwindcss to create the modal.
I have made total 3 modals, first one is a basic modal with text content in it, for the second one I have created video modal where you can display a RUclips video in the modal, and for the last one I have made a more complex HTML form with tailwind in the modal. So all the major contents which generally you need to add in a modal are covered in this tutorial.
⦿ eCommerce Website Design with Tailwind CSS Tutorial • Design Responsive eCom...
⦿ Login Page in Next JS with Tailwind CSS Tutorial • Create Login Page in N...
⦿ Sidebar Navigation Menu with Tailwind Tailwind CSS Tutorial • Sidebar Navigation Men...
→ Social App with Firebase in React Native Playlist • Social App with Fireba...
→ React navigation v5 tutorial playlist • React Navigation 5 Tut...
→ Food Finder App in React Native Playlist • Food Finder App in Rea...
→ Music App UI Tutorial • Music App UI in React ...
► Timestamps
0:00 Introduction
1:29 Create the NextJS Project with Tailwind CSS
2:50 Create Main Page Layout
4:20 Create Modal
If you found my tutorials helpful, you can buy me a coffee from this link paypal.me/itzpradip
Follow me on Twitter / itzpradip
Follow me on GitHub github.com/itzpradip
Subscribe to my Channel bit.ly/2PaUqOk
For more tutorials on WordPress, React JS, React Native and Flutter visit: www.pradipdebnath.com/blog/

[@lofiwaves2123]

Thanks buddy , been searching for this the whole time!!!

[@go_you_huskies]

Great tutorial! Thank you!

[@Sniksax]

Thank you so much brother, this tutorial is simple clear and easy to follow, keep up the good work !

[@rijwanulhaqueroman3052]

Thank you. It was very easy to understand. You explined everything clearly. Keep up the good work.

[@emilygarcia2094]

Amazing, thank you!

[@awaraamin6850]

Thanks man!

[@cecibenitez3917]

thank you Mister, very nice

[@adminbay1526]

Nice ..make more react and tailwind please I'm learning it from u. Can you make random quiz using react and tailwind?

[@m__link6499]

Thank you sir… but what if I want to display a modal by using a map of an object, instead of hard coding the button like you did? Let’s imagine that you have a list of cards (object) and in each card , we have a button that must display a modal with a content of each card. How will we do please? I can’t find a video on you tube showing that…

[@adminbay1526]

Dude I wanna ask u something. Can u show us If we want to add another components under that modal button...

[@nikafif2211]

Thanks man! really helpful

[@itzpradip]

Glad to hear it!

[@ranggadanendra7691]

thank you so much sir, you are my super hero, now i can finish my job

[@ketutkrisna6565]

aggree😍

[@designerborhan3727]

Thank you brother

[@federicomarceloramirez6650]

Thank you! that´s really help me. I salute you from Argentina.

[@salamunhasan143]

Thank you Boss 💖💖❤❤💖💖

[@directornovela7774]

thanks a lot

[@user-fn3cj2gk5j]

thank you. i learn a lot.

[@itzpradip]

Glad to hear that!

[@mostakahamed6169]

Good job. Easy explanation 🎉

[@itzpradip]

Glad it was helpful!

[@jannatmughal487]

sir i did same like you but when i click on screen my modal is not getting close

[@HazratAlinil]

Great

[@craftsworld3237]

full scrren feature is not working in this modal how can i do it??

[@prabinkarki94]

Sir could you please make video on how to make expo react native app run on android smart TV.

[@FrontendFanatic]

Thanks

[@smarttechinfo4512]

দাদা context api in react native এ একটা ভিডিও আনলে খুব ভালো হয়। love from Behala

[@nandanadileeep]

Is this modal responsive?

[@elberelbatbayar]

its working

[@kKhubaibAlam]

Can you provide this code ?

[@guddisAlex]

how do you avoid scrolling if the page content is scrollable? I tried overflow-y-hidden but that results in jumping content on windows due the scrollbar is being removed!

[@SrinivasaSridhar]

in modal component use this
useEffect(() => {
document.body.style.overflow = "hidden";
return() => {
document.body.style.overflow = "unset";
}
},[isVisible]);

[@wagnercsfilho]

Portals?

[@arhabersham]

Source code?

[@roxxyyroy3404]

But you repeated the code for creating three separate modal. You did not follow code reusability.we should create custom modal component and then then we can use that custom modal component on 3 different case based upon modal content.

[@alexjavierchaflallalao6242]

Yes, that's what I'm looking for for my project!! Do you know of any channels that do that?

[@EswariA-uk9zy]

Not at all clear explaination
After u install when u create index.js app.js file

[@droid-jr9940]

Great tutorial! Thank you!

[@PercivalOVico]

Thanks alot

[@ashas840]

Can you provide this code ?