Alert Dismissible

                    <div role="alert" class="flex items-center justify-between p-4 bg-blue-50 border-l-4 border-blue-500 text-blue-700 rounded-r-md">
  <div class="flex items-center">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current h-6 w-6 mr-3">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
    </svg>
    <span>Your trial expires in 7 days. Upgrade your account now.</span>
  </div>
  <button class="text-blue-500 hover:text-blue-700" aria-label="Close">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
    </svg>
  </button>
</div>