ReactJS Responsive website with Login Popup Modal | Tailwind CSS
Learn how to make Responsive Login and Signup Form Popup Modal using ReactJS and Tailwind CSS for beginners. you will learn how to make modern responsive hero section with responsive Navbar . you will learn the uses of useRef which is the hook of react js to close the popup modal by clicking the outside of the modal.
Responsive ReactJS website with Login & SignUp Page || Custom Popup Modal using ReactJS and Tailwind
🧡 Get the source code absolutely Free || Don't forget to LIKE & SUBSCRIBE😍
https://github.com/dilshad-ahmed/traveu
👁️ Live Preview:
https://traveu.netlify.app/
💬 Join our community
WhatsApp :- https://chat.whatsapp.com/Hu643OfjQax...
Telegram :- https://t.me/the_coding_journey
🎬 Playlist ( Full website Build from scratch + Free Assets + Free Code )
• Complete Responsive Websites ReactJS ...
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Features:
👉🏻 Responsive Login / signin page Popup Modal in ReactJS.
👉🏻 Click Outside of modal to close the Modal.
👉🏻 Responsive Navbar
👉🏻 Fully responsive Hero page( All device supported )
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
What you will learn:
🔥 How to build Responsive Navbar using ReactJS.
🔥 How to build Modern Responsive Hero page using ReactJS.
🔥 You'll build the Login and Signin Form page with Popup modal.
🔥 Uses of useRef to click outside of to close the Login Modal.
🔥 You'll build fully responsive website in reactJS using Tailwind CSS
🔥 Best practices and debugging skills.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
⏱ Timestamps
00:00 Demo
01:34 Software Download
01:55 Project Setup
04:40 configure/install tailwind CSS
07:03 Responsive Navbar for desktop
17:30 Hero Section
21:32 Google Font for Hero Text
25:24 Login form Popup modal
48:38 Show-Hide password
50:30 Signin form page
58:00 Closing the Popup Modal with outside of click
01:00:21 Bluring the Popup Background
01:01:22 Final Result
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
💼 Packages :
tailwind css - https://tailwindcss.com/
react - https://react.dev
vite js - https://vitejs.dev/guide/
react icons - https://react-icons.github.io/
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Facebook -
/ thecodingjourney
Instagram -
/ the.coding.journey
Twitter -
/ thecodingjourny
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-#reactwebsite #loginpage #tailwindcss #popupmodal #reactjs #tailwind #responsivewebsite #websitedesign #css #webdesign #webdevelopment #frontend #frontenddevelopment #uidesign #thecodingjourney #tcj #coding #howtocreateloginpage
Смотрите видео ReactJS Responsive website with Login Popup Modal | Tailwind CSS онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь The Coding Journey 30 Ноябрь 2023, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 3,882 раз и оно понравилось 105 людям.