React Assignment – 2

Basic Questions

  1. Apply inline styling to a <p> element to make its text red.
  2. Set the background color of a <div> using inline styles.
  3. Pass an inline style object as a variable and apply it to a component.
  4. Create a Button component with CSS modules for style isolation.
  5. Use a CSS module to make one heading blue and another green.
  6. Add hover effect inside a CSS module and apply it to a button.
  7. Create two components sharing the same CSS module but with different classes.
  8. Demonstrate dynamic class switching with CSS modules based on props.
  9. Set default inline styles for a container (width: 200px, height: 200px).
  10. Style a paragraph with both inline styles and a CSS module class (combined).
  11. Create a styled Button using styled-components with custom color.
  12. Add a hover effect to styled-components button.
  13. Demonstrate passing props to styled-components (e.g., primary button).
  14. Setup Tailwind CSS in a React project.
  15. Use Tailwind class utilities (bg-blue-500 text-white p-2) for a button.
  16. Create a responsive layout (2 columns → 1 column on mobile) using Tailwind.
  17. Add a CSS :hover style to enlarge a button slightly.
  18. Animate text color fading using CSS transition.
  19. Create a simple keyframe animation (bounce) in CSS and apply it to a <div>.
  20. Apply transition: all 0.3s ease; to make background-color change smooth on hover.

Intermediate Questions

  1. Create a global CSS file and apply styles across multiple components.
  2. Compare styling conflicts between CSS modules vs global CSS.
  3. Create a styled navbar using styled-components.
  4. Implement dark mode toggle using styled-components + props.
  5. Build a reusable Tailwind button component (primary, secondary).
  6. Create responsive text with Tailwind (text-lg md:text-2xl lg:text-4xl).
  7. Build a two-column responsive grid using Tailwind utilities.
  8. Create a styled-components card that changes shadow on hover.
  9. Use conditional className in React to highlight active navigation link.
  10. Use CSS modules to style a parent-child component differently.
  11. Animate a button using CSS keyframes (scale up and back).
  12. Create a fade-in effect with CSS opacity + transition.
  13. Animate mounting/unmounting a component with React Transition Group.
  14. Add enter & exit animations to a modal with React Transition Group.
  15. Use Framer Motion to animate a button sliding from left to right.
  16. Animate list items one after another using Framer Motion staggerChildren.
  17. Build a card flip animation using CSS keyframes.
  18. Animate hover scaling using Framer Motion whileHover.
  19. Animate a fade + slide effect on route transitions with React Transition Group.
  20. Compare CSS transition vs React Transition Group for component fade.

Advanced Questions

  1. Build a responsive landing page styled using Tailwind CSS utilities.
  2. Design a theme switcher (light/dark mode) using styled-components and CSS variables.
  3. Create a dashboard UI with reusable styled cards using CSS modules + Tailwind for layout.
  4. Build a profile card component library with styled-components for reuse across a project.
  5. Build a to-do list where items fade in on add and fade out on delete using React Transition Group.
  6. Animate a modal popup with Framer Motion (scale + fade effect).
  7. Create a carousel with slide animations using Framer Motion.
  8. Animate a navbar underline sliding effect on hover using CSS keyframes.
  9. Build a page transition system where each route fades/slides in using Framer Motion with AnimatePresence.
  10. Combine CSS-in-JS (styled-components) with Framer Motion to create an animated responsive card grid.