Share modal

<div class="flex justify-center items-center bg-gray-100 w-full min-h-screen text-gray-800"> <div class="rounded-md bg-white shadow w-8/12 max-w-7xl py-8"> <div class="flex justify-between items-center w-full px-8 border-b border-gray-100 pb-4"> <div class=""><span class="font-semibold">Share this album</span> <span class="ml-2 px-2 py-1 bg-red-100 border-2 border-red-400 text-red-400 rounded">Private</span></div><button class=""><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" /> </svg></button> </div> <div class="px-8 pt-4 border-b border-gray-100 pb-2"> <div class="font-semibold">Link</div><input type="text" disabled="disabled" class="w-full px-4 py-2 my-2 text-gray-500 select-all" value="https://tailwind-cards/collection"> <button class="ml-auto block px-4 py-1 rounded border border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white transition-colors">Copy Link</button> </div> <div class="px-8 pt-4"> <div class="font-semibold">Invite by Email</div><input type="text" class="w-full px-4 py-2 my-2 rounded border border-gray-300" placeholder="Enter email addresses separated by commas"> <button class="ml-auto block px-4 py-1 rounded border border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white transition-colors">Send Invite</button> </div> </div> </div>