Tailwind CSS Components – Vista Library

<section class="bg-darkPink-900 pt-40 pb-60 relative">
    <img class="hidden lg:block absolute left-16 xl:left-36 2xl:left-56 3xl:left-96 top-32" src="vista-assets/images/hero/stars-pattern1.svg" alt="">
    <img class="hidden lg:block absolute right-4 xl:right-36 2xl:right-56 3xl:right-96 top-32" src="vista-assets/images/hero/stars-pattern2.svg" alt="">
    <div class="container mx-auto px-4">
        <h1 class="font-heading text-white text-center text-4xl md:text-5xl font-bold mb-4">Start Bookkeeping Today</h1>
        <p class="text-white text-center text-lg mb-10 max-w-xl xl:max-w-max mx-auto">Sign up now to streamline your bookkeeping journey and pave the way for a prosperous future.</p>
        <div class="relative max-w-sm mx-auto">
            <div class="absolute left-0 top-0 bg-pink-500 blur-xl filter opacity-50 h-full w-full"></div>
            <form action="">
                <div class="relative z-50 rounded-full bg-darkPink-900 border border-white border-opacity-10 p-1 flex items-center">
                    <input class="flex-1 bg-transparent outline-none text-white placeholder-gray-300 pl-4" type="email" placeholder="Email address*">
                    <button type="submit" class="group relative inline-block p-0.5 font-semibold overflow-hidden rounded-full">
                        <div class="absolute inset-0 bg-gradient-to-b from-white to-gray-500 group-focus:to-white opacity-40 group-focus:opacity-20 rounded-full"></div>
                        <div class="relative z-50 flex items-center py-2 px-4 bg-white group-hover:bg-white group-focus:bg-white group-hover:bg-opacity-80 group-focus:bg-opacity-80 rounded-full transition duration-200">
                            <p class="text-pinkSecondary-900">Get Started</p>
                        </div>
                    </button>
                </div>
            </form>
        </div>
    </div>
</section>

<section class="bg-darkPink-900 py-28">
    <div class="container mx-auto px-4">
        <h1 class="font-heading text-white text-5xl font-bold mb-6">FAQ</h1>
        <div class="flex flex-wrap gap-3 mb-16">
            <p class="text-white">Still have more questions?</p>
            <a href="#" class="inline-flex items-center gap-2 text-pink-500 hover:text-pink-600 transition duration-200">
                <span class="font-bold">Talk to us</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                    <path d="M6.875 3.75L13.125 10L6.875 16.25" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
            </a>
        </div>
        <div class="flex flex-wrap -mx-4">
            <div class="w-full lg:w-1/2 px-4">
                <button x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="w-full py-6 border-t border-b border-white border-opacity-10">
                    <div class="flex items-center justify-between gap-4">
                        <p class="text-white text-lg font-semibold text-left">How to add company details on my invoice?</p>
                        <span :class="{ 'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path d="M19.5 8.25L12 15.75L4.5 8.25" stroke="white" style="stroke:white;stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </span>
                    </div>
                    <div x-ref="container" :style="accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden max-h-0 duration-500">

<section class="bg-darkPink-900 py-24">
    <div class="container mx-auto px-4">
        <p class="text-white text-sm font-medium mb-4">17 Jul 2023</p>
        <h1 class="text-white text-4xl font-bold mb-4">Effective email marketing on a budget</h1>
        <p class="text-white text-opacity-70 mb-8">Read on to find out what the technique is, what it’s used for, and how you can apply it to your studies.</p>
        <div class="flex flex-wrap -m-4 mb-20">
            <div class="w-full lg:w-2/3 p-4">
                <img class="object-cover rounded-2xl w-full" style="height:480px" src="vista-assets/images/blog-content/placeholder-pink.png" alt="">
            </div>
            <div class="w-full lg:w-1/3 p-4">
                <div class="bg-gradient-to-b from-pink-200 via-pink-700 to-transparent rounded-3xl p-0.5 h-full">
                    <div class="bg-pinkSecondary-900 rounded-3xl px-10 py-18 relative h-full">
                        <p class="font-heading text-center text-white max-w-xs mx-auto text-3xl font-bold mb-4">Start Bookkeeping Today</p>
                        <p class="text-white text-center max-w-xs mx-auto text-opacity-70 mb-10">Streamline your bookkeeping journey and pave the way for a prosperous future.</p>
                        <div class="text-center">
                            <a href="#" class="group relative inline-block p-0.5 font-semibold overflow-hidden rounded-full">
                                <div class="absolute inset-0 bg-gradient-to-b from-white to-gray-500 group-focus:to-white opacity-40 group-focus:opacity-20 rounded-full"></div>
                                <div class="relative z-50 flex items-center py-2 px-4 bg-white group-hover:bg-opacity-80 group-focus:bg-opacity-80 rounded-full transition duration-200">
                                    <p class="text-pinkSecondary-900">Sign up now</p>
                                </div>
                            </a>
                        </div>
                        <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2">
                            <img src="vista-assets/images/blog-content/shapes.svg" alt="">

