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 YouTube 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.

► Timestamps
0:00 Introduction
1:29 Create the NextJS Project with Tailwind CSS
2:50 Create Main Page Layout
4:20 Create Modal

[ranggadanendra]

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

[rijwanulhaqueroman]

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

[Sniksax]

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

[lofiwaves]

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

[adminbay]

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

[federicomarceloramirez]

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

[adminbay]

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

[roxxyyroy]

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.

[m__link]

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…

[smarttechinfo]

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

[craftsworld]

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

[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!

[jannatmughal]

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

[prabinkarki]

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

[EswariA-ukzy]

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