Task 16 : Tailwind CSS - Githubissues

yogeshtakeo commented 1 year ago

Task: Introduction to Tailwind CSS, Styling, and Props Drilling in React

Objective: Introduce Tailwind CSS, practice styling buttons, cards, and form handling in a React project, and understand props drilling.

Task Overview

Set up a new React project using a tool of your choice (e.g., Vite, Create React App, etc.).
Install and configure Tailwind CSS in your React project.
Style buttons, cards, and form elements using Tailwind CSS classes.
Implement form handling functionality using React state.
Explore props drilling to pass data between components.

Task Details

Project Setup:
- Set up a new React project using Vite.
- Install Tailwind CSS as a dependency in your project using npm or yarn.
- Configure Tailwind CSS by creating a configuration file and including it in your project. https://tailwindcss.com/docs/guides/vite
Style Buttons:
- Create a component called Button in your project.
- Use Tailwind CSS classes to style the button component.
- Implement different button styles, such as primary, secondary, outlined, etc.
- Display the buttons in your application using the Button component.
Style Cards:
- Create a component called Card in your project.
- Use Tailwind CSS classes to style the card component.
- Style the card with a background color, border, padding, and other relevant styles.
- Display the cards in your application using the Card component.
- Also type in the hover effects in the cards.
Form Handling:
- Create a form component (e.g., Form) in your project.
- Implement form handling functionality using React state.
- Add form input fields (e.g., text input, select, checkbox) within the Form component.
- Handle user input and update the form state accordingly.
- Display the form inputs and handle form submission using the Form component.
- The form should inputs where the user can input his name , address , email , and phone number.
Props Drilling:
- Create a parent component (e.g., App) that contains the Button, Card, and Form components.
- Pass data and functionality between the components using props drilling.
- Start by passing props directly from the parent component to the child components.
- Use props drilling to pass data and functions from the top-level component down to nested components.
- Using the same component in form by passing down the props like disabled={true} in the form from parent component, I should be able to disable to disable the submit button.

Task Submission

Take a screenshot of the web browser displaying the rendered React component . Share the screenshot Optionally, submit the code files (App.js and any other relevant files) for review with the GitHub Repository.