<section class="bg-darkPink-900" x-data="{ activeSlide: 1, slideCount: 3 }">
    <div class="bg-gradient-to-t from-pink-300 via-pink-700 to-darkPink-900 relative pt-24 pb-32">
        <div class="container mx-auto px-4">
            <img class="hidden lg:block absolute left-16 xl:left-36 2xl:left-56 3xl:left-128 top-40" src="vista-assets/images/hero/stars-pattern1.svg" alt="">
            <img class="hidden lg:block absolute right-4 xl:right-36 2xl:right-56 3xl:right-128 top-40" src="vista-assets/images/hero/stars-pattern2.svg" alt="">
            <div class="relative z-50">
                <h1 class="font-heading text-white text-center text-4xl sm:text-5xl md:text-7xl font-bold max-w-sm sm:max-w-lg md:max-w-3xl mx-auto mb-32">Our mission is to make bookkeeping simple</h1>
            </div>
            <div class="bg-darkPink-900 rounded-2xl p-10">
                <div class="flex flex-wrap items-stretch -m-4">
                    <div class="w-full md:w-1/3 lg:w-1/2 p-4">
                        <div class="border-r border-transparent md:border-white md:border-opacity-10 flex flex-col justify-center h-full md:pr-4">
                            <p class="text-white text-center md:text-left text-opacity-50 mb-2">Investors</p>
                            <p class="text-white text-center md:text-left mx-auto md:mx-0 text-2xl font-semibold max-w-xs">Funded by industry-leading investors</p>
                        </div>
                    </div>
                    <div class="w-full md:w-1/3 lg:w-1/4 p-4">
                        <div class="border-r border-transparent md:border-white md:border-opacity-10 flex flex-col justify-center h-full md:pr-4">
                            <p class="text-white text-opacity-50 mb-2 text-center">Team members</p>
                            <p class="text-white text-5xl font-bold text-center">110</p>
                        </div>
                    </div>
                    <div class="w-full md:w-1/3 lg:w-1/4 p-4">
                        <div class="flex flex-col justify-center h-full">

<section class="bg-darkPink-900 pt-20 pb-44" x-data="{ activeSlide: 1, slideCount: 3 }">
    <div class="container mx-auto px-4">
        <div class="max-w-3xl mx-auto">
            <img class="mx-auto mb-10" src="vista-assets/images/testimonials/quote.svg" alt="">
            <div class="overflow-hidden">
                <div :style="'transform: translateX(-' + (activeSlide - 1) * 100.5 + '%)'" class="whitespace-nowrap transition-transform duration-500 ease-in-out">
                    <div class="inline-block w-full whitespace-normal">
                        <h1 class="font-heading text-center text-white text-3xl md:text-5xl font-semibold mb-10 max-w-md md:max-w-3xl mx-auto">
                            <span>We’re </span>
                            <span class="text-pink-500">very happy</span>
                            <span>that they are created this amazing bookkeeping software.</span>
                        </h1>
                    </div>
                    <div class="inline-block w-full whitespace-normal">
                        <h1 class="font-heading text-center text-white text-3xl md:text-5xl font-semibold mb-10 max-w-md md:max-w-3xl mx-auto">
                            <span>Excited to</span>  
                            <span class="text-pink-500">Announce the Arrival</span>
                            <span>of This Fantastic Bookkeeping Software.</span>
                        </h1>
                    </div>
                    <div class="inline-block w-full whitespace-normal">
                        <h1 class="font-heading text-center text-white text-3xl md:text-5xl font-semibold mb-10 max-w-md md:max-w-3xl mx-auto">
                            <span>Delighted to</span>
                            <span class="text-pink-500">Introduce This</span>

