The layout was a little bit off even after Jeffrey's update, so I tweaked it a little bit:
<div class="mt-10 flex flex-col gap-2">
            <div class="relative inline-block mx-auto lg:bg-gray-200 rounded-full">
                <form method="POST" action="/newsletter" class="lg:flex text-sm">
                    @csrf

                    <div class="lg:py-3 lg:px-5 flex items-center">
                        <label for="email" class="hidden lg:inline-block">
                            <img src="/images/mailbox-icon.svg" alt="mailbox letter">
                        </label>

                        <input
                            id="email"
                            name="email"
                            type="text"
                            placeholder="Your email address"
                            class="lg:bg-transparent py-2 lg:py-0 pl-4 focus-within:outline-none"
                        >
                    </div>

                    <button type="submit"
                            class="transition-colors duration-300 bg-blue-500 hover:bg-blue-600 mt-4 lg:mt-0 lg:ml-3 rounded-full text-xs font-semibold text-white uppercase py-3 px-8"
                    >
                        Subscribe
                    </button>
                </form>
            </div>
            @error('email')
            <span class="text-red-500 text-xs">{{ $message }}</span>
            @enderror
        </div>
Make the Newsletter Form Work

Updated Series Available
