<template>
    <section class="container mx-auto my-16 px-4">
        <div class="flex flex-col lg:flex-row place-items-center justify-center xl:px-56">
            <div class="flex flex-col justify-center">
                <div class="flex flex-col justify-center bg-gray-200 text-center border-radius w-fit">
                    <h1 class="text-3xl md:text-4xl text-center p-3 font-semibold">Write to Us</h1>
                    <h1 class="text-xl md:text-2xl text-color-1 md:w-full text-left px-6 text-justify">Have queries regarding Hows and Whats of choosing a oerfect plan for you and your Preschool? Write to Us your Queries and we’ll get back to you ASAP<span></span></h1>
                </div> 
            </div>
            <div class="flex flex-col">
                <div class="block p-6 rounded-xl shadow-lg bg-white w-fit lg:w-96 border-2 py-14 text-lg">
                    <div class="form-group mb-1">
                        <label for="exampleInputName" class="form-label inline-block mb-2 text-gray-700">Your Name</label>
                        <input type="text" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
                    </div>
                    <div class="form-group mb-1">
                        <label for="exampleInputEmail" class="form-label inline-block mb-2 text-gray-700">Your Email</label>
                        <input type="email" class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none">
                    </div>
                    <div class="flex flex-col form-control place-content-center">
                        <div class="text-left py-2">Your Message</div>
                        <textarea class="w-full textarea textarea-bordered border box text-lg focus:outline-none focus:bg-white focus:border-gray-100" ></textarea>
                    </div>
                    <div class="form-group form-check mb-6 pt-4">
                        <input type="checkbox" value="whatsapp"  class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer">
                        <label class="form-check-label inline-block text-gray-800" >Keep me updated on WhatsApp</label>
                    </div>
                    <button @click="" class="px-6 py-2.5 bg-blue-600 text-white font-medium text-lg leading-tight rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">Contact Us</button>
                </div>
            </div>
        </div>
    </section>
</template>