<section class="bg-darkPink-900 pt-24 pb-48">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap -m-4">
            <div class="w-full lg:w-1/2 p-4">
                <p class="mb-6 uppercase text-pink-400 text-xs tracking-widest">CONTACT US</p>
                <h1 class="font-heading text-white text-5xl md:text-7xl font-semibold mb-6 max-w-sm md:max-w-md">How can we help you?</h1>
                <p class="text-white text-opacity-70 text-lg max-w-md">Our team is here to help you access capital and grow on your terms. Check out the resources below and reach out directly if you have any questions.</p>
            </div>
            <div class="w-full lg:w-1/2 p-4">
                <div class="rounded-3xl p-3 bg-gradient-to-b from-pink-300 via-pink-700 to-darkPink-900 max-w-xl mx-auto">
                    <div class="rounded-2xl bg-darkPink-900 w-full p-8">
                        <form action="">
                            <div class="flex flex-wrap -mx-4 mb-8">
                                <div class="w-full lg:w-1/2 px-4">
                                    <label for="first-name" class="block text-sm mb-2 text-white font-medium">
                                        <span>First name</span>
                                        <span class="text-pink-500">*</span>
                                    </label>
                                    <input type="text" id="first-name" class="px-4 py-3 rounded-full mb-8 lg:mb-0 border border-white border-opacity-10 bg-white bg-opacity-5 text-sm placeholder-white placeholder-opacity-50 text-white focus:border-white focus:border focus:border-opacity-50 transition duration-200 outline-none w-full" placeholder="First name">
                                </div>
                                <div class="w-full lg:w-1/2 px-4">
                                    <label for="last-name" class="block text-sm mb-2 text-white font-medium">
                                        <span>Last name</span>
                                        <span class="text-pink-500">*</span>

<section class="bg-darkPink-900 py-28">
    <div class="container max-w-6xl mx-auto px-4">
        <p class="uppercase text-sweetPink-400 text-xs tracking-widest mb-4">FEATURES</p>
        <h1 class="font-heading text-white text-4xl md:text-5xl font-bold mb-4">Easy bookkeeping for your business</h1>
        <p class="text-white text-opacity-70 text-lg max-w-xl mb-20">Our software provides intuitive bookkeeping solutions, allowing you to focus on growing your business rather than crunching numbers.</p>
        <div class="rounded-2xl border border-white border-opacity-20 py-6 pr-6 pl-6 md:pl-14 mb-10">
            <div class="flex flex-wrap items-center -m-4 mb-6">
                <div class="w-full lg:w-1/3 p-4">
                    <div class="rounded-full border border-pink-500 w-14 h-14 flex items-center justify-center mb-6">
                        <div class="bg-pinkSecondary-900 w-11 h-11 rounded-full border border-white border-opacity-10 flex items-center justify-center">
                            <img class="h-6" src="vista-assets/images/features/money.svg" alt="">
                        </div>
                    </div>
                    <h2 class="font-heading text-white text-4xl font-bold max-w-xs">Simple Accounting</h2>
                </div>
                <div class="w-full lg:w-2/3 p-4">
                    <div class="rounded-xl px-6 md:px-12 py-14 bg-gradient-to-b from-pink-300 via-pink-700 to-darkPink-900">
                        <img class="rounded-xl object-cover w-full h-full" style="height:288px" src="vista-assets/images/features/picture-pink1.png" alt="">
                    </div>
                </div>
            </div>
            <div class="flex flex-wrap justify-between gap-6">
                <div class="flex items-center gap-4">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">

<section class="relative bg-gradient-to-t from-pink-300 via-pink-700 to-darkPink-900 pt-24 pb-8">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap -m-4 mb-40">
            <div class="w-full md:w-1/2 lg:w-5/12 p-4">
                <a href="#" class="inline-block mb-10">
                    <img src="vista-assets/images/logos/vista-logo.svg" alt="">
                </a>
                <p class="text-white text-xl font-semibold mb-4">Subscribe to our newsletter</p>
                <form action="">
                    <div class="rounded-full bg-white bg-opacity-5 border border-white border-opacity-10 p-1 flex items-center max-w-sm">
                        <input class="flex-1 bg-transparent outline-none text-white placeholder-gray-300 pl-4" type="email" placeholder="Email address*">
                        <button type="submit" class="group relative inline-block p-0.5 font-semibold overflow-hidden rounded-full shadow-pink hover:shadow-none focus:shadow-none">
                            <div class="absolute inset-0 bg-gradient-to-b from-pink-400 to-pink-500 rounded-full"></div>
                            <div class="relative z-50 flex items-center py-2 px-4 bg-pink-500 group-hover:bg-pink-600 group-focus:bg-pink-600 rounded-full transition duration-200">
                                <p class="text-white">Subscribe</p>
                            </div>
                        </button>
                    </div>
                </form>
            </div>
            <div class="w-full md:w-1/2 lg:w-7/12 p-4">
                <div class="flex flex-wrap lg:justify-between gap-12">
                    <ul class="flex flex-col gap-6">
                        <li>

