<div class="flex justify-center items-center bg-gray-100 w-full min-h-screen text-gray-800">
<div class="rounded-lg bg-white w-full max-w-lg p-6 shadow-md">
<h1 class="text-lg font-bold">Add a custom domain</h1>
<p class="text-gray-500">Link a custom domain for your help & support page</p>
<div class="my-8 flex"><span class="px-2 py-1 border-2 rounded-tl-md rounded-bl-md border-blue-100 bg-blue-50 font-medium">https://</span> <input type="url" class="border-2 rounded-tr-md rounded-br-md border-blue-100 flex-1 border-l-0 px-1" placeholder="my-custom-domain.com"></div>
<div class="flex justify-between items-center"><a href="#" class="text-gray-500 hover:text-black transition-colors">Need help?</a> <button class="px-4 py-2 rounded-md text-white bg-blue-600 hover:bg-blue-800 transition-colors">Add Domain</button></div>
</div>
</div>