TailwindCSSでフォーム作ってみた

フォーム作成

Tailwindの練習としてフォームを作成してみました。
結果としては下記のような感じです

フォーカスすると下のボーダにだけ色がつくデザインにしてみました。

    <div class="mt-8">
        <form class="w-10/12 mx-auto md:max-w-md">
            <div class="mb-8">
                <label for="name" class="text-sm block">お名前</label>
                <input type="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>
            <div class="mb-8">
                <label for="email" class="text-sm block">Eメール</label>
                <input type="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>
            <div class="mb-8">
                <label for="address" class="text-sm block">住所</label>
                <input type="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>
            <div class="mb-8">
                <label for="phone_number" class="text-sm block">電話番号</label>
                <input type="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>
            <div class="mb-8">
                <label for="other">その他</label>
                <textarea  id="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時の周りの線を消すことができます。