<section class="bg-darkPink-900 py-6">
    <div class="container mx-auto px-4">
        <div class="py-20 border-t border-b border-dashed border-white border-opacity-10">
            <p class="uppercase text-sweetPink-400 text-xs mb-4 tracking-widest">HOW IT WORKS</p>
            <h1 class="font-heading text-white text-4xl md:text-5xl mb-20 font-bold max-w-2xl">See how we simplifies your financial tasks</h1>
            <div class="flex flex-wrap -m-4">
                <div class="w-full lg:w-1/3 p-4">
                   <div class="bg-gradient-to-r from-transparent via-pink-400 to-pink-500 rounded-2xl p-px relative h-full">
                        <div class="bg-darkPink-900 rounded-2xl p-6 h-full border border-white border-opacity-20">
                            <div class="bg-gradient-to-b from-pink-300 via-pink-700 to-darkPink-900 w-10 h-10 flex items-center justify-center mb-4 mx-auto rounded-full">
                                <p class="text-white text-center text-lg font-bold">1</p>
                            </div>
                            <p class="text-white text-center text-sm max-w-xs mx-auto">Record your financial transactions such as receipts, and other relevant documents.</p>
                        </div>
                        <img class="hidden lg:block absolute top-1/2 left-full transform -translate-y-1/2 -translate-x-1" src="vista-assets/images/how-it-works/line-pink.svg" alt="">
                   </div> 
                </div>
                <div class="w-full lg:w-1/3 p-4">
                    <div class="bg-gradient-to-r from-transparent via-pink-400 to-pink-500 rounded-2xl p-px relative h-full">
                         <div class="bg-darkPink-900 rounded-2xl p-6 h-full border border-white border-opacity-20">
                             <div class="bg-gradient-to-b from-pink-300 via-pink-700 to-darkPink-900 w-10 h-10 flex items-center justify-center mb-4 mx-auto rounded-full">
                                 <p class="text-white text-center text-lg font-bold">2</p>
                             </div>
                             <p class="text-white text-center text-sm max-w-xs mx-auto">Automatically categorizes and organizes the recorded transactions, such as income and expenses.</p>

<section class="bg-darkPink-900 py-24">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap -m-4">
            <div class="w-full lg:w-1/2 p-4">
                <img class="object-cover rounded-2xl" style="height:500px" src="vista-assets/images/sign-up/picture-pink2.png" alt="">
            </div>
            <div class="w-full lg:w-1/2 p-4">
                <div class="flex flex-col justify-center h-full max-w-md">
                    <h1 class="font-heading text-white text-4xl font-bold mb-8">Welcome back</h1>
                    <form action="">
                        <input type="email" class="px-4 py-3 mb-6 rounded-full border border-white border-opacity-10 bg-white bg-opacity-5 text-sm placeholder-white placeholder-opacity-50 text-white focus:border-white focus:border focus:border-opacity-50 transition duration-200 outline-none w-full" placeholder="Email">
                        <div class="rounded-full border border-white border-opacity-10 bg-white bg-opacity-5 px-4 py-3 flex items-center mb-8" x-data="{ visible: false }">
                            <input type="password" :type="visible ? 'text' : 'password'" id="password" class="flex-1 bg-transparent text-sm placeholder-white placeholder-opacity-50 text-white transition duration-200 outline-none" placeholder="Password">
                            <svg x-on:click="visible = !visible" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                <g opacity="0.5">
                                  <path d="M13.7445 6.36839L13.7446 6.36857C14.0157 6.79424 14.1663 7.3838 14.1663 7.99912C14.1663 8.61458 14.0157 9.20179 13.7454 9.62345L13.7447 9.62455C13.0069 10.7821 12.1122 11.6786 11.1304 12.2878C10.1493 12.8899 9.08596 13.2066 7.99967 13.2066C5.83421 13.2066 3.72502 11.9415 2.25517 9.62537L2.25473 9.62468C1.98347 9.1988 1.83301 8.61081 1.83301 7.99662C1.83301 7.3825 1.98344 6.79456 2.25465 6.36869C2.99243 5.21114 3.88718 4.31462 4.86891 3.70547C5.85008 3.10332 6.91339 2.78662 7.99967 2.78662C10.1646 2.78662 12.2742 4.05784 13.7445 6.36839ZM4.80634 7.99995C4.80634 9.76196 6.22939 11.1933 7.99967 11.1933C9.76996 11.1933 11.193 9.76196 11.193 7.99995C11.193 6.23795 9.76996 4.80662 7.99967 4.80662C6.22939 4.80662 4.80634 6.23795 4.80634 7.99995Z" fill="white" stroke="white" style="fill:white;fill-opacity:1;stroke:white;stroke-opacity:1;"></path>
                                  <path d="M7.99961 6.09326C6.95294 6.09326 6.09961 6.94659 6.09961 7.99993C6.09961 9.04659 6.95294 9.89993 7.99961 9.89993C9.04628 9.89993 9.90628 9.04659 9.90628 7.99993C9.90628 6.95326 9.04628 6.09326 7.99961 6.09326Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                                </g>
                            </svg>
                        </div>
                        <button type="submit" class="group relative inline-block w-full mb-8 p-0.5 font-semibold overflow-hidden rounded-full shadow-pink hover:shadow-none focus:shadow-none">
                            <div class="absolute inset-0 bg-gradient-to-b from-pink-400 to-pink-500 rounded-full"></div>
                            <div class="relative z-50 flex justify-center items-center py-2 px-4 bg-pink-500 group-hover:bg-pink-600 group-focus:bg-pink-600 rounded-full transition duration-200">
                                <p class="text-white text-center">Log in</p>

