Modify the style of the drop area of FilePond

Question

Currently I have this div as a area for drag and dropping files:

This is the HTML code for it:

<div>
   <p class="text-[14px] font-normal leading-[150%] text-tertiary-text">Прикачи нов файл</p>
   <div id="filepond"
      class=" mb-4 inline-flex w-full items-center rounded-lg bg-brand-color-ultralight px-4 py-7 text-base text-brand-color border border-brand-color border-dashed"
      >
      <span class="mr-2">
         <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
            <path opacity="0.4" d="M41 20.38H35.22C30.48 20.38 26.62 16.52 26.62 11.78V6C26.62 4.9 25.72 4 24.62 4H16.14C9.98 4 5 8 5 15.14V32.86C5 40 9.98 44 16.14 44H31.86C38.02 44 43 40 43 32.86V22.38C43 21.28 42.1 20.38 41 20.38Z" fill="#2384C6"/>
            <path d="M31.6 4.41999C30.78 3.59999 29.36 4.15999 29.36 5.29999V12.28C29.36 15.2 31.84 17.62 34.86 17.62C36.76 17.64 39.4 17.64 41.66 17.64C42.8 17.64 43.4 16.3 42.6 15.5C39.72 12.6 34.56 7.37999 31.6 4.41999Z" fill="#2384C6"/>
            <path d="M23.06 24.94L19.06 20.94C19.04 20.92 19.02 20.92 19.02 20.9C18.9 20.78 18.74 20.68 18.58 20.6C18.56 20.6 18.56 20.6 18.54 20.6C18.38 20.54 18.22 20.52 18.06 20.5C18 20.5 17.96 20.5 17.9 20.5C17.78 20.5 17.64 20.54 17.52 20.58C17.46 20.6 17.42 20.62 17.38 20.64C17.22 20.72 17.06 20.8 16.94 20.94L12.94 24.94C12.36 25.52 12.36 26.48 12.94 27.06C13.52 27.64 14.48 27.64 15.06 27.06L16.5 25.62V34C16.5 34.82 17.18 35.5 18 35.5C18.82 35.5 19.5 34.82 19.5 34V25.62L20.94 27.06C21.24 27.36 21.62 27.5 22 27.5C22.38 27.5 22.76 27.36 23.06 27.06C23.64 26.48 23.64 25.52 23.06 24.94Z" fill="#2384C6"/>
         </svg>
      </span>
      Натисни или завлечи файл в това поле за да го прикачиш. Поддържани формати са PDF, JPG, PNG, TXT, DOC Максимален размер на файл 20 MB. / Максимален брой файлове 10.
   </div>
</div>

This is my code for FilePond:

const inputElement = document.getElementById('filepond');

const pond = FilePond.create(inputElement, {
    allowMultiple: true,
    dropOnElement: true,
    acceptedFileTypes: ['application/pdf', 'image/jpeg', 'image/png', 'text/plain', 'application/msword'],
    maxFiles: 10,
    credits: false,
    labelIdle: 'Натисни или завлечи файл в това поле за да го прикачиш. Поддържани формати са PDF, JPG, PNG, TXT, DOC Максимален размер на файл 20 MB. / Максимален брой файлове 10.',
    server: {
        process: {
            url: '/your-upload-endpoint',
            method: 'POST',
        },
    },
});

The result I get is this:

How can I achieve the same look like the first image and keep the click/drop to upload and the uploaded files to show in a list inside the div? Just like the normal Filepond behaviour just different styling. I am using Tailwind.