<div class="flex justify-center m-10">
    <div class="w-80">
        <label for="first_name" class="block text-sm font-medium text-gray-700">
            First Name
        </label>
        <input type="text" name="first_name" id="first_name"
            class="w-full rounded-md px-4 py-2 mt-1 text-sm outline-none border-2 border-gray-200 focus:border-indigo-500"
            placeholder="John">
    </div>
</div>

<div class="flex justify-center m-10">
    <div class="w-80">
        <label for="twitter_handle" class="block text-sm font-medium text-gray-700">
            Twitter Handle
        </label>
        <div class="mt-1 flex rounded-md">
            <span
                class="inline-flex items-center px-4 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-xs">
                http://twitter.com/
            </span>
            <input type="text" name="twitter_handle" id="twitter_handle"
                class="w-full rounded-r-md px-4 py-2 text-sm outline-none border-2 border-gray-200 focus:border-indigo-500"
                placeholder="johndoe">
        </div>
    </div>
</div>

<div class="flex justify-center m-10">
    <div class="w-96">
        <label for="bio" class="block text-sm font-medium text-gray-700">
            Bio
        </label>
        <textarea name="bio" id="bio"
            class="w-full rounded-md px-4 py-2 mt-1 text-sm outline-none border-2 border-gray-200 focus:border-indigo-500"
            rows="3" placeholder="Enter brief about you"></textarea>
    </div>
</div>

<div class="flex justify-center m-10">
    <div class="w-80">
        <label for="country" class="block text-sm font-medium text-gray-700">
            Country
        </label>
        <select name="country" id="country"
            class="w-full rounded-md px-4 py-2 mt-1 text-sm outline-none border-2 border-gray-200 focus:border-indigo-500">
            <option value="" selected disabled>Choose a Country</option>
            <option value="India">India</option>
            <option value="United States">United States</option>
            <option value="Australia">Australia</option>
            <option value="Vietnam">Vietnam</option>
        </select>
    </div>
</div>

<div class="flex justify-center m-10">
    <div class="w-20">
        <label for="gender" class="block text-sm font-medium text-gray-700 mb-1">
            Gender
        </label>
        <div class="flex items-center mt-1">
            <input id="gender_male" name="gender" type="radio"
                class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
            <label for="gender_male" class="ml-2 block text-sm font-medium text-gray-700">
                Male
            </label>
        </div>
        <div class="flex items-center mt-1">
            <input id="gender_female" name="gender" type="radio"
                class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
            <label for="gender_female" class="ml-2 block text-sm font-medium text-gray-700">
                Female
            </label>
        </div>
        <div class="flex items-center mt-1">
            <input id="gender_other" name="gender" type="radio"
                class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
            <label for="gender_other" class="ml-2 block text-sm font-medium text-gray-700">
                Other
            </label>
        </div>
    </div>
</div>

<div class="flex justify-center m-10">
    <div class="w-20">
        <label for="gender" class="block text-sm font-medium text-gray-700 mb-1">
            Emails
        </label>
        <div class="flex items-center mt-1">
            <input id="emails_news" name="emails" type="checkbox"
                class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
            <label for="emails_news" class="ml-2 block text-sm font-medium text-gray-700">
                News
            </label>
        </div>
        <div class="flex items-center mt-1">
            <input id="emails_offers" name="emails" type="checkbox"
                class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
            <label for="emails_offers" class="ml-2 block text-sm font-medium text-gray-700">
                Offers
            </label>
        </div>
    </div>
</div>