Project Overview

Link to the tutorial: React JS & Tailwind CSS Responsive Website - Beginner Friendly.

This project was developed based on the YouTube tutorial titled "React JS & Tailwind CSS Responsive Website - Beginner Friendly." The tutorial provides a comprehensive guide to building a fully responsive landing page using React and Tailwind CSS from scratch.

While the tutorial originally used the React-Typed package for text animations in the Hero component, I switched to the react-typing-effect package because React-Typed caused the page to become unresponsive. Additionally, the tutorial covers:

• Implementing the useState hook for toggling the mobile side drawer menu
• Incorporating the React-Icons library for social icons
• Designing the layout using both flexbox and grid

Note: I modified and added some sections and styles as part of my exploration and learning with React and Tailwind CSS, including:

• The Benefits component
• The badge in the hero section
• Creating reusable styles in index.css and tailwind.config.js
• Using different assets

These changes were made to enhance my understanding and improve the overall design of the project.

⚙️ Tech Stack

• Vite
• React.js
• Tailwind CSS

📦 Packages

• react-typing-effect
  A typing animation effect for React components.

• react-icons
  Popular icons for React projects.

⚡ Getting Started

To get started with this project, clone the repository and install the dependencies:

git clone <repository-url>
cd <repository-folder>
npm install

🎆 Start the server

To start the development server, run:

npm run dev

🔨 Production build

To create a production build, run:

npm run build

✏️ Guide for Creating and Setting Up the Project from Scratch

📃 Note: The tutorial mentioned above used Yarn for setting up the project, but I prefer to use npm.

• Installing Tailwind CSS with Vite
  A comprehensive guide to setting up Tailwind CSS in a React + Vite project.