<section class="bg-darkPink-900 py-32">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap -m-4">
            <div class="w-full md:w-1/2 p-4">
                <h1 class="font-heading text-white text-4xl md:text-5xl font-bold mb-4">Stay in the loop</h1>
                <p class="text-white mb-10">Join our newsletter to get top news before anyone else</p>
            </div>
            <div class="w-full md:w-1/2 p-4">
                <div class="md:ml-auto max-w-sm">
                    <form action="">
                        <div class="relative mb-4">
                            <div class="absolute left-0 top-0 bg-pink-500 blur-xl filter opacity-50 h-full w-full"></div>
                            <div class="relative z-50 rounded-full bg-darkPink-900 border border-white border-opacity-10 p-1 flex items-center">
                                <input class="flex-1 bg-transparent outline-none text-white placeholder-gray-300 pl-4" type="email" placeholder="Email address">
                                <button type="submit" class="group relative inline-block p-0.5 font-semibold overflow-hidden rounded-full">
                                    <div class="absolute inset-0 bg-gradient-to-b from-white to-gray-500 group-focus:to-white opacity-40 group-focus:opacity-20 rounded-full"></div>
                                    <div class="relative z-50 flex items-center py-2 px-4 bg-white group-hover:bg-opacity-80 group-focus:bg-opacity-80 rounded-full transition duration-200">
                                        <p class="text-pinkSecondary-900">Subscribe</p>
                                    </div>
                                </button>
                            </div>
                        </div>
                    </form>
                    <p class="text-white text-sm">No spam. You can unsubscribe anytime.</p>

<section class="bg-darkPink-900 pt-24 pb-56">
    <div class="container mx-auto px-4">
        <h1 class="font-heading text-white text-center text-4xl md:text-6xl font-bold mb-4">Careers at Vista</h1>
        <p class="text-white text-center text-opacity-70 mb-12">We are on our mission is to make bookkeeping simple. Join us to make bookkeeping fun.</p>
        <div class="mb-12 text-center">
            <a href="#" class="group relative inline-block p-0.5 font-semibold overflow-hidden rounded-full">
                <div class="absolute inset-0 bg-gradient-to-b from-white to-gray-500 group-focus:to-white opacity-40 group-focus:opacity-20 rounded-full"></div>
                <div class="relative z-50 flex items-center py-2 px-4 bg-white group-hover:bg-opacity-80 group-focus:bg-opacity-80 rounded-full transition duration-200">
                    <p class="text-pinkSecondary-900">View Openings</p>
                </div>
            </a>
        </div>
        <img class="w-full rounded-2xl object-cover mb-24" style="height:500px" src="vista-assets/images/careers/thumbnail-pink.png" alt="">
        <h2 class="font-heading text-white text-4xl font-bold text-center mb-4">Benefits</h2>
        <p class="text-white text-opacity-70 mb-16 max-w-2xl mx-auto text-center">Our team receives support, enjoys ample vacation time, opportunities to give back, and the financial resources they need to thrive both inside and outside of work.</p>
        <div class="pb-24 mb-24 border-b border-white border-opacity-20 border-dashed">
            <div class="flex flex-wrap -m-4">
                <div class="w-full md:w-1/2 p-4">
                    <div class="rounded-full border border-pink-500 w-12 h-12 flex items-center justify-center mb-6">
                        <div class="rounded-full bg-pinkSecondary-900 border border-white border-opacity-10 w-10 h-10 flex items-center justify-center">
                            <img class="h-6" src="vista-assets/images/careers/hospital.svg" alt="">
                        </div>
                    </div>
                    <p class="text-white text-lg font-semibold mb-2">Inclusive Health Package</p>

