Tailwind Services Components in Consulty library

<section class="bg-black px-8 md:px-24 pt-32 pb-44">
    <div class="flex flex-wrap -m-4">
        <div class="w-full lg:w-1/3 p-4">
            <div class="flex flex-col justify-between gap-4 h-full">
                <p class="text-white tracking-tight">Our services</p>
                <div>
                    <h2 class="text-white tracking-tight font-heading text-2xl font-semibold mb-4">Vision &amp; direction</h2>
                    <p class="text-gray-400 mb-6 tracking-tight max-w-xs">There are many variations of passages you the blocks needed to create a truly professional website for your template. </p>
                    <a href="#" class="bg-black border border-gray-200 h-14 rounded-full px-5 py-3 inline-flex items-center justify-center gap-2 tracking-tight text-white text-sm font-medium hover:bg-gray-900 focus:bg-gray-900 focus:ring-4 focus:ring-gray-200 transition duration-200">Explore All Services</a>
                </div>
            </div>
        </div>
        <div class="w-full lg:w-2/3 p-4">
            <div class="overflow-x-auto overflow-y-hidden">
                <div class="flex" style="height:628px;">
                    <div class="flex-shrink-0">
                        <div class="flex h-full">
                            <img class="h-full transform translate-x-16" src="consulty-assets/services/picture1.png" alt="">
                            <a href="#" class="group">
                                <div class="flex gap-5 h-full">
                                    <div class="flex flex-col justify-between items-end h-full">
                                        <div class="text-white">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
                                                <path d="M36 10.5L16.5 10.5C16.1022 10.5 15.7206 10.6581 15.4393 10.9394C15.158 11.2207 15 11.6022 15 12C15 12.3979 15.158 12.7794 15.4393 13.0607C15.7206 13.342 16.1022 13.5 16.5 13.5L32.3794 13.5L10.9387 34.9388C10.6573 35.2203 10.4992 35.602 10.4992 36C10.4992 36.3981 10.6573 36.7798 10.9387 37.0613C11.2202 37.3428 11.602 37.5009 12 37.5009C12.398 37.5009 12.7798 37.3428 13.0612 37.0613L34.5 15.6207L34.5 31.5001C34.5 31.8979 34.658 32.2794 34.9393 32.5607C35.2206 32.842 35.6022 33.0001 36 33.0001C36.3978 33.0001 36.7794 32.842 37.0607 32.5607C37.342 32.2794 37.5 31.8979 37.5 31.5001L37.5 12C37.5 11.6022 37.342 11.2207 37.0607 10.9394C36.7794 10.6581 36.3978 10.5 36 10.5Z" fill="currentColor"></path>
                                            </svg>
                                        </div>
                                        <div class="flex gap-4 items-center">
                                            <h2 class="font-heading text-white text-6xl font-medium tracking-tight">01</h2>
                                            <p class="text-white text-xl font-semibold tracking-tight">Strategy</p>
                                        </div>
                                    </div>
                                    <div class="w-px h-full bg-gray-800 group-hover:bg-white transition duration-200"></div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="flex-shrink-0">
                        <a href="#" class="group">
                            <div class="flex justify-end gap-5 h-full">
                                <div class="flex flex-col justify-between items-end h-full">
                                    <div class="text-gray-800 group-hover:text-white transition duration-200">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
                                            <path d="M37.5 16.4998V35.9998C37.5 36.3977 37.3419 36.7792 37.0606 37.0605C36.7793 37.3418 36.3978 37.4998 36 37.4998H16.5C16.1022 37.4998 15.7206 37.3418 15.4393 37.0605C15.158 36.7792 15 36.3977 15 35.9998C15 35.602 15.158 35.2205 15.4393 34.9392C15.7206 34.6579 16.1022 34.4998 16.5 34.4998H32.3794L10.9387 13.0611C10.6573 12.7796 10.4991 12.3979 10.4991 11.9998C10.4991 11.6018 10.6573 11.22 10.9387 10.9386C11.2202 10.6571 11.6019 10.499 12 10.499C12.398 10.499 12.7798 10.6571 13.0612 10.9386L34.5 32.3792V16.4998C34.5 16.102 34.658 15.7205 34.9393 15.4392C35.2206 15.1579 35.6022 14.9998 36 14.9998C36.3978 14.9998 36.7793 15.1579 37.0606 15.4392C37.3419 15.7205 37.5 16.102 37.5 16.4998Z" fill="currentColor"></path>
                                        </svg>
                                    </div>
                                    <div class="flex gap-4 items-center transform -rotate-90 translate-x-16 -translate-y-14">
                                        <h2 class="font-heading text-gray-800 group-hover:text-white transition duration-200 text-6xl font-medium tracking-tight">02</h2>
                                        <p class="text-gray-800 group-hover:text-white transition duration-200 text-xl font-semibold tracking-tight">Branding</p>
                                    </div>
                                </div>
                                <div class="w-px h-full bg-gray-800 group-hover:bg-white transition duration-200"></div>
                            </div>
                        </a>
                    </div>
                    <div class="flex-shrink-0">
                        <a href="#" class="group">
                            <div class="flex justify-end gap-5 h-full">
                                <div class="flex flex-col justify-between items-end h-full">
                                    <div class="text-gray-800 group-hover:text-white transition duration-200">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
                                            <path d="M37.5 16.4998V35.9998C37.5 36.3977 37.3419 36.7792 37.0606 37.0605C36.7793 37.3418 36.3978 37.4998 36 37.4998H16.5C16.1022 37.4998 15.7206 37.3418 15.4393 37.0605C15.158 36.7792 15 36.3977 15 35.9998C15 35.602 15.158 35.2205 15.4393 34.9392C15.7206 34.6579 16.1022 34.4998 16.5 34.4998H32.3794L10.9387 13.0611C10.6573 12.7796 10.4991 12.3979 10.4991 11.9998C10.4991 11.6018 10.6573 11.22 10.9387 10.9386C11.2202 10.6571 11.6019 10.499 12 10.499C12.398 10.499 12.7798 10.6571 13.0612 10.9386L34.5 32.3792V16.4998C34.5 16.102 34.658 15.7205 34.9393 15.4392C35.2206 15.1579 35.6022 14.9998 36 14.9998C36.3978 14.9998 36.7793 15.1579 37.0606 15.4392C37.3419 15.7205 37.5 16.102 37.5 16.4998Z" fill="currentColor"></path>
                                        </svg>
                                    </div>
                                    <div class="flex gap-4 items-center transform -rotate-90 translate-x-16 -translate-y-14">
                                        <h2 class="font-heading text-gray-800 group-hover:text-white transition duration-200 text-6xl font-medium tracking-tight">03</h2>
                                        <p class="text-gray-800 group-hover:text-white transition duration-200 text-xl font-semibold tracking-tight">Marketing</p>
                                    </div>
                                </div>
                                <div class="w-px h-full bg-gray-800 group-hover:bg-white transition duration-200"></div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>