Accordion
Title content
Body content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Second title
Body content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Third title
Body content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Breadcrumbs
Button
Dropdown Menu
Form
Heading
Heading XL
Heading Large
Heading Medium
Heading Small
Modal
Notification
Rich Text
Lead paragraph. Until now, trying to style an article, document, or blog post with Tailwind has been a tedious task that required a keen eye for typography and a lot of complex custom CSS.
Paragraph. By default, Tailwind removes all of the default browser styling from paragraphs, headings, lists and more. Styled link here. This ends up being really useful for building application UIs because you spend less time undoing user-agent styles, but when you really are just trying to style some content that came from a rich-text editor in a CMS or a markdown file, it can be surprising and unintuitive.
Blockquote. Why is Tailwind removing the default styles on my
h1elements? How do I disable this? What do you mean I lose all the other base styles too?
Now I`m going to show you an example of an unordered list to make sure that looks good, too:
- So here is the first item in this list.
- In this example we`re keeping the items short.
- Later, we`ll use longer, more complex list items.
H2. What if we stack headings?
H3. We should make sure that looks good, too.
Finally, let`s take a look at styling tables.
| Make | Model | Year |
|---|---|---|
| Toyota | Corolla | 1999 |
| Honda | Civic | 2003 |
| Ford | Focus | 2010 |