【Tailwind CSS】検索フィールドとオブジェクトの一体化

export default function SearchBox() {
return (
  <div className='flex justify-center'>
    <input
      placeholder='検索'
      className='h-8 w-48 rounded-e-none rounded-s-3xl border-y border-l border-gray-700 px-3 transition-colors dark:bg-slate-800'
    />
    <button
      className='flex h-8 w-10 items-center justify-center rounded-e-3xl border-y border-r border-gray-700 bg-gray-700 px-2 transition-colors hover:border-gray-800 hover:bg-gray-800'
    >
      <span className='i-tabler-zoom size-4 bg-white transition-colors dark:bg-slate-200' />
    </button>
  </div>
  );
}

i-tabler-zoom