TailwindとMUIで作るデザイン

囲みボタン

参考：線で囲ったタイトルデザイン3

<div style="position:relative;border:1px solid #efc4c0;border-radius:4px;padding:1.5em 1em;">
<div style="position:absolute;top: -12px;left: 10px;padding: 5px 25px;background-color:#ffffff;border-radius:4px;color:#F6BCAC;line-height: 1em;">タイトル入力</div>
<div style="margin: 0; padding: 0;">テキスト入力</div>
</div>

これを tailwindとmuiで構成すると…

                <div className="relative border-2 border-orange-200 rounded-md p-3">
                  <div className="absolute top-0 left-2 -mt-2.5 px-2 bg-white rounded-md text-cyan-950 font-semibold text-sm">
                    支払い方法
                  </div>