mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
102 lines
3.1 KiB
Markdown
102 lines
3.1 KiB
Markdown
---
|
|
extends: _layouts.markdown
|
|
title: "Buttons"
|
|
---
|
|
|
|
# Buttons
|
|
|
|
<div class="mb-4">
|
|
<button class="text-medium text-dark rounded py-2 px-4 bg-light mr-4">
|
|
Save
|
|
</button>
|
|
<button class="text-medium text-dark rounded py-2 px-4 bg-light-soft mr-4">
|
|
Save
|
|
</button>
|
|
<button class="text-medium text-dark rounded py-2 px-4 bg-light-softer mr-4">
|
|
Save
|
|
</button>
|
|
</div>
|
|
<div class="mb-4">
|
|
<button class="text-medium text-light rounded py-2 px-4 bg-dark hover-bg-dark-dark mr-4">
|
|
Save
|
|
</button>
|
|
<button class="text-medium text-light rounded py-2 px-4 bg-dark-soft mr-4">
|
|
Save
|
|
</button>
|
|
<button class="text-medium text-light rounded py-2 px-4 bg-dark-softer mr-4">
|
|
Save
|
|
</button>
|
|
</div>
|
|
<div class="mb-4">
|
|
<button class="text-medium text-light rounded py-2 px-4 bg-red hover-bg-red-dark mr-4">
|
|
Save
|
|
</button>
|
|
<button class="text-medium text-light rounded py-2 px-4 bg-red-light mr-4">
|
|
Disabled
|
|
</button>
|
|
</div>
|
|
<div class="mb-4">
|
|
<button class="text-medium text-light rounded py-2 px-4 bg-orange hover-bg-orange-dark mr-4">
|
|
Save
|
|
</button>
|
|
<button class="text-medium text-light rounded py-2 px-4 bg-orange-light mr-4">
|
|
Disabled
|
|
</button>
|
|
</div>
|
|
<div class="mb-4">
|
|
<button class="text-medium text-light rounded py-2 px-4 bg-yellow hover-bg-yellow-dark mr-4">
|
|
Save
|
|
</button>
|
|
<button class="text-medium text-light rounded py-2 px-4 bg-yellow-light mr-4">
|
|
Disabled
|
|
</button>
|
|
</div>
|
|
<div class="mb-4">
|
|
<button class="text-medium text-light rounded py-2 px-4 bg-green hover-bg-green-dark mr-4">
|
|
Save
|
|
</button>
|
|
<button class="text-medium text-light rounded py-2 px-4 bg-green-light mr-4">
|
|
Disabled
|
|
</button>
|
|
</div>
|
|
<div class="mb-4">
|
|
<button class="text-medium text-light rounded py-2 px-4 bg-teal hover-bg-teal-dark mr-4">
|
|
Save
|
|
</button>
|
|
<button class="text-medium text-light rounded py-2 px-4 bg-teal-light mr-4">
|
|
Disabled
|
|
</button>
|
|
</div>
|
|
<div class="mb-4">
|
|
<button class="text-medium text-light rounded py-2 px-4 bg-blue hover-bg-blue-dark mr-4">
|
|
Save
|
|
</button>
|
|
<button class="text-medium text-light rounded py-2 px-4 bg-blue-light mr-4">
|
|
Disabled
|
|
</button>
|
|
</div>
|
|
<div class="mb-4">
|
|
<button class="text-medium text-light rounded py-2 px-4 bg-indigo hover-bg-indigo-dark mr-4">
|
|
Save
|
|
</button>
|
|
<button class="text-medium text-light rounded py-2 px-4 bg-indigo-light mr-4">
|
|
Disabled
|
|
</button>
|
|
</div>
|
|
<div class="mb-4">
|
|
<button class="text-medium text-light rounded py-2 px-4 bg-purple hover-bg-purple-dark mr-4">
|
|
Save
|
|
</button>
|
|
<button class="text-medium text-light rounded py-2 px-4 bg-purple-light mr-4">
|
|
Disabled
|
|
</button>
|
|
</div>
|
|
<div class="mb-4">
|
|
<button class="text-medium text-light rounded py-2 px-4 bg-pink hover-bg-pink-dark mr-4">
|
|
Save
|
|
</button>
|
|
<button class="text-medium text-light rounded py-2 px-4 bg-pink-light mr-4">
|
|
Disabled
|
|
</button>
|
|
</div>
|