Build and Deploy Fully Responsive Landing Page: React + Tailwind CSS

In this video, we will learn how to create a Modern fully responsive website using react and tailwind CSS from scratch.

We'll begin by creating our application using Vite and installing and setting up tailwind css in our project. Then we will work on creating Navbar which is fully responsive and has a mobile drawer to display all links of the page.
The website also contains a beautiful hero section which uses gradient text, to give a modern look to the site. We will also be using video tag to display few videos in autoplay and loop mode. The site also contains a feature section that lists all the features of the product displayed in a clean UI.
The site will also have a pricing card feature with three plans for the users to select. We will also look at how to create testimonials and footer section using tailwind css.
Finally we will also deploy our code on the Vercel platform.

🔗 Links:

00:00:00 Introduction
00:01:53 Installation
00:04:55 Navbar
00:16:33 Hero Section
00:23:27 Features Section
00:31:50 Workflow Section
00:39:07 Pricing Section
00:48:07 Testimonials Section
00:54:21 Footer Section
00:59:15 Deploy

#reactjs #reactjsproject #reactjstutorial

[BrightSideAnime]

I seriously don't understand why this video isn't blowing up, its so detailed and clear. You just earned yourself a subscriber.

[MrIsGrowing]

"Hey Cmpiletab,

I just wanted to say that I really appreciate your videos on coding. They're so detailed and clear, and you're a great teacher. I'm surprised that your channel doesn't have more subscribers, but I'm sure that will change soon. Keep up the great work!

Here's a quote to encourage you to keep going, even when things get tough:

"Don't give up on your dreams, even if they seem impossible. The only way to achieve your goals is to keep working hard and never give up." - Unknown*
I hope this message inspires you to continue creating great content. You're making a difference in the world by helping people learn to code."

[catScripts-zx]

This guy just did my entire week work in 1 hour☠️

[adityapandey]

The best video to get started if you are struggling with Tailwind and structuring!

[yukaai..]

I just ended developing this project.. good explanation and you just earned an one subsriber. Thank you

[safiulbari]

Im a product designer, learning react as a hobby. I'm just looking good video to how to implement landing page using react js. and found your video really helpful. carry on. bro

[hamadkhan]

good for people who wants to learn react basics and fully responsive with tailwind ;)

[petouniatuken]

Got such a better understanding of tailwind with this video! Thank you

[jemm]

Thank you, excellent video. Valuable information. Greetings from Venezuela

[avitussweetbert]

This is the most amazing video on tailwind I have ever seen.

[achinthyadulshan]

Thank you for this video. That video helps me to understand working with react and tailwind. Your explanations are great.

[RizwanAhmad-tnwb]

Wow, I did this! Great job! Thanks for the excellent guidance. Please create more fully functional web applications using React.js, Next.js, and Redux.js.

[moodmaker]

Thank you for your work.
One thing to critique would be: center your section of the work space more often. Otherwise it is always at the bottom of the video. Once your pupils pause the video, the play, time, options etc of the YouTube video player are blocking the view on what you have entered.

And why "relative" in the feature section? Makes everything be above the Navbar.

[vijayshankarcrypto]

Wow. Amazing tutorial man. I am a beginner React dev - Please upload more beginner friendly projects and concepts for us. WE will support you always :-)

[narendrasingampalli]

One of the best video with so detailed and clear

Long way to go🎉❤

[markusdowney]

im following around and its going great so far... super clear and thats what i like

[ahmedaminebouchmal]

very simple and organized work. well done, you help me a lot

[swarnabhamajumder]

Thanks sir for this wonderful project. Please bring more frontend projects like this it would be a great help.

[RanjankumarVerma-kd]

thank you sir i designed my whole website n also i added, any more functionality in my website but the idea was urs thank you

[melchizedek]

Thank you so much @compiletab for this. I learnt a great deal through this tutorial.