Button

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

px-4 py-2: adds padding;
bg-blue-500: sets background color;
text-white: sets text color;
rounded-lg: adds rounded corners.

Card

<div className="p-4 bg-white shadow-lg rounded-lg">
  <h3 className="text-lg font-bold">Title</h3>
  <p className="text-gray-600">Description</p>
</div>

p-4: adds padding;
shadow-lg: adds shadow;
rounded-lg: rounds corners.

Form Input

<input
  className="border border-gray-300 p-2 rounded-md"
  placeholder="Enter text"
/>

border: adds border;
p-2: adds padding;
rounded-md: rounds corners.

Combine utility classes to build reusable UI components like buttons, cards, and form elements.

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 1. Kapittel 6

Spør AI

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Building UI Components

Tailwind allows you to quickly build common UI components using utility classes.