Typography

Heading 1 - text-5xl

Heading 2 - text-4xl

Heading 3 - text-3xl

Heading 4 - text-2xl

Heading 5 - text-xl

Heading 6 - text-lg

Body text - text-base (default)

Small text - text-sm

Extra small - text-xs


    <h1 class="text-4xl font-bold">Heading</h1>

    <p class="text-gray-600">Paragraph text</p>

Grid System

3 Columns

1

2

3

2 Columns

1

2

4 Columns

1

2

3

4


    <div class="grid grid-cols-3 gap-4">

      <div>Column 1</div>

      <div>Column 2</div>

      <div>Column 3</div>

    </div>

Jumbo / Hero

Default Jumbo

A hero section for important announcements

Large Jumbo

With custom background color


    <div class="jumbo jumbo-lg">

      <div class="jumbo-content">

        <h1 class="jumbo-title">Title</h1>

        <p class="jumbo-subtitle">Subtitle</p>

      </div>

    </div>

Cards

Basic Card

Simple card with padding and border.

Interactive Card

Hover for shadow effect.

Card with Header

Separate header section.


    <div class="card card-interactive">

      <div class="card-body">

        <h3 class="card-title">Title</h3>

        <p>Content</p>

      </div>

    </div>

Spacing Utilities

p-* padding, m-* margin

px-* horizontal, py-* vertical

mt-* top, mb-* bottom, ml-* left, mr-* right

Scale: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24

Layout & Typography