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.

Var alt klart?

Tak for dine kommentarer!

Sektion 1. Kapitel 6

Spørg AI

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Building UI Components

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