<section class="bg-darkPink-900 py-28">
    <div class="container mx-auto px-4">
        <div class="bg-pinkSecondary-900 rounded-3xl p-8 max-w-6xl mx-auto">
            <span class="inline-block text-sweetPink-400 text-xs mb-4 tracking-widest">STATS</span>
            <h1 class="font-heading text-white text-4xl font-semibold mb-20">We’re just getting started but...</h1>
            <div class="flex flex-wrap -m-4">
                <div class="w-full lg:w-1/2 p-4">
                    <div class="flex items-center gap-8">
                        <div class="bg-white bg-opacity-20 rounded-sm w-px h-32"></div>
                        <div>
                            <h2 class="font-heading text-white text-5xl md:text-7xl font-semibold mb-6">2024</h2>
                            <p class="uppercase text-white text-opacity-50 text-lg font-medium">FOUNDED</p>
                        </div>
                    </div>
                </div>
                <div class="w-full lg:w-1/2 p-4">
                    <div class="flex items-center gap-8">
                        <div class="bg-white bg-opacity-20 rounded-sm w-px h-32"></div>
                        <div>
                            <h2 class="font-heading text-white text-5xl md:text-7xl font-semibold mb-6">$55,199.00</h2>
                            <p class="uppercase text-white text-opacity-50 text-lg font-medium">REVENUE SAVED</p>
                        </div>
                    </div>
                </div>

<section class="bg-darkPink-900 py-24">
    <div class="container mx-auto px-4">
        <p class="font-heading text-center text-white text-2xl font-bold mb-16">Trusted by over 10,000 companies</p>
        <div class="flex flex-wrap justify-center -m-4 mb-5 lg:mb-20">
            <div class="w-full sm:w-1/6 p-4">
                <img class="h-10 mx-auto" src="vista-assets/images/logos/aurevo-logo.svg" alt="">
            </div>
            <div class="w-full sm:w-1/6 p-4">
                <img class="h-10 mx-auto" src="vista-assets/images/logos/syra-logo-light.svg" alt="">
            </div>
            <div class="w-full sm:w-1/6 p-4">
                <img class="h-10 mx-auto" src="vista-assets/images/logos/axiomatic-logo.svg" alt="">
            </div>
            <div class="w-full sm:w-1/6 p-4">
                <img class="h-10 mx-auto" src="vista-assets/images/logos/cronix-logo.svg" alt="">
            </div>
            <div class="w-full sm:w-1/6 p-4">
                <img class="h-10 mx-auto" src="vista-assets/images/logos/acme-logo.svg" alt="">
            </div>
        </div>
        <div class="flex flex-wrap justify-center -m-4 mb-20">
            <div class="w-full sm:w-1/6 p-4">
                <img class="h-10 mx-auto" src="vista-assets/images/logos/acme-logo.svg" alt="">
            </div>

<section x-data="{ mobileNavOpen: false }">
    <nav class="py-7 bg-darkPink-900">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between">
                <div class="flex item-center gap-8">
                    <a href="#" class="inline-block">
                        <img class="h-6" src="vista-assets/images/logos/vista-logo-small.svg" alt="">
                    </a>
                    <div class="bg-white w-px h-6"></div>
                    <p class="text-white font-semibold">Careers</p>
                </div>
                <a href="#" class="hidden lg:flex items-center gap-2 text-white hover:text-pink-500 transition duration-200">
                    <span class="text-sm font-medium">View openings</span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M5.5 3L10.5 8L5.5 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </a>
                <button class="lg:hidden" x-on:click="mobileNavOpen = !mobileNavOpen">
                    <svg width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect width="56" height="56" rx="28" fill="white"></rect>
                        <path d="M37 32H19M37 24H19" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </button>
            </div>

