Task 22: Tailwind CSS

[yogeshtakeo]

Task: Building Tailwind CSS Components in a React Vite Project - Navbar, Hero, Login, and Registration Forms

Objective: Create five distinct components using Tailwind CSS in a React Vite project to enhance your web development and styling skills.

Task Description:

In this task, you will focus on building five distinct components for a web application using Tailwind CSS within a React Vite project. These components will cover common elements found in web development, including a navigation bar, hero section, login form, and registration form. Your goal is to improve your proficiency in using Tailwind CSS to style web components effectively in a React Vite project.

Use the documentation for installation guide: https://tailwindcss.com/docs/guides/vite

Component 1: Navigation Bar

1. Create a responsive navigation bar component using Tailwind CSS.
2. Include navigation links such as Home, About, Services, Blog, and Contact.
3. Implement responsive behavior, ensuring that the navigation bar collapses into a mobile-friendly menu on smaller screens.

Component 2: Hero Section

1. Design a visually appealing hero section component for your webpage.
2. Incorporate a large, eye-catching headline and a call-to-action button.
3. Utilize Tailwind CSS classes to achieve the desired styling for the hero component.

Component 3: Login Form

1. Develop a login form component that includes fields for email/username and password.
2. Implement proper form validation and styling using Tailwind CSS.
3. Ensure that the login form looks visually appealing and is user-friendly.

Component 4: Registration Form

1. Create a registration form component with fields for a username, email, password, and a confirmation password.
2. Apply appropriate form validation for registration using Tailwind CSS.
3. Style the registration form to make it visually attractive.

Component 5: Footer (Optional)

1. If you have time and want to challenge yourself further, design a footer component for your React Vite project.
2. Include links to social media, contact information, and copyright details.
3. Use Tailwind CSS classes to style the footer.

Note: This task aims to enhance your expertise in building common web components and styling them with Tailwind CSS in a React Vite project. It can be a valuable exercise to strengthen your front-end development skills, especially within the context of a modern development environment.

[mbasnet123456]

Name- manoj basnet Task 22: Tailwind CSS https://github.com/mbasnet123456/Task-22-Tailwind-CSS.git

[Narayanadhikari9]

Name: Narayan Adhikari Task 22: Tailwind CSS Url: https://github.com/Narayanadhikari9/Task-22-Tailwind-CSS/tree/narayan-tailwind

[raj-maharjan99]

Task 22 Raj Maharjan

[shantibasnet]

Shanti Basnet Task 22: Tailwind CSS URL: https://github.com/shantibasnet/TailwindCSS

[aniltimalsina]

Name: Anil Timalsina [Task 22: Tailwind CSS] Github Link : https://github.com/aniltimalsina/tailwind-css.git