<div class="bg-gray-50">
    <div
        class="container mx-auto text-center py-12 px-4 sm:px-6 lg:py-16 lg:px-8"
    >
        <h2
            class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl"
        >
            <span class="block">Sign Up!</span>
        </h2>
        <p class="py-4 text-gray-500 text-lg tracking-wide w-full md:w-3/5 mx-auto text-center">
            We will send you the hottest deals straight to your inbox. So you are always in on the best-kept software secrets.
        </p>
        <form action="" method="post" class="mx-auto w-full md:w-3/5">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-0 gap-y-3 md:gap-3">
                <div class="col-span-2">
                    <input type="email" name="email" id="email" placeholder="Enter your email address.." class="w-full bg-white px-5 py-6 border border-gray-100 rounded-md h-12 shadow">
                </div>
                <div>
                    <button type="submit"
                    class="block w-full text-center md:inline-flex items-center justify-center px-5 py-3 rounded-md border border-transparent text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700"
                        >Submit</button>
                </div>
            </div>
        </form>
    </div>
</div>

                

                    const CTA = () => {
    return (
        <div className="bg-gray-50">
            <div className="container mx-auto text-center py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
                <h2 className="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
                    <span className="block">Sign Up!</span>
                </h2>
                <p className="py-4 text-gray-500 text-lg tracking-wide w-full md:w-3/5 mx-auto text-center">
                    We will send you the hottest deals straight to your inbox.
                    So you are always in on the best-kept software secrets.
                </p>
                <form action method="post" className="mx-auto w-full md:w-3/5">
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-0 gap-y-3 md:gap-3">
                        <div className="col-span-2">
                            <input
                                type="email"
                                name="email"
                                id="email"
                                placeholder="Enter your email address.."
                                className="w-full bg-white px-5 py-6 border border-gray-100 rounded-md h-12 shadow"
                            />
                        </div>
                        <div>
                            <button
                                type="submit"
                                className="block w-full text-center md:inline-flex items-center justify-center px-5 py-3 rounded-md border border-transparent text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700"
                            >
                                Submit
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    );
}

export default CTA;