Alerts

<div class="bg-gray-100 border border-gray-200 text-gray-700 rounded-lg px-4 py-3">
  <p class="text-sm">A simple default alert</p>
</div>
<div class="bg-alpine-50 border border-alpine-200 text-alpine-700 rounded-lg px-4 py-3">
  <p class="text-sm">A simple primary alert</p>
</div>
<div class="bg-green-50 border border-green-200 text-green-700 rounded-lg px-4 py-3">
  <p class="text-sm">A simple success alert</p>
</div>
<div class="bg-yellow-50 border border-yellow-200 text-yellow-700 rounded-lg px-4 py-3">
  <p class="text-sm">A simple warning alert</p>
</div>
<div class="bg-red-50 border border-red-200 text-red-700 rounded-lg px-4 py-3">
  <p class="text-sm">A simple danger alert</p>
</div>

<div class="bg-gray-500 text-white rounded-lg px-4 py-3">
  <p class="text-sm">A simple default alert</p>
</div>
<div class="bg-alpine-500 text-white rounded-lg px-4 py-3">
  <p class="text-sm">A simple primary alert</p>
</div>
<div class="bg-green-500 text-white rounded-lg px-4 py-3">
  <p class="text-sm">A simple success alert</p>
</div>
<div class="bg-yellow-500 text-white rounded-lg px-4 py-3">
  <p class="text-sm">A simple warning alert</p>
</div>
<div class="bg-red-500 text-white rounded-lg px-4 py-3">
  <p class="text-sm">A simple danger alert</p>
</div>

<div class="bg-gray-50 border-l-4 border-gray-500 text-gray-700 rounded-lg px-4 py-3">
  <p class="text-sm">A simple default alert</p>
</div>
<div class="bg-alpine-50 border-l-4 border-alpine-500 text-alpine-700 rounded-lg px-4 py-3">
  <p class="text-sm">A simple primary alert</p>
</div>
<div class="bg-green-50 border-l-4 border-green-500 text-green-700 rounded-lg px-4 py-3">
  <p class="text-sm">A simple success alert</p>
</div>
<div class="bg-yellow-50 border-l-4 border-yellow-500 text-yellow-700 rounded-lg px-4 py-3">
  <p class="text-sm">A simple warning alert</p>
</div>
<div class="bg-red-50 border-l-4 border-red-500 text-red-700 rounded-lg px-4 py-3">
  <p class="text-sm">A simple danger alert</p>
</div>

<div class="bg-alpine-50 border border-alpine-200 text-alpine-700 rounded-lg px-4 py-3 flex items-center justify-between" x-data="{ show: true }" x-show="show" x-cloak>
  <p class="text-sm">This is a dismissible alert. Click the X button to close it.</p>
  <button @click="show = false" class="text-alpine-400 hover:text-alpine-600 flex-shrink-0 ml-3 p-1 rounded hover:bg-alpine-100 transition-colors">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
    </svg>
  </button>
</div>

<div class="bg-red-50 border border-red-200 text-red-700 rounded-lg px-4 py-3 flex items-center justify-between" x-data="{ show: true }" x-show="show" x-cloak>
  <p class="text-sm">Danger alert - you can dismiss this too.</p>
  <button @click="show = false" class="text-red-400 hover:text-red-600 flex-shrink-0 ml-3 p-1 rounded hover:bg-red-100 transition-colors">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
    </svg>
  </button>
</div>