Build a Responsive React JS Website with Tailwind CSS

Build a fully responsive website with React JS styled with Tailwind CSS. Responsive website with full-width navbar, masonry grid layout, an image slider, and more.
ZeroTo Mastery:
Master React JS Course - bit.ly/Learn-React-JS
Complete Web Developer in 2023 - bit.ly/Complete-Web-Developer
💻 Solve EDABIT coding challenges - BEGINNER! 💻
bit.ly/Code-Challenges
🔥 Connect with me on IG 🔥
/ fireclint
☕ Support the channel ☕
www.buymeacoffee.com/clintbriley
🔥 My Coding Equipment 🔥
Logitech MX Wireless Keyboard - amzn.to/3xKPFiN
Logitech MX Master 2S Wireless Mouse - amzn.to/3O5WmRD
SAMSUNG 49-Inch Gaming Monitor - amzn.to/3mvUy8M
Shure MV7 USB Podcast Microphone - amzn.to/3O00nqG
Mic Boom Arm - amzn.to/3NHn6YU
Monitor Desk Light Bar - amzn.to/3xzKlyj
Github:
github.com/fireclint/react-ta...
Timestamps:
00:00 Start
01:10 Create React App
02:25 Install Tailwind CSS
03:50 Global Styles - Tailwind
06:20 Hero Component
19:12 Navbar Component
33:20 Offers Component
36:50 Plan Component
48:05 Rooms Component
54:50 Image Slider
1:12:26 Footer Component

[@naziruadam3950]

Just recently discovered your channel, and I already fell in love with it. I love the way you slice everything; giving every last detail of it in a simplified way.👍

[@tenc6491]

Hi Clint, Thank you for this awesome tutorial. You made it look very easy. I am at 1:07:45 doing this slide thing. After this Imma sleep as I have the night shift after I wake up. but love it so far. thanks a lot, brother. You are kind to share such wonderful projects with us.

[@mihastih]

Hi. One little thing. You can delete the "fixed" word from in Navbar to center the items better.

[@rcarolina]

Excellent video. it has helped me a lot to understand! Thanks you!

[@rickanthonytenorio4755]

This kind of tutorial is really good bro keep it up.

[@papayaislife1133]

Thanks for this videos really helps in my coursework

[@rheavictor7]

I just did a quick pause here to comment; Man in 20 minutes watching this tutorial already learned so much about shortcuts and small details that I often struggle. You are an excellent teacher!

[@codecommerce]

Thanks Victor! Just trying to share what I learn.

[@alejandroszg]

Hi, another great project. Thank you so much. I have a question: How can we deal with the menu that doesn't have a max-width? I've tried with a max-w-[1400px] on the navbar, but that affects the hero component. Thank you again

[@Maximiliant6]

Thank you so much for this tutorial! It helped me really understand Tailwind! Do you have a video showing how to retrieve the images from the web? I had to use them locally because I am not sure an easy place to upload the photos.

[@codecommerce]

You can certainly link to other images, but that can be ineffective if the URL changed for example.

[@makemoneyonline6278]

I am getting great values out of your tutorial, Thanks for the Video

[@codecommerce]

Thank you sir

[@tiagocosta2689]

Clint, the button on windows to select multiple lines is "ctrl" . Thanks for the videos

[@codecommerce]

Thanks Tiago! I’m always switching back and forth 😂

[@teflonhav]

thank you

[@momoJung-nk3dn]

das war sehr toll

[@codecommerce]

Thanks!

[@ebraraltunkaynak6438]

yeeeeeeeeeeeeass new videeeo

[@LuisBlancoAustin]

Excellent video! I have a question: if I wanted to use images locally instead of images from the web, how would I set the path in the slides array and the corresponding code in the style for the div containing the background image. This is in reference to the food images in minute 58 of the video. Thanks in advance.

[@codecommerce]

Hi Luis. You could use the local file path

[@richardespino1403]

good video :)

[@fortunerlover573]

brother any tutorial on how to import unsplash images in array like from where u get those links?

[@hubesh716]

Sir Plz Make Ecommerce Project IN React js using Tailwind css and Redux Toolkit For state management and Firebase Complete Ecommerce Functionality plz its a request sir

[@maratiot]

Support that suggestion

[@codecommerce]

Awesome idea! That sounds like a good project!

[@hubesh716]

@@codecommerce sir plz make as soon as possible am waiting sir

[@lautaroblasco6852]

nice video

[@niteshprajapat.d3v]

you are awesome! 😍

[@codecommerce]

Thanks!

[@directornovela7774]

Thanks a lot

[@codecommerce]

Much appreciated!

[@stanleylafond4650]

Very helpful vlog. Do you get any "considerations" from Tailwind for promoting their software?

[@codecommerce]

Unfortunately I do not. Maybe I should ask them!

[@regilearn2138]

Hi is it possible to develop dashboard with Tailwind css,bcz ,when it comes to advanced dashboard, data grid,table,pagiantion,all are there,how can we develop those thing using Tailwind css

[@codecommerce]

Literally working on building this over the past couple of days! :)

[@Deus-lo-Vuilt]

Do you happen to know how to affect another element when hovering? if i use :hover and i want to affect another element how can i do it using tailwind ? it would usually be element:hover .element2{}

[@codecommerce]

You can use the “group” class with tailwind. :)

[@Deus-lo-Vuilt]

@@codecommerce thanks bro

[@bilal5488]

sirr plzz made a video with project on react state management library like zustand or react recoil plzz 🥲

[@anukulghosh6575]

how can the slider change it automatically after 5s?

[@codecommerce]

You can use a timeout or they have more beginner friendly react packages to use. :)

[@alirezamajd6705]

how we can download the project image ,there are not the images

[@codecommerce]

You can find in GH or just grab random images from unsplash or pexels. Both great resources for open source images.

[@vijayshankar5250]

Bootstrap or tailwindcss Which one best for future?

[@codecommerce]

I’d say tailwind. So much more customizable in my opinion.

[@ary_21]

Can i consider it as a complete front end project ? Asking to know if i can include this in my resume or not

[@jertti]

From my experience which is around 2 years and a half working on front-end projects you could include this in your resume but I would suggest you to make it more interactive add the other pages. Add custom styling for your end figure it out, a texture throughout the body or smth like that will make it better. Also you could use this kind of website for something else or for a friend who needs a website!

[@Guccifer808]

No hooks, no routes, etc.. I doubt you can include it in your portfolio, at least you need to have more complex projects because this is just too simple. My 5 cents nevertheless good video!

[@codecommerce]

I’d recommend using some sort of Firebase or more in depth project for a front end position.

[@bilal5488]

❤️

[@haroondeveloper]

plz make website with material ui

[@codecommerce]

Material dashboard coming soon!

[@haroondeveloper]

@@codecommerce dashboard and website plzzz website must

[@chris-zlrr]

your videos are amazing bro but with all due respect, you talk too much... it's distracting when I'm following along and you start talking about this and that extension and how cool this VS Code feature is... just get the code done please - i dont care about the rest bc i already know about it

[@rheavictor7]

Just to make a counter point; talking during the code session is really helpful for some people, like me. It is hard sometimes to keep track of what is being done in the code + what feature is being used + the 'why' that was done. If the presenter dont talk about these things, gets really hard to follow. There are tons of youtube videos where we have a background music and the code shown on screen, might be more your cup of tea :)

[@Hacking-NASSA-with-HTML]

Why tailwind 🤷???? Just useless redundant technology. Thank you for your work, btw, sir 👍♥️

[@codecommerce]

Tailwind is so fast though!