Invite People to Team - Tailwind Component
Adding people to a team, it is made with Tailwind CSS
form
Loading component...
53 lines
<div class="bg-gradient-to-r from-blue-100 via-blue-300 to-blue-500 h-screen py-8">
<div class="w-full flex items-center justify-center">
<div class="bg-gray-100 rounded-lg shadow-lg flex-col w-5/6 sm:max-w-2xl px-6">
<div class="px-5 py-3 mb-3 text-3xl font-medium text-gray-800 mt-6">
<div class="">Invite people to team</div>
</div>
<hr class="border-1 border-gray-300">
<div class="flex flex-col ml-4 py-4">
<label for="search" class="text-gray-700 font-medium mb-2">Invite Share Link</label>
<div class="flex rounded bg-gray-200 rounded-r-full">
<input type="search" d
class="w-full border-none bg-gray-200 px-4 py-1 text-gray-600 outline-none focus:outline-none"
value="https://invite.google.audhaidhadhaudhasdhafdgdgdfg...." />
<button type="button"
class="px-4 w-full sm:w-4/12 py-2 font-semibold border border-indigo-800 bg-gray-200 rounded-full text-indigo-800 hover:bg-indigo-800 hover:text-gray-100">
Copy link </button>
</div>
</div>
<div class="flex mt-7 items-center text-center">
<hr class="border-gray-300 border-1 w-full rounded-md">
<label class="block font-medium text-sm text-gray-600 w-full">
Or
</label>
<hr class="border-gray-300 border-1 w-full rounded-md">
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-5 md:gap-8 mt-5">
<div class="grid grid-cols-1">
<label class="md:text-sm text-xs text-gray-600 text-light font-semibold">Email Address</label>
<input class="py-2 px-3 rounded-lg border-2 mt-1 focus:outline-none" type="email"
placeholder="eg. [email protected]" />
<input class="py-2 px-3 rounded-lg border-2 mt-1 focus:outline-none" type="email"
placeholder="eg. [email protected]" />
</div>
<div class="grid grid-cols-1">
<label class="md:text-sm text-xs text-gray-500 text-light font-semibold">Full Name (Optional)</label>
<input class="py-2 px-3 rounded-lg border-2 mt-1 focus:outline-none" type="text" placeholder="Optional" />
<input class="py-2 px-3 rounded-lg border-2 mt-1 focus:outline-none" type="text" placeholder="Optional" />
</div>
</div>
<div class="flex flex-col sm:flex-row justify-center sm:justify-between space-y-4 sm:space-x-0 items-center my-6">
<div class="inline-flex items-center text-indigo-700 font-medium cursor-pointer hover:text-indigo-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-4" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z"
clip-rule="evenodd" />
</svg>
Add another person
</div>
<div class="py-2 px-8 bg-indigo-700 rounded-full text-gray-300 hover:text-gray-50 cursor-pointer">Invite</div>
</div>
</div>
</div>
</div>