Build A React JS Travel Website Using Tailwind CSS - Front End - Start to Finish

✈️ Build this Front-end React JS Travel Website! ✈️

In this video I rebuild a previous project using React JS and Tailwind CSS!

I left some time stamps below for your convenience. Follow along as I create a basic React JS application and install Tailwind CSS. I'm having a lot of fun working with tailwind inside of my React projects - it is such a time saver. We will be using the useState hook to toggle our mobile responsive navbar state and build a custom image carousel component. I hope you enjoy the video. Would love to hear your feedback.

GitHub Repo! Images Found at- /src/assets/

ZeroTo Mastery:

Coding Challenges!

Install Tailwind:

Time Stamps:
0:00 - Intro
01:25 - Create-React-App With Yarn
02:19 - File Clean-up & Project Layout
03:01 - Install & Configure Tailwindcss
06:45 - Create Navbar Component
09:35 - Install React-Icons With Yarn
11:44 - Global Styles With Tailwindcss (Base Styles)
35:32 - Create Video Background Component
46:44 - Create ‘Destinations’ 5-Col Grid Layout Component
53:38 - Create ‘Search’ 2-Col Grid Layout With Form
01:10:58 - Create ‘Selects’ Component - Pass props to functional component
01:14:59 - Create Component Receiving Properties From ‘Selects’
01:19:19 - Carousel Component - useState
01:29:28 - Create Footer Component

🔥 My Coding Equipment 🔥

☕ Buy me a Coffee ☕

Instagram 💪

[WaqasAhmed-tifk]

Your Tutorials are just Awesome & the best for the Beginners. Thanks Man!!!

[iGhostr]

Coming from Flutter to create my startup's website. Thank you, I really enjoy the way you talk and explain things.

Have a great day!

[jeccha]

And now, I fixed my problem. I'm glad to watch this video.

[henrymunoz]

Second Taildwind project i complete, alredy feeling much confortable working with Tailwind, Thanks Clint keep up the great work Love this channel

[santiljanomalaj]

I've been a programmer for 11 years. I can confidently state that this is one of the greatest videos, and @Code Commerce is doing an excellent job. Keep it up, buddy; you deserve the best for your efforts.

[bonkeselemani]

I'm doing the same thing with Angular,
41:44, hope to have everything ready at the end of this week
Thank you

[usamaashraf]

This vedio should get 1 laks views . Absolutely awesome

[krzysztofpardel]

If I could, I would hit subscribe and like after every single time you encourage me to, there is so much value in this video! Fantastic.🔥

[neilrowland]

Excellent tutorial. Very clear explanations

[Ayydos]

I've got 4 tabs open and 3 of then are your builds :D, thank you!

[Dr-lhdn]

Great watching and learning from you THANK YOU!!!!

[defygames]

Awesome video! At 34:26 all those divs don't need the onClick btw, only the hamburger since that's the only button which should toggle the mobile navbar menu. With those, the entire mobile navbar menu is a button that closes, and the logo would also be a toggle. Also don't need a second useState for the logo, since you can just use the ternary operator using the nav boolean state you already have. Otherwise, really helpful to see Tailwind being used as a demo. :)

[algorithmtrader]

Your videos are great man, building my portfolio as we speak.

[krishnavishwakarma]

love from india, ur projects just like a wow

[pegahpasha]

That was awesome as usual, many thanks really appreciate your work.
Just as a suggestion it would be great if you could describe some javascript functionality with more focus🙌

[darthestvader]

Bro!!! You have the most awesome tutorials!

[TutoDS]

Suggestion: can you create figma for the next videos?
I like a lot of this videos, congrats for the great work

[julialee]

I would appreciate it if you could make a video about the backend for this project!

[teamtamilasfc]

you are the best man🤩🤩 keep upload more frontend project man 😘😘😘

[davidsonfong]

thanks for the great content! I definitely smashed the Like / Subscribe buttons.