style guide
Enrollment Form
Membership Type
Travel Days
Single Trip
Additional Security Upgrade
Membership Type*
Total
$880.00
Primary Color
This text uses the light shade of the primary color.
This text uses the standard primary color.
This text uses the dark shade of the primary color.
Secondary Color
This text uses the light shade of the secondary color.
This text uses the standard secondary color.
This text uses the dark shade of the secondary color.
Accent Color 1
This text uses the light shade of accent color 1.
This text uses the standard accent color 1.
This text uses the dark shade of accent color 1.
Accent Color 2
This text uses the light shade of accent color 2.
This text uses the standard accent color 2.
This text uses the dark shade of accent color 2.
This div uses the background color and displays text in a contrasting color.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
This is a sample paragraph to demonstrate the text styling. Tailwind's utility-first approach makes it easy to control typography across your site.
You can bold text, italicize it, or even add a link.
Lists
Unordered List
- First item in an unordered list
- Second item in an unordered list
- Third item in an unordered list
Ordered List
- First item in an ordered list
- Second item in an ordered list
- Third item in an ordered list
Blockquote
"This is a blockquote. It's useful for displaying quotes or highlighted text in your content."
Tables
Column 1 | Column 2 | Column 3 |
---|---|---|
Row 1, Cell 1 | Row 1, Cell 2 | Row 1, Cell 3 |
Row 2, Cell 1 | Row 2, Cell 2 | Row 2, Cell 3 |
Here is an example of inline code
within a sentence. It should have a distinct background and text color.
function helloWorld() {
console.log("Hello, world!");
}
helloWorld();
This is an example of a quotation or emphasized text. It should be italicized and styled with gray text.