TailwindCSS Custom File Upload

 <div class="flex justify-center py-20">
    <div class=""><label for="photo" class="block text-sm font-medium leading-6 text-gray-900">Photo</label>
      <div class="flex items-center mt-2 gap-x-3"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
          fill="currentColor" aria-hidden="true" data-slot="icon" class="w-12 h-12 text-gray-300">
          <path fill-rule="evenodd"
            d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-5.5-2.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM10 12a5.99 5.99 0 0 0-4.793 2.39A6.483 6.483 0 0 0 10 16.5a6.483 6.483 0 0 0 4.793-2.11A5.99 5.99 0 0 0 10 12Z"
            clip-rule="evenodd"></path>
        </svg><label for="file-upload"
          class="rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"><span>
            <!-- -->Change<input type="file" id="file-upload" class="sr-only" name="file-upload"></span></label></div>
    </div>
  </div>