<section class="bg-darkPink-900 py-24" x-data="{ pricing: 'yearly' }">
    <div class="container mx-auto px-4">
        <h1 class="font-heading text-white text-center text-5xl font-bold mb-4">Flexible pricing plan</h1>
        <p class="text-white text-center text-opacity-70 mb-10">Pricing that scales with your business immediately.</p>
        <div class="p-1 mb-10 rounded-full border border-white border-opacity-10 bg-white bg-opacity-5 flex items-center w-60 mx-auto gap-4">
            <button x-on:click="pricing='monthly'" class="py-1 px-3 text-white text-sm font-medium" :class="{ 'rounded-full border border-white border-opacity-20 bg-white bg-opacity-10': pricing == 'monthly' }">Monthly</button>
            <button x-on:click="pricing='yearly'" class="flex-1 py-1 px-3 flex items-center justify-center gap-2" :class="{ 'rounded-full border border-white border-opacity-20 bg-white bg-opacity-10': pricing == 'yearly' }">
                <span class="text-white text-sm font-medium">Yearly</span>
                <span class="text-xs text-pink-300">10% OFF</span>
            </button>
        </div>
        <div class="overflow-x-auto">
            <div class="flex items-end lg:justify-center gap-8">
                <div class="flex-shrink-0 rounded-2xl p-8">
                    <p class="text-white text-2xl font-semibold mb-6">Basic</p>
                    <div class="flex items-end gap-1 flex-wrap mb-8">
                        <h2 class="text-white text-5xl font-semibold">$9</h2>
                        <span class="text-white text-opacity-50 mb-1">/per month</span>
                    </div>
                    <a href="#" class="group relative inline-block w-full mb-8 p-0.5 font-semibold overflow-hidden rounded-full">
                        <div class="absolute inset-0 bg-gradient-to-b from-white to-gray-500 group-focus:to-white opacity-40 group-focus:opacity-20 rounded-full"></div>
                        <div class="relative z-50 flex justify-center items-center py-2 px-4 bg-darkPink-900 bg-opacity-80 rounded-full transition duration-200">
                            <p class="text-white">Get Started</p>
                        </div>

<section class="bg-darkPink-900 py-32">
    <div class="container mx-auto px-4">
        <div class="rounded-3xl bg-gradient-to-t from-pink-300 via-pink-700 to-darkPink-900 relative py-20 px-4 md:px-14 w-full">
            <h1 class="font-heading text-white text-4xl md:text-5xl font-bold mb-4">Join our newsletter</h1>
            <p class="text-white mb-10">Sign up for our newsletter for product updates and new blog posts!</p>
            <form action="">
                <div class="max-w-sm rounded-full bg-darkPink-900 border border-white border-opacity-10 p-1 flex items-center">
                    <input class="flex-1 bg-transparent outline-none text-white placeholder-gray-300 pl-4" type="email" placeholder="Email address">
                    <button type="submit" class="group relative inline-block p-0.5 font-semibold overflow-hidden rounded-full">
                        <div class="absolute inset-0 bg-gradient-to-b from-white to-gray-500 group-focus:to-white opacity-40 group-focus:opacity-20 rounded-full"></div>
                        <div class="relative z-50 flex items-center py-2 px-4 bg-white group-hover:bg-opacity-80 group-focus:bg-opacity-80 rounded-full transition duration-200">
                            <p class="text-pinkSecondary-900">Subscribe</p>
                        </div>
                    </button>
                </div>
            </form>
            <img class="absolute right-0 top-0 object-cover h-full rounded-3xl" src="vista-assets/images/newsletter/illustration-pink.svg" alt="">
        </div>
    </div>
</section>

<section class="bg-darkPink-900 pt-40 overflow-hidden" style="height:850px">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap -mx-4">
            <div class="w-full lg:w-1/3 px-4">
                <div class="bg-white p-8 rounded-3xl mb-8">
                    <img class="mb-8" src="vista-assets/images/logos/syra-logo.svg" alt="">
                    <p class="text-xl font-medium mb-12 max-w-xs">“We use Vista daily and we’re very happy that they are created this amazing bookkeeping software. Thank you Vista!”</p>
                    <div class="flex flex-wrap gap-4">
                        <img src="vista-assets/images/testimonials/avatar2.png" alt="">
                        <div>
                            <p class="text-gray-800 font-semibold mb-1">Hanna Stanton</p>
                            <p class="text-gray-500 text-sm">Founder of AIME Inc.</p>
                        </div>
                    </div>
                </div>
                <div class="bg-white bg-opacity-20 border border-white border-opacity-10 p-8 rounded-3xl">
                    <img class="mb-8" src="vista-assets/images/logos/aurevo-logo.svg" alt="">
                    <p class="text-white text-xl mb-12 max-w-xs">“We've saved tons of time already. Thanks guys, keep up the good work!”</p>
                    <div class="flex flex-wrap gap-4">
                        <img src="vista-assets/images/testimonials/avatar2.png" alt="">
                        <div>
                            <p class="text-white font-semibold mb-1">Hanna Stanton</p>
                            <p class="text-gray-500 text-sm">Founder of AIME Inc.</p>
                        </div>

