<div class=”max-w-2xl mx-auto p-4″>
<div class=”bg-sky-200 p-4 mb-8″>
<h1 class=”text-lg”>LEGENDってCSSの効きがわるいよね</h1>
</div>
<form class=”space-y-6″>
<div class=”space-y-4″>
<div>
<label class=”block”>
<span class=”text-gray-700″>お名前</span>
<span class=”text-red-500 ml-1″>(必須)</span>
</label>
<input
type=”text”
class=”mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-sky-300 focus:ring focus:ring-sky-200 focus:ring-opacity-50″
placeholder=”お名前”
/>
</div>
<div>
<label class=”block text-gray-700″>
ふりがな
</label>
<input
type=”text”
class=”mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-sky-300 focus:ring focus:ring-sky-200 focus:ring-opacity-50″
placeholder=”ふりがな”
/>
</div>
<div>
<label class=”block”>
<span class=”text-gray-700″>メールアドレス</span>
<span class=”text-red-500 ml-1″>*</span>
</label>
<input
type=”email”
class=”mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-sky-300 focus:ring focus:ring-sky-200 focus:ring-opacity-50″
placeholder=”aaa@example.com”
/>
</div>
<div>
<label class=”block”>
<span class=”text-gray-700″>電話番号</span>
<span class=”text-gray-500 ml-1″>(必須じゃないYO！)</span>
</label>
<input
type=”tel”
class=”mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-sky-300 focus:ring focus:ring-sky-200 focus:ring-opacity-50″
placeholder=”000-111-2456″
/>
</div>
<div>
<label class=”block”>
<span class=”text-gray-700″>郵便番号</span>
<span class=”text-red-500 ml-1″>(必須)</span>
</label>
<input
type=”text”
class=”mt-1 block w-1/3 rounded-md border-gray-300 shadow-sm focus:border-sky-300 focus:ring focus:ring-sky-200 focus:ring-opacity-50″
placeholder=”111-2222″
/>
</div>
<div>
<label class=”block”>
<span class=”text-gray-700″>住所</span>
<span class=”text-red-500 ml-1″>(必須)</span>
</label>
<input
type=”text”
class=”mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-sky-300 focus:ring focus:ring-sky-200 focus:ring-opacity-50 mb-2″
placeholder=”ご住所”
/>
<input
type=”text”
class=”block w-full rounded-md border-gray-300 shadow-sm focus:border-sky-300 focus:ring focus:ring-sky-200 focus:ring-opacity-50″
placeholder=”建物名・部屋番号など”
/>
</div>
<div>
<label class=”block”>
<span class=”text-gray-700″>お問い合わせ内容</span>
<span class=”text-red-500 ml-1″>(必須)</span>
</label>
<textarea
class=”mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-sky-300 focus:ring focus:ring-sky-200 focus:ring-opacity-50″
rows=”6″
/>
</div>
</div>
<div class=”flex justify-center”>
<button
type=”submit”
class=”px-6 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2″
>
送信
</button>
</div>
</form>
</div>