Build a Modal Component purely in ReactJS and TailwindCSS

#reactjs #reactjstutorial #modal #tutorial #tailwindcss #webdevelopment
In this video you'll learn how to make a Modal or Dialog Box Component in ReactJS and Tailwind CSS from scratch (without any additional libraries) under 6 minutes, which will be a reusable and customizable component that you can use in your own projects. We will also cover how to add smooth transitions to the Modal Component easily only using Tailwind CSS.
A Modal Component is a common UI element used in many web applications to display content in a popup window. By the end of this video, you will have a working Modal Component that you can use in your ReactJS projects. Whether you are a beginner or an experienced ReactJS developer, you will find value in this tutorial.
Source Code:
gist.github.com/nimone/c2a86e...
Socials:
Instagram: / ycldev
Twitter: / yourcodelab

[@shreyashukla4764]

For anyone wondering, this was the most clear and precise video i could find on this topic. Go for it!!

[@ycldev]

Hey Shreya, thank you for your kind words. I am gald you found the video helpful.

[@stn369]

loves these React plus tailwind tuts, both are my favorite!

[@ycldev]

Mine too!

[@obaidulislam8288]

Amazing content, this is what I was looking for. keep it up man💗

[@ycldev]

Thank you for your kind words brother 😊

[@quelvinmachadodepaula]

Very good!! You're teaching me a lot, man!

[@user-ss1wc7mj7f]

wow! I am very impressed. I hope you make more video like this!

[@ycldev]

Thanks for watching! I hope to do a video soon, stay tuned✌️

[@jeffery614]

Very helpful, thank you!

[@Indra-wc7kx]

Good job friends 👏, nice video

[@timothymbachu]

This really came in handy 😅

[@flux-4]

Buenisimo! muchas gracias

[@UddhikaIshara]

Thank you very much! It was explained very clearly!

[@chusOP]

Nice video! me ayudo mucho

[@suhakarkhy639]

Thank you

[@Daddyjs]

We could use headlessUI for this but this is awesome content! And great to know.

[@ycldev]

Where's the fun in using pre made components 😆

[@Daddyjs]

@@ycldev exactly that's why I searched hahaha because I didn't want to use headless ui

[@SalmanKhan-fn7nj]

Very nice effort bro, we need complete dashboard and landing page on tailwind but before that we need some basica of the tailwind

[@ycldev]

I am planning on doing projects with tailwind soon.

[@SalmanKhan-fn7nj]

Can u please integrate a laravel api using redux toolkit in that .. if u do believe me u ll get high remarks

[@Pareshbpatel]

Great ilustration of how to create a Modal Componnt in React (with TailwindCSS) - Thanks. {2024-04-06} - Subscribed!

[@ycldev]

Thanks for the sub 👍

[@Pareshbpatel]

@@ycldev - Thank you for the tutorial.

[@harsimothukuri155]

Super ..can you make more functionalities on react

[@ycldev]

Definitely! I will keep adding more to this series

[@asfnobambu]

By any chance you have this code in a repository like Github ? I'm too lazy to follow along to write it ;-)

[@ycldev]

Check the description now.

[@hamzajahangir7672]

sorry i dont understand may be i am wrong but are you using tailwind and bootstrap simultaneously? if yes than why?

[@ycldev]

I am only using tailwind. I guess you are wondering about the .btn classes, I already showed the corresponding styles for it earlier in the video.

[@paschalokafor9043]

AI has taken over you beautiful voice.

[@ycldev]

Still experimenting what works 👨‍🔬

[@mrlectus]

are portals no longer required?

[@ycldev]

You can definitely use portals and render the modals at a different target all together. But I like to avoid them as much as I can.

[@boshty]

Get rid of that horrible font please............

[@ycldev]

What's wrong with the font?

[@boshty]

@@ycldev it's some weird curly cursive looking thing. Just makes it much harder to read

[@ycldev]

Oh, btw I have changed the font in the recent videos.

[@Divyansh_45]

@@ycldev name this font extension how to apply in my vs code