<section class="bg-darkPink-900 py-28" x-data="{ tab: 'trending' }">
    <div class="container mx-auto px-4">
        <div class="mb-24 relative">
            <div class="absolute bottom-0 left-0 w-full bg-white bg-opacity-10 h-px"></div>
            <div class="overflow-x-auto">
                <div class="flex items-center justify-between gap-12">
                    <div class="flex gap-10">
                        <a href="#" class="inline-block pb-4 border-b-2 border-transparent hover:border-pink-500 hover:text-pink-500 transition duration-200" :class="tab=='trending' ? 'border-pink-500 text-pink-500 font-semibold' : 'text-gray-400'" x-on:click.prevent="tab='trending'">Trending</a>
                        <a href="#" class="inline-block pb-4 border-b-2 border-transparent hover:border-pink-500 hover:text-pink-500 transition duration-200" :class="tab=='accounting' ? 'border-pink-500 text-pink-500 font-semibold' : 'text-gray-400'" x-on:click.prevent="tab='accounting'">Accounting</a>
                        <a href="#" class="inline-block pb-4 border-b-2 border-transparent hover:border-pink-500 hover:text-pink-500 transition duration-200" :class="tab=='entrepreneurship' ? 'border-pink-500 text-pink-500 font-semibold' : 'text-gray-400'" x-on:click.prevent="tab='entrepreneurship'">Entrepreneurship</a>
                        <a href="#" class="inline-block pb-4 border-b-2 border-transparent hover:border-pink-500 hover:text-pink-500 transition duration-200" :class="tab=='payments' ? 'border-pink-500 text-pink-500 font-semibold' : 'text-gray-400'" x-on:click.prevent="tab='payments'">Payments</a>
                        <a href="#" class="inline-block pb-4 border-b-2 border-transparent hover:border-pink-500 hover:text-pink-500 transition duration-200" :class="tab=='company' ? 'border-pink-500 text-pink-500 font-semibold' : 'text-gray-400'" x-on:click.prevent="tab='company'">Company</a>
                    </div>
                    <a href="#" class="inline-flex items-center gap-4 pb-4 text-gray-500 hover:text-white transition duration-200">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                            <path d="M9.58335 17.5C13.9556 17.5 17.5 13.9556 17.5 9.58335C17.5 5.2111 13.9556 1.66669 9.58335 1.66669C5.2111 1.66669 1.66669 5.2111 1.66669 9.58335C1.66669 13.9556 5.2111 17.5 9.58335 17.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M18.3334 18.3334L16.6667 16.6667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                        <span>Search</span>
                    </a>
                </div>
            </div>
        </div>
        <div class="pb-24 border-b border-white border-opacity-20 mb-24">

<section class="bg-darkPink-900 py-40">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap justify-center gap-24">
            <img class="h-56 " src="vista-assets/images/http-codes/http-code-pink2.png" alt="">
            <div>
                <h1 class="font-heading text-white text-4xl font-semibold mb-4">Oops. Page not found.</h1>
                <p class="text-white text-opacity-70 text-lg mb-10 max-w-lg">The page you are looking for was moved, removed, renamed or might have never existed!</p>
                <a href="#" class="group relative inline-block p-0.5 font-semibold overflow-hidden rounded-full shadow-pink hover:shadow-none focus:shadow-none">
                    <div class="absolute inset-0 bg-gradient-to-b from-pink-400 to-pink-500 rounded-full"></div>
                    <div class="relative z-50 flex items-center py-2 px-4 bg-pink-500 group-hover:bg-pink-600 group-focus:bg-pink-600 rounded-full transition duration-200">
                        <p class="mr-2 text-white">Back to home</p>
                        <svg class="text-white" xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                            <path d="M6 3L11 8L6 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>