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>
  );
}

rounded=border-radiusをそれぞれで制御し，justify-centerで繋げると1つの要素のように振る舞うことができます．そのため，このdivをまとめてコンポーネント化することで自由な場所に貼り付けても分離しないようにします．

メモ

rounded-sのsは start, e は end

上のコードによって下の結果が得られます．

使用したアイコン

アイコン名

i-tabler-zoom

導入方法

次を参照してください．

自動更新

コメントはまだありません

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.