teenybeanspreschoolcurriculum.com/src/components/SchoolLicense.vue

<template>
    <div>
        <section class="container mx-auto px-4 xl:px-24">
            <h1 class="text-color-3 text-5xl text-center py-16 font-bold">Teacher's License </h1>
                <div class="flex flex-row justify-center">
                <h1 class="justify-center">Teacher Accounts: &nbsp;</h1>
                <input class="flex slider mt-3" type="range" min="0" max="100" step="1" v-model="sliderValue">  &nbsp;
                    <span class="border border-black px-1 h-fit rounded-md" v-text="sliderValue"></span>
            </div>
            <div class="flex flex-row justify-center 2xl:gap-x-96 space-x-48 md:space-x-96 mt-8">
                <div class="flex">Student Accounts</div>
                <div class="flex">30</div>
            </div>
            <div class="flex flex-col lg:flex-row justify-center gap-4 xl:space-x-48 mt-10">
                <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" v-model="gtname" 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="exampleInputName" class="form-label inline-block mb-2 text-gray-700">Your Email</label>
                    <input type="text" v-model="gtname" 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>
            <div class="flex justify-center my-10"><button class="background text-white p-3 px-6 text-lg rounded-tl-xl rounded-br-xl">Calculate Quote</button></div>
            
        </section>
        <section class="container mx-auto my-16 px-4 xl:px-24">
            <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 place-items-center my-4 gap-x-16 gap-y-6">
                <div class="grid grid-rows-2 w-full h-full">
                    <div class="grid background place-items-center rounded-lg py-8">
                        <h1 class="text-3xl text-white ">Monthly</h1>
                    </div>
                    <div class="grid shadow-2xl rounded-b-lg place-items-center">
                        <h1 class="text-4xl p-1 text-center">&#36;100</h1>
                        <h1 class="text-color-1 text-center">(inclusive of all costs)</h1>
                        <a href="/payment" class="py-2"><button class="shadow-2xl rounded-lg background text-white p-2 px-4 text-lg w-fit">Subscribe Now</button></a>
                    </div>
                </div>
                <div class="grid grid-rows-2 w-full">
                    <div class="grid background place-items-center rounded-lg">
                        <h1 class="text-3xl text-white ">Bi-Yearly</h1>
                    </div>
                    <div class="grid shadow-2xl rounded-b-xl place-items-center">
                        <h1 class="text-4xl p-1"><span class="line-through text-slate-400">&#36;600</span>&nbsp;&nbsp;&#36;540 </h1>
                        <span class="text-lg text-color-2">(10% Discount)</span>
                        <h1 class="text-color-1 text-center">(inclusive of all costs)</h1>
                        <a href="/payment" class="py-2"><button class="shadow-2xl rounded-lg background text-white p-2 px-4 text-lg w-fit">Subscribe Now</button></a>
                    </div>
                </div>
                <div class="grid grid-rows-2 w-full">
                    <div class="grid background place-items-center rounded-lg">
                        <h1 class="text-3xl text-white h-fit">Yearly</h1>
                    </div>
                    <div class="grid shadow-2xl rounded-b-xl place-items-center">
                        <h1 class="text-4xl p-1"><span class="line-through text-slate-400">&#36;1200</span>&nbsp;&nbsp;&#36;1020 </h1>
                        <span class="text-lg text-color-2">(15% Discount)</span>
                        <h1 class="text-color-1 text-center">(inclusive of all costs)</h1>
                        <a href="/payment" class="py-2"><button class="shadow-2xl rounded-lg background text-white p-2 px-4 text-lg w-fit">Subscribe Now</button></a>
                    </div>
                </div>
            </div>
            <!-- <div class="flex justify-center my-16"><button class="background text-white p-3 px-6 text-lg rounded-tl-xl rounded-br-xl">Subscribe Now</button></div> -->
        </section>
        <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>
    </div>
</template>
<style scoped>


.slider {
  -webkit-appearance: none;
  height: 6px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.3);
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  width: 50%;
}



/* .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 2px;
  height: 2px;
  background: rgba(0, 102, 255, 1);
  border-radius: 50px;
  cursor: pointer;
} */

.slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: rgba(0, 102, 255, 1);
    border-radius: 50px;
    cursor: pointer;
}
.slider:hover::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: rgb(0, 102, 255, 1);
    border-radius: 50px;
    border-width: 6px;
    border-color: rgba(217, 214, 214, 1);
    cursor: pointer;
}

.border-radius{
    border-top-left-radius: 200px;
    height: 400px;
    width: 100%;
}
    .background {
        background-color: #124BBD;
    }
    .text-color-1 {
        color:  #333333;
    }
    .text-color-2 {
        color: #124BBD;
    }
    .text-color-3 {
        color: #124BBD;
    }
    
</style>

<script>
  export default {
    data() {
      return {
        sliderValue: 55,
      }
    },
  }
  </script>