tailwind_native_form_control_styling_file.html

<div>
    <form class="flex items-center space-x-6">
        <div class="shrink-0">
            <img class="h-16 w-16 object-cover rounded-full bg-blue-100" src="https://tararoutray.com/assets/images/tararoutray.png" alt="Current profile photo" />
        </div>
        <label class="block">
            <span class="sr-only">Choose profile photo</span>
            <!-- Utility used: text-blue-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-normal file:bg-blue-100 file:text-blue-700 hover:file:bg-blue-200 -->
            <input type="file" class="block w-full text-sm text-blue-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-normal file:bg-blue-100 file:text-blue-700 hover:file:bg-blue-200" />
        </label>
    </form>
</div>