Alert

<div class="bg-blue-lightest blue-darker px-5 py-3 br-3">
    Basic blue alert
</div>

<div class="bg-red-lightest red-darker px-5 py-3 br-3">
    Basic red alert
</div>

<div class="bg-green-lightest green-darker px-5 py-3 br-3">
    Basic green alert
</div>

<div class="bg-yellow-lightest yellow-darker px-5 py-3 br-3">
    Basic yellow alert
</div>

<div class="bg-blue-lightest blue-darker px-5 py-3 br-3 border-blue">
    Basic blue alert with border
</div>

<div class="bg-red-lightest red-darker px-5 py-3 br-3 border-red">
    Basic red alert with border
</div>

<div class="bg-green-lightest green-darker px-5 py-3 br-3 border-green">
    Basic green alert with border
</div>

<div class="bg-yellow-lightest yellow-darker px-5 py-3 br-3 border-yellow">
    Basic yellow alert with border
</div>

<div class="flex bg-blue-lightest blue px-5 py-3 br-3 border-blue">
    <div>Basic blue with border</div>
    <div class="pointer">
        <svg class="blue" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
    </div>
</div>

<div class="flex bg-red-lightest red px-5 py-3 br-3 border-red">
    <div>Basic red with border</div>
    <div class="pointer">
        <svg class="red" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
    </div>
</div>

<div class="flex bg-green-lightest green px-5 py-3 br-3 border-green">
    <div>Basic green with border</div>
    <div class="pointer">
        <svg class="green" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
    </div>
</div>

<div class="flex bg-yellow-lightest yellow px-5 py-3 br-3 border-yellow">
    <div>Basic yellow with border</div>
    <div class="pointer">
        <svg class="yellow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
    </div>
</div>

<div class="bg-blue-lightest blue px-5 py-3 br-3 border-l bw-6 bc-blue">
    Side border blue alert
</div>

<div class="bg-red-lightest red px-5 py-3 br-3 border-l bw-6 bc-red">
    Side border red alert
</div>

<div class="bg-green-lightest green px-5 py-3 br-3 border-l bw-6 bc-green">
    Side border green alert
</div>

<div class="bg-yellow-lightest yellow px-5 py-3 br-3 border-l bw-6 bc-yellow">
    Side border yellow alert
</div>

<div class="bg-blue-lightest blue-dark px-5 py-3 br-3 border-l bw-6 bc-blue">
    Side border blue alert
</div>

<div class="bg-red-lightest red-dark px-5 py-3 br-3 border-l bw-6 bc-red">
    Side border red alert
</div>

<div class="bg-green-lightest green-dark px-5 py-3 br-3 border-l bw-6 bc-green">
    Side border green alert
</div>

<div class="bg-yellow-lightest yellow-dark px-5 py-3 br-3 border-l bw-6 bc-yellow">
    Side border yellow alert
</div>