mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Polish component example docs
This commit is contained in:
parent
9887a13d76
commit
02f5f08503
@ -1,10 +1,10 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Alerts"
|
||||
description: null
|
||||
description: Examples of building alert components with Tailwind CSS.
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress-example')
|
||||
Tailwind doesn't include pre-designed alert components out of the box, but they're easy to build using existing utilities.
|
||||
|
||||
### Traditional
|
||||
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Buttons"
|
||||
description: null
|
||||
description: Examples of building buttons with Tailwind CSS.
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress-example')
|
||||
Tailwind doesn't include pre-designed button styles out of the box, but they're easy to build using existing utilities.
|
||||
|
||||
### Simple
|
||||
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Cards"
|
||||
description: null
|
||||
description: Examples of building card components with Tailwind CSS.
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress-example')
|
||||
Tailwind doesn't include pre-designed card components out of the box, but they're easy to build using existing utilities.
|
||||
|
||||
## Stacked
|
||||
### Stacked
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'p-10 flex justify-center'])
|
||||
<div class="max-w-sm rounded overflow-hidden shadow-lg">
|
||||
@ -25,7 +25,7 @@ description: null
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
## Horizontal
|
||||
### Horizontal
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'p-10 flex justify-center'])
|
||||
<div class="max-w-md w-full lg:flex">
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Forms"
|
||||
description: null
|
||||
description: Examples of building forms with Tailwind CSS.
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress-example')
|
||||
Tailwind doesn't include purpose-built form control classes out of the box, but form controls are easy to style using existing utilities.
|
||||
|
||||
## Login Form
|
||||
### Login Form
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'px-3 py-10 bg-grey-lighter flex justify-center'])
|
||||
<div class="w-full max-w-xs">
|
||||
@ -39,7 +39,7 @@ description: null
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
## Inline Form
|
||||
### Inline Form
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'flex justify-center p-8'])
|
||||
<form class="w-full max-w-xs">
|
||||
@ -83,7 +83,7 @@ description: null
|
||||
</form>
|
||||
@endcomponent
|
||||
|
||||
## Form Grid
|
||||
### Form Grid
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'flex justify-center p-8'])
|
||||
<form class="w-full max-w-md">
|
||||
@ -143,7 +143,7 @@ description: null
|
||||
</form>
|
||||
@endcomponent
|
||||
|
||||
## Underline Form
|
||||
### Underline Form
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'flex justify-center p-8'])
|
||||
<form class="w-full max-w-sm">
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Navigation"
|
||||
description: null
|
||||
description: Examples of building navigation components with Tailwind CSS.
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress-example')
|
||||
Tailwind doesn't include pre-designed navigation components out of the box, but they're easy to build using existing utilities.
|
||||
|
||||
## Simple
|
||||
### Simple
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<ul class="list-reset flex">
|
||||
@ -25,7 +25,7 @@ description: null
|
||||
</ul>
|
||||
@endcomponent
|
||||
|
||||
## Responsive Header
|
||||
### Responsive Header
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<nav class="flex items-center justify-between flex-wrap bg-teal p-6">
|
||||
@ -57,7 +57,7 @@ description: null
|
||||
</nav>
|
||||
@endcomponent
|
||||
|
||||
## Tabs
|
||||
### Tabs
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<ul class="list-reset flex border-b">
|
||||
@ -76,7 +76,7 @@ description: null
|
||||
</ul>
|
||||
@endcomponent
|
||||
|
||||
## Pills
|
||||
### Pills
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<ul class="list-reset flex">
|
||||
@ -92,7 +92,7 @@ description: null
|
||||
</ul>
|
||||
@endcomponent
|
||||
|
||||
## Stretched
|
||||
### Stretched
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<ul class="list-reset flex">
|
||||
@ -108,7 +108,7 @@ description: null
|
||||
</ul>
|
||||
@endcomponent
|
||||
|
||||
## Justified
|
||||
### Justified
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<ul class="list-reset flex justify-between">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user