React Popup Modal With Tailwind CSS

MERN Bootcamp: www.udemy.com/course/mern-sta...
In this video we will take a look at how we can create modal using react and tailwindcss.
Starter Codes: gist.github.com/ndpniraj/a3f1...
Final Code: www.uifreebee.com/components/...
Timestamps
Introduction: 00:00
Project Setup: 01:02
What is Tailwind CSS: 02:41
Creating Modal: 03:50
Social Media Links
Instagram - / ndpniraj
Twitter - / ndpniraj
Linkedin - / niraj-dhungana-23387b207
#tailwindcss #react

[@raggedprogram1607]

spend 5 hours to intregate shadcn on my project , then preline an mamba ui , then found your video. very easy and main thing is it's totally customizable

[@juanhedderich]

Thank you very much, I was going to use the react-modal package but it was a pain to style, thanks to you I can make my modals from scratch!!

[@lokeshvasnik6872]

same bro

[@PremasisSatman]

Hi Niraj, thank you for this tutorial. I was exactly searching for this and found it. very helpful. GB.

[@ricardotsopse6836]

Great tuto man its dope .Exactly what I was looking for, you got a new subscriber to your channel

[@ognjenvojnovic9778]

Great man, great!

[@Alieaz]

This is a fantastic tutorial! Thanks

[@sergiomirazo3120]

The best tutorial, thanks!

[@aldrinmabanta]

This is awesome Niraj!

[@NameFirst834]

Best modal tutorial, not kidding !

[@arafatsbackup-data8027]

just awesome

[@itzblinkzy1728]

Wonderful tutorial. Thank you a lot.

[@afribook4253]

Hi, Niraj. All your tutorials are awesome. Please can you do a Full Stack Blog App with Next Js, Tailwind CSS and Mongo Db

[@avinashrai4369]

Your content helps me a lot😍 thank you

[@masrafi09304]

That's a beneficial video, Thank you!💌

[@sanketss84]

super awesome stuff. really helpful.

[@SahosMia]

Thank a lot, Really it was good video as I want.

[@simonmiller5378]

You are awesome, this was so insanely helpful

[@fsniraj]

Glad you think so!

[@somebody-17546]

thank you very much. I stuck with it for 1 hour. For a silly mistake. I use absolute position instead of fixed for modal

[@fsniraj]

Glad it helped!

[@selindemircioglu3502]

thank you it was really helpful

[@PeriklesPeriklesoglu]

thank you

[@joesuarez6322]

Thank you bro!

[@amitsillarkar2609]

thank you so much bro

[@Curmyyy]

How can i disable the scrolling if the modal is open

[@justinkm6133]

Thanks bro... 👍

[@HasanurRahman-qu2xj]

That is great

[@namanrajput7686]

how a add backgrond animation on that. when we click on open model then it background blur slowly. same on exit

[@demicoderr]

I think you could add a transition-bg property on the modal and specify the duration and all.

[@Ninoskaaw]

thanks

[@wassup102]

thanks sir

[@4ka01_alifmurtiprakoso]

i follow this tutorial and it's great and working, but how to make this modal become responsive in small screen?

[@fsniraj]

You can use Tailwinds responsive classes like md: or sm: or normal media queries if you are using vanilla CSS.

[@beginnerwithcode]

👍👍👍👍

[@ShaliniSingh-mv3ie]

Please make a video on class time table management system software using Java only please.....

[@fsniraj]

I don't know how to do that.

[@smarttechinfo4512]

Can we open a model with the help of redux toolkit?

[@fsniraj]

Sure you can directly use the useSelector hook inside your modal to retrieve the value of visible state and return null or the modal or you can do that from the component where you are rendering modal and pass visible as the prop like above.

[@smarttechinfo4512]

@@fsniraj thank you

[@kacperkepinski4990]

its the same like in normal css....

[@MuhammadAhmad-bx2rw]

React native?. (

[@fsniraj]

Don't worry those will come.

[@DB-dk2mj]

Waist of time sorry, i was searching for logical solution like you have 'use client' component with children so you can use it on your server components via hydration - and this one just another strange 'indian' way of doing thing)))

[@fsniraj]

Yes the title says React with Tailwind. But thanks for checking out.

[@ved4171]

Your teaching style is really great....I am in procesa of learning Javascript through course by Jonas and REACT through Academind on Udemy...Once I finish those then I will definitely buy your course on Udemy...Really excited to buy your course after completing JS and REACT. Also please give a suggestion...companies will come after 2 months in my college, so how much should do in both JS and REACT, and which projects will I be able to complete in just 1.5-2 months...OR should I focus on making more projects using only HTML, CSS & JS. Also I need some urgent advice from you regarding placements...Can I contact you on Insta? Please reply bhaiya

[@fsniraj]

First of all thank you very much for your compliments. And I have never sat on interviews or take any programming jobs. Because I never learnt it for a job. And I never went to college. So you are asking the question with wrong person. Sorry man.

[@ved4171]

@@fsniraj Thanks for the reply...You have worked very hard and made 41 hours of course...I will definitely buy it later...Please keep making video like this...👍