tailwindcss/docs/source/examples.md

---
extends: _layouts.master
title: "Examples"
---

# Examples

Some component examples, just to get a vibe for what's possible and for us to double check our default utilities are producing good looking stuff!

## Alerts

<div class="bg-red-lightest border border-red-light rounded p-4 mb-4">
    <div class="text-medium text-red-dark">
        Alert message
    </div>
    <div class="text-red-dark">
        Some additional text to explain what happened.
    </div>
</div>

<div class="bg-orange-lightest border border-orange-light rounded p-4 mb-4">
    <div class="text-medium text-orange-dark">
        Alert message
    </div>
    <div class="text-orange-dark">
        Some additional text to explain what happened.
    </div>
</div>


<div class="bg-yellow-lightest border border-yellow-light rounded p-4 mb-4">
    <div class="text-medium text-yellow-dark">
        Alert message
    </div>
    <div class="text-yellow-dark">
        Some additional text to explain what happened.
    </div>
</div>

<div class="bg-green-lightest border border-green-light rounded p-4 mb-4">
    <div class="text-medium text-green-dark">
        Alert message
    </div>
    <div class="text-green-dark">
        Some additional text to explain what happened.
    </div>
</div>

<div class="bg-teal-lightest border border-teal-light rounded p-4 mb-4">
    <div class="text-medium text-teal-dark">
        Alert message
    </div>
    <div class="text-teal-dark">
        Some additional text to explain what happened.
    </div>
</div>

<div class="bg-blue-lightest border border-blue-light rounded p-4 mb-4">
    <div class="text-medium text-blue-dark">
        Alert message
    </div>
    <div class="text-blue-dark">
        Some additional text to explain what happened.
    </div>
</div>

<div class="bg-indigo-lightest border border-indigo-light rounded p-4 mb-4">
    <div class="text-medium text-indigo-dark">
        Alert message
    </div>
    <div class="text-indigo-dark">
        Some additional text to explain what happened.
    </div>
</div>

<div class="bg-purple-lightest border border-purple-light rounded p-4 mb-4">
    <div class="text-medium text-purple-dark">
        Alert message
    </div>
    <div class="text-purple-dark">
        Some additional text to explain what happened.
    </div>
</div>

<div class="bg-pink-lightest border border-pink-light rounded p-4 mb-4">
    <div class="text-medium text-pink-dark">
        Alert message
    </div>
    <div class="text-pink-dark">
        Some additional text to explain what happened.
    </div>
</div>

## 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>