Text Input
<x-form action="" class="w-full lg:w-1/2 mb-6">
<div class="grid grid-cols-12 gap-x-6 pb-2">
<div class="col-span-6">
<x-label for="first_name" class="w-full" />
<x-input name="first_name" class="w-full p-2 border border-gray-400 rounded" />
<x-error field="first_name" class="text-red-500 text-sm">
<ul>
@foreach ($component->messages($errors) as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</x-error>
</div>
<div class="col-span-6">
<x-label for="last_name" class="w-full" />
<x-input name="last_name" class="w-full p-2 border border-gray-400 rounded" />
<x-error field="last_name" class="text-red-500 text-sm">
<ul>
@foreach ($component->messages($errors) as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</x-error>
</div>
</div>
<div class="pb-2">
<x-label for="street_address" class="w-full" />
<x-input name="street_address" class="w-full p-2 border border-gray-400 rounded" />
<x-error field="street_address" class="text-red-500 text-sm">
<ul>
@foreach ($component->messages($errors) as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</x-error>
</div>
<div class="grid grid-cols-12 gap-x-6 pb-2">
<div class="col-span-7">
<x-label for="city" class="w-full" />
<x-input name="city" class="w-full p-2 border border-gray-400 rounded" />
<x-error field="city" class="text-red-500 text-sm">
<ul>
@foreach ($component->messages($errors) as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</x-error>
</div>
<div class="col-span-2">
<x-label for="state" class="w-full" />
<x-input name="state" class="w-full p-2 border border-gray-400 rounded" />
<x-error field="state" class="text-red-500 text-sm">
<ul>
@foreach ($component->messages($errors) as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</x-error>
</div>
<div class="col-span-3">
<x-label for="zip_code" class="w-full" />
<x-input name="zip_code" class="w-full p-2 border border-gray-400 rounded" />
<x-error field="zip_code" class="text-red-500 text-sm">
<ul>
@foreach ($component->messages($errors) as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</x-error>
</div>
</div>
</x-form>