<section id="clients" class="py-8 bg-gray-900">
    <div class="relative container p-2 py-8 lg:p-16 w-full lg:w-4/5
        rounded
        mx-auto
        flex
        flex-col
        flex-nowrap
        justify-content
        items-center bg-gray-800">
        <span class="w-5 h-5 bg-green-500 rounded-full absolute -top-1
            left-32 lg:left-72"></span>
        <span class="w-5 h-5 bg-red-500 rounded-full absolute
            bottom-10 right-4 lg:right-72"></span>
        <span class="w-5 h-5 bg-yellow-500 rounded-full absolute
            -bottom-1 left-16 lg:left-48"></span>
        <h2 class="leading-tight lg:leading-none w-full text-white
            text-4xl
            lg:text-5xl
            font-bold
            lg:w-4/5
            text-center">Free HTML
            Components for
            all
            business
            solutions</h2>
        <p class="text-center text-normal my-4 lg:w-3/5
            text-gray-400">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Commodi, harum nihil. Enim distinctio eligendi expedita
            commodi aspernatur accusantium cumque soluta tempore.
        </p>
        <a href="#" class="relative z-20 shadow-lg block bg-indigo-600 font-semibold 
            text-white
            rounded p-4">Download
            for
            free -
            forever</a>
        <p class="text-xs text-gray-200 mt-2">Responsive on all screens</p>
    </div>
</section>
                

                    const CTA = () => {
    return (
        <section id="clients" className="py-8 bg-gray-900">
            <div
                className="relative container p-2 py-8 lg:p-16 w-full lg:w-4/5
  rounded
  mx-auto
  flex
  flex-col
  flex-nowrap
  justify-content
  items-center bg-gray-800"
            >
                <span
                    className="w-5 h-5 bg-green-500 rounded-full absolute -top-1
      left-32 lg:left-72"
                />
                <span
                    className="w-5 h-5 bg-red-500 rounded-full absolute
      bottom-10 right-4 lg:right-72"
                />
                <span
                    className="w-5 h-5 bg-yellow-500 rounded-full absolute
      -bottom-1 left-16 lg:left-48"
                />
                <h2
                    className="leading-tight lg:leading-none w-full text-white
      text-4xl
      lg:text-5xl
      font-bold
      lg:w-4/5
      text-center"
                >
                    Free HTML Components for all business solutions
                </h2>
                <p
                    className="text-center text-normal my-4 lg:w-3/5
      text-gray-400"
                >
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Commodi, harum nihil. Enim distinctio eligendi expedita
                    commodi aspernatur accusantium cumque soluta tempore.
                </p>
                <a
                    href="#"
                    className="relative z-20 shadow-lg block bg-indigo-600 font-semibold
      text-white
      rounded p-4"
                >
                    Download for free - forever
                </a>
                <p className="text-xs text-gray-200 mt-2">
                    Responsive on all screens
                </p>
            </div>
        </section>
    );
}

export default CTA;
                

                    <section id="clients" class="py-8">
    <div class="relative container p-2 py-8 lg:p-16 w-full lg:w-4/5
        rounded
        mx-auto
        flex
        flex-col
        flex-nowrap
        justify-content
        items-center bg-indigo-50">
        <span class="w-5 h-5 bg-green-500 rounded-full absolute -top-1
            left-32 lg:left-72"></span>
        <span class="w-5 h-5 bg-red-500 rounded-full absolute
            bottom-10 right-4 lg:right-72"></span>
        <span class="w-5 h-5 bg-yellow-500 rounded-full absolute
            -bottom-1 left-16 lg:left-48"></span>
        <h2 class="leading-tight lg:leading-none w-full text-gray-700
            text-4xl
            lg:text-5xl
            font-bold
            lg:w-4/5
            text-center">Free HTML
            Components for
            all
            business
            solutions</h2>
        <p class="text-center text-normal my-4 lg:w-3/5
            text-gray-600">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Commodi, harum nihil. Enim distinctio eligendi expedita
            commodi aspernatur accusantium cumque soluta tempore.
        </p>
        <a href="#" class="relative z-20 shadow-lg block bg-indigo-600
            text-white font-semibold
            rounded p-4">Download
            for
            free -
            forever</a>
        <p class="text-xs text-gray-600 mt-2">Responsive on all screens</p>
    </div>
</section>
                

                    const CTA = () => {
    return (
        <section id="clients" className="py-8">
            <div
                className="relative container p-2 py-8 lg:p-16 w-full lg:w-4/5
  rounded
  mx-auto
  flex
  flex-col
  flex-nowrap
  justify-content
  items-center bg-indigo-50"
            >
                <span
                    className="w-5 h-5 bg-green-500 rounded-full absolute -top-1
      left-32 lg:left-72"
                />
                <span
                    className="w-5 h-5 bg-red-500 rounded-full absolute
      bottom-10 right-4 lg:right-72"
                />
                <span
                    className="w-5 h-5 bg-yellow-500 rounded-full absolute
      -bottom-1 left-16 lg:left-48"
                />
                <h2
                    className="leading-tight lg:leading-none w-full text-gray-700
      text-4xl
      lg:text-5xl
      font-bold
      lg:w-4/5
      text-center"
                >
                    Free HTML Components for all business solutions
                </h2>
                <p
                    className="text-center text-normal my-4 lg:w-3/5
      text-gray-600"
                >
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Commodi, harum nihil. Enim distinctio eligendi expedita
                    commodi aspernatur accusantium cumque soluta tempore.
                </p>
                <a
                    href="#"
                    className="relative z-20 shadow-lg block bg-indigo-600
      text-white font-semibold
      rounded p-4"
                >
                    Download for free - forever
                </a>
                <p className="text-xs text-gray-600 mt-2">
                    Responsive on all screens
                </p>
            </div>
        </section>
    );
}

export default CTA;
                

                    <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">Ready to talk?</span>
        </h2>
        <p class="py-4 text-gray-500 text-lg tracking-wide w-full md:w-3/5 mx-auto text-center">
            Our team is here to answer your questions about drycomponents.
        </p>
        <div class="inline-flex rounded-md shadow">
            <a
                href="javascript:void(0);"
                class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
            >
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-4" viewBox="0 0 20 20" fill="currentColor">
                    <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
                </svg>
                Contact Sales
            </a>
        </div>
        <a href="javascript:void(0);" class="block my-4 w-full md:w-2/5 text-center mx-auto text-indigo-600">Or, get started now with a free trial</a>
    </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">Ready to talk?</span>
                </h2>
                <p className="py-4 text-gray-500 text-lg tracking-wide w-full md:w-3/5 mx-auto text-center">
                    Our team is here to answer your questions about
                    drycomponents.
                </p>
                <div className="inline-flex rounded-md shadow">
                    <a
                        href="javascript:void(0);"
                        className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
                    >
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            className="h-5 w-5 mr-4"
                            viewBox="0 0 20 20"
                            fill="currentColor"
                        >
                            <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
                        </svg>
                        Contact Sales
                    </a>
                </div>
                <a
                    href="javascript:void(0);"
                    className="block my-4 w-full md:w-2/5 text-center mx-auto text-indigo-600"
                >
                    Or, get started now with a free trial
                </a>
            </div>
        </div>
    );
}

export default CTA;
                

                    <div class="bg-gray-50">
    <div
        class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between"
    >
        <h2
            class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl"
        >
            <span class="block">Still unsure? Step Inside and See</span>
            <span class="block">What the Future looks like.</span>
        </h2>
        <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
            <div class="inline-flex rounded-md shadow">
                <a
                    href="javascript:void(0);"
                    class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
                >
                    Schedule a Demo
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="h-5 w-5 ml-4"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            d="M9 5l7 7-7 7"
                        />
                    </svg>
                </a>
            </div>
        </div>
    </div>
</div>

                

                    const CTA = () => {
    return (
        <div className="bg-gray-50">
            <div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
                <h2 className="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
                    <span className="block">
                        Still unsure? Step Inside and See
                    </span>
                    <span className="block">What the Future looks like.</span>
                </h2>
                <div className="mt-8 flex lg:mt-0 lg:flex-shrink-0">
                    <div className="inline-flex rounded-md shadow">
                        <a
                            href="javascript:void(0);"
                            className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
                        >
                            Schedule a Demo
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                className="h-5 w-5 ml-4"
                                fill="none"
                                viewBox="0 0 24 24"
                                stroke="currentColor"
                                strokeWidth={2}
                            >
                                <path
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    d="M9 5l7 7-7 7"
                                />
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default CTA;
                

                    <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;
                

                    <div class="bg-gray-50">
    <div
        class="container mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between"
    >
        <h2
            class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl"
        >
            <span class="block">Understand user behaviour and</span>
            <span class="block">grow your business with</span>
            <span class="block text-indigo-600"
                >Drycomponents.</span
            >
        </h2>
        <div class="mt-8 flex lg:mt-0 flex-col lg:flex-shrink-0 md:flex-row">
            <div class="inline-flex">
                <a
                    href="javascript:void(0);"
                    class="block w-full text-center md:inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700"
                >
                    Explore Products
                </a>
            </div>
            <div class="mt-4 md:mt-0 ml-0 md:ml-3 inline-flex">
                <a
                    href="javascript:void(0);"
                    class="block w-full text-center md:inline-flex items-center justify-center px-5 py-3 border border-indigo-600 text-base font-medium text-indigo-600 bg-white hover:bg-indigo-50"
                >
                    Get Started
                </a>
            </div>
        </div>
    </div>
</div>

                

                    const CTA = () => {
    return (
        <div className="bg-gray-50">
            <div className="container mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
                <h2 className="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
                    <span className="block">Understand user behaviour and</span>
                    <span className="block">grow your business with</span>
                    <span className="block text-indigo-600">
                        Drycomponents.
                    </span>
                </h2>
                <div className="mt-8 flex lg:mt-0 flex-col lg:flex-shrink-0 md:flex-row">
                    <div className="inline-flex">
                        <a
                            href="javascript:void(0);"
                            className="block w-full text-center md:inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700"
                        >
                            Explore Products
                        </a>
                    </div>
                    <div className="mt-4 md:mt-0 ml-0 md:ml-3 inline-flex">
                        <a
                            href="javascript:void(0);"
                            className="block w-full text-center md:inline-flex items-center justify-center px-5 py-3 border border-indigo-600 text-base font-medium text-indigo-600 bg-white hover:bg-indigo-50"
                        >
                            Get Started
                        </a>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default CTA;
                

                    <div class="bg-gray-50">
    <div
        class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between"
    >
        <h2
            class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl"
        >
            <span class="block">Ready to dive in?</span>
            <span class="block text-indigo-600"
                >Start your free trial today.</span
            >
        </h2>
        <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
            <div class="inline-flex rounded-md shadow">
                <a
                    href="javascript:void(0);"
                    class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
                >
                    Get started
                </a>
            </div>
            <div class="ml-3 inline-flex rounded-md shadow">
                <a
                    href="javascript:void(0);"
                    class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50"
                >
                    Learn more
                </a>
            </div>
        </div>
    </div>
</div>

                

                    const CTA = () => {
    return (
        <div className="bg-gray-50">
            <div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
                <h2 className="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
                    <span className="block">Ready to dive in?</span>
                    <span className="block text-indigo-600">
                        Start your free trial today.
                    </span>
                </h2>
                <div className="mt-8 flex lg:mt-0 lg:flex-shrink-0">
                    <div className="inline-flex rounded-md shadow">
                        <a
                            href="javascript:void(0);"
                            className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
                        >
                            Get started
                        </a>
                    </div>
                    <div className="ml-3 inline-flex rounded-md shadow">
                        <a
                            href="javascript:void(0);"
                            className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50"
                        >
                            Learn more
                        </a>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default CTA;