Typography

Display Headings

text-xs

text-sm

text-base

text-lg

text-xl

text-2xl

text-3xl

text-4xl

text-5xl

text-6xl

text-7xl

text-8xl

text-9xl

Inline Text Elements

Styling for common inline HTML5 elements.

Your title goes here

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to thedocument.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

Nulla attr vitae elit libero, a pharetra augue.

Unordered

A list of items in which the order does not explicitly matter.

  • Fully responsive design
  • Built with TailwindCSS 4 framework
  • Clean and modern UI components
  • Cross-browser compatibility
  • Multiple form elements and validations
    • Rich input controls
    • Step-based form wizards
    • Real-time validation
    • Customizable styles
  • Advanced chart and graph libraries
  • Integrated data tables and sorting
  • Developer-friendly code structure

Ordered

A list of items in which the order does explicitly matter.

  1. Install all dependencies
  2. Configure project environment settings
  3. Set up folder structure and routing
  4. Integrate UI components and layout
  5. Implement core modules
    1. Authentication & Authorization
    2. Dashboard widgets and metrics
    3. User profile management
    4. Notification & messaging systems
  6. Connect backend APIs and test data flow
  7. Optimize performance and responsive design
  8. Final testing and deployment

Unstyled

This only applies to immediate children list items , meaning you will need to add the class for any nested lists as well.

  • Install project dependencies
  • Configure build settings
    • Update environment variables
  • Setup project structure and routes
  • Launch local development server
Inline List

Display list items horizontally using display: inline-block; and appropriate spacing.

  • HTML
  • CSS
  • JavaScript

Alignment

Use text utilities as needed to change the alignment of your blockquote.

"Design is not just what it looks like and feels like. Design is how it works."

-Steve Jobs in Steve Jobs Biography

"Simplicity is the ultimate sophistication."

Leonardo da Vinci in Design Philosophy

Inline

Remove a list's bullets and apply some light margin with a combination of two classes, .list-inline and .list-inline-item.

  • This is a list item.
  • And another one.
  • But they're displayed inline.

Naming a Source

A well-known quote, contained in a blockquote element.

"Design is not just what it looks like and feels like. Design is how it works."

-Steve Jobs in Design Philosophy

Blockquotes

"Good design is obvious. Great design is transparent."

— Joe Sparano in Design Principles

Use text utilities as needed to change the alignment of your blockquote.

"First, solve the problem. Then, write the code."

— John Johnson in Developer Wisdom

"Simplicity is the soul of efficiency."

— Austin Freeman in Efficiency in Design
© Paces By Coderthemes