<div class="mx-auto max-w-md p-6">
<div class="relative">
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<!-- Heroicons: mini/chevron-down -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 text-gray-600">
<path
fill-rule="evenodd"
d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
clip-rule="evenodd"
/>
</svg>
</div>
<select
class="h-10 w-full appearance-none rounded-lg border border-gray-300 bg-white pl-3 pr-8 text-sm text-gray-900 shadow-sm focus:border-gray-500 focus:outline-0 focus:ring-1 focus:ring-gray-500"
>
<option value="" disabled selected>Select country…</option>
<option value="TR">Turkey</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
</select>
</div>
</div>
<div class="mx-auto max-w-md p-6">
<div>
<label class="mb-1.5 block text-sm text-gray-700">Country</label>
<div class="relative">
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<!-- Heroicons: mini/chevron-down -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-600">
<path
fill-rule="evenodd"
d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
clip-rule="evenodd"
/>
</svg>
</div>
<select
class="h-10 w-full appearance-none rounded-lg border border-gray-300 bg-white pl-3 pr-8 text-sm text-gray-900 shadow-sm focus:border-gray-500 focus:outline-0 focus:ring-1 focus:ring-gray-500"
>
<option value="" disabled selected>Select country…</option>
<option value="TR">Turkey</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
</select>
</div>
</div>
</div>
<div class="mx-auto max-w-md p-6">
<div>
<label class="mb-1.5 block text-sm text-gray-700">Country</label>
<div class="relative">
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<!-- Heroicons: mini/chevron-down -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 text-gray-600">
<path
fill-rule="evenodd"
d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
clip-rule="evenodd"
/>
</svg>
</div>
<select
class="h-10 w-full appearance-none rounded-lg border border-gray-300 bg-white pl-3 pr-8 text-sm text-gray-900 shadow-sm focus:border-gray-500 focus:outline-0 focus:ring-1 focus:ring-gray-500"
>
<option value="" disabled selected>Select country…</option>
<option value="TR">Turkey</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
</select>
</div>
<div class="mt-2 text-xs text-gray-700">Choose the country where you currently reside</div>
</div>
</div>
<div class="mx-auto max-w-md p-6">
<div>
<label class="mb-1.5 block text-sm text-gray-700">Country</label>
<div class="relative">
<!-- Flag -->
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<svg width="21" height="16" viewBox="0 0 21 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M19 0.5H2C0.89543 0.5 0 1.39543 0 2.5V13.5C0 14.6046 0.89543 15.5 2 15.5H19C20.1046 15.5 21 14.6046 21 13.5V2.5C21 1.39543 20.1046 0.5 19 0.5Z"
fill="#E25950"
/>
<path
d="M9.43101 3.59599C8.46404 3.8148 7.59922 4.35358 6.97654 5.12507C6.35387 5.89656 6.00979 6.85562 6.00001 7.84699C6.01386 8.95553 6.44322 10.0185 7.20317 10.8257C7.96312 11.6328 8.99832 12.1254 10.104 12.206C9.45048 12.4544 8.74803 12.5472 8.05241 12.4769C7.35679 12.4065 6.68714 12.1751 6.09654 11.8009C5.50594 11.4267 5.01065 10.9201 4.64998 10.3211C4.2893 9.72215 4.07314 9.04739 4.01866 8.35035C3.96417 7.65331 4.07287 6.95316 4.3361 6.30544C4.59934 5.65773 5.00986 5.08025 5.53514 4.61883C6.06042 4.15741 6.68601 3.82474 7.36226 3.6472C8.0385 3.46965 8.74681 3.45211 9.43101 3.59599Z"
fill="white"
/>
<path
d="M11.5 9.5C12.3284 9.5 13 8.82843 13 8C13 7.17157 12.3284 6.5 11.5 6.5C10.6716 6.5 10 7.17157 10 8C10 8.82843 10.6716 9.5 11.5 9.5Z"
fill="white"
/>
</svg>
</div>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<!-- Heroicons: mini/chevron-down -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 text-gray-600">
<path
fill-rule="evenodd"
d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
clip-rule="evenodd"
/>
</svg>
</div>
<select
class="h-10 w-full appearance-none rounded-lg border border-gray-300 bg-white pl-10 pr-8 text-sm text-gray-900 shadow-sm focus:border-gray-500 focus:outline-0 focus:ring-1 focus:ring-gray-500"
>
<option value="TR" selected>Turkey</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
</select>
</div>
</div>
</div>