Build Frontend with React and Tailwind

React Fundamentals (For Designers)

React is JavaScript for building interactive user interfaces. Think of it like components in a design system:

• **Components**: Reusable pieces (Button, Card, Header, etc.)
• **Props**: Data you pass to components (like component parameters)
• **State**: Data that changes and triggers UI updates
• **Events**: Click, hover, submit—interactive behaviors

Example: Create a React Component with Cursor

Use Chat or Composer to generate:

Create a React button component with label prop, onClick handler, and styling with Tailwind CSS. Make it blue by default, with red variant. Include hover effects.

Cursor generates working code immediately. No need to memorize React syntax.

Tailwind CSS: Utility-First Styling

Tailwind is CSS made easy for designers. Instead of writing custom CSS, use class names:

<button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
  Click me
</button>

bg-blue-500 = blue background, text-white = white text, px-4 = horizontal padding, hover:bg-blue-600 = darker on hover.

"Vibe Coding": Describe, Don't Code

The beauty of AI development: describe what you want, not how to code it.

• Bad: "Use flexbox with justify-content center"
• Good: "Center items horizontally"
• Better: "Create a responsive grid of cards that show 3 columns on desktop, 2 on tablet, 1 on mobile"

Cursor translates your intent into Tailwind classes automatically.

Responsive Design (Mobile-First)

Build for mobile first, then enhance for bigger screens. Tailwind makes this easy:

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  {/* Cards go here */}
</div>

export default function ProductCard({ image, title, price }) {
  return (
    <div className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
      <img src={image} alt={title} className="w-full h-48 object-cover" />
      <div className="p-4">
        <h3 className="text-lg font-bold text-gray-900">{title}</h3>
        <p className="text-2xl text-blue-600 font-semibold mt-2">${price}</p>
        <button className="w-full mt-4 bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-700 transition-colors">
          Add to Cart
        </button>
      </div>
    </div>
  );
}

Accessibility: Important!

Cursor can generate accessible code. Just ask:

• "Make sure this component is accessible (WCAG)"
• "Add proper alt text to images"
• "Ensure keyboard navigation works"
• Cursor adds aria labels, semantic HTML, and proper contrast