フォーム作成
Tailwindの練習としてフォームを作成してみました。
結果としては下記のような感じです
フォーカスすると下のボーダにだけ色がつくデザインにしてみました。
<divclass="mt-8"><formclass="w-10/12 mx-auto md:max-w-md"><divclass="mb-8"><labelfor="name"class="text-sm block">お名前</label><inputtype="text"id="name"class="w-full py-2 border-b focus:outline-none focus:border-b-2 focus:border-indigo-500 placeholder-gray-500 placeholder-opacity-50"placeholder="山田太郎"></div><divclass="mb-8"><labelfor="email"class="text-sm block">Eメール</label><inputtype="email"id="email"class="w-full py-2 border-b focus:outline-none focus:border-b-2 focus:border-indigo-500 placeholder-gray-500 placeholder-opacity-50"placeholder="Eメール"></div><divclass="mb-8"><labelfor="address"class="text-sm block">住所</label><inputtype="text"id="address"class="w-full py-2 border-b focus:outline-none focus:border-b-2 focus:border-indigo-500 placeholder-gray-500 placeholder-opacity-50"placeholder="住所"></div><divclass="mb-8"><labelfor="phone_number"class="text-sm block">電話番号</label><inputtype="tel"id="phone_number"class="w-full py-2 border-b focus:outline-none focus:border-b-2 focus:border-indigo-500 placeholder-gray-500 placeholder-opacity-50"placeholder="電話番号"></div><divclass="mb-8"><labelfor="other">その他</label><textareaid="other"cols="30"rows="8"class="w-full py-2 border-b focus:outline-none focus:border-b-2 focus:border-indigo-500 placeholder-gray-500 placeholder-opacity-50"placeholder="その他"></textarea></div></form></div>focus:outline-noneをつけるとfocus時の周りの線を消すことができます。