Tailwind CSSで織りなすInput内に右寄せのボタンがある世界

一緒にアニメ・ゲームを楽しめるパートナーを探すなら【ヲタ婚】

1年以内の成婚率41.3%！
平均6.6ヶ月で婚約できるスマホの結婚相談所【naco-do】

選ばれて10年。エンジニアの気持ちが分かる転職エージェントは【アイムファクトリー】

こんなやつ

ソース

※Reactです

<div className="relative">
  <input
    type="text"
    className="block w-full h-10 rounded-md border-gray-300 bg-gray-100 pl-7 pr-12"
    placeholder="ここに入力"
    required
  />
  <div className="absolute inset-y-0 right-1 flex my-2">
    <button
      type="button"
      className="justify-center rounded-md border border-transparent bg-blue-400 px-4 py-1 text-sm font-bold text-white"
    >
      検索
    </button>
  </div>
</div>