Sign Out

<div class="flex items-center justify-center p-6">
  <div class="w-full max-w-md rounded-xl border border-gray-200 bg-white p-8 shadow-sm">
    <div class="mb-6 flex flex-col items-center text-center">
      <div class="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-rose-100">
        <svg class="h-6 w-6 text-rose-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15m-3 0-3-3m0 0 3-3m-3 3H15" />
        </svg>
      </div>
      <h2 class="text-xl font-semibold text-gray-900">Sign out of your account?</h2>
      <p class="mt-1 text-sm text-gray-500">You'll need to sign in again to access your dashboard.</p>
    </div>
    <div class="space-y-3">
          <button type="button" class="w-full rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-medium text-white shadow-sm hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Sign out</button>
          <button type="button" class="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50">Cancel</button>
    </div>
  </div>
</div>