Tailwind CSS App Integrations Section

Basic integration block

This Example of Tailwind CSS App Integration shows simple card layout with app logos, title and some description.

Preview
Code

                                                <section class="py-24 relative">
        <div class="w-full max-w-7xl px-4 md:px-5 lg:px-5 mx-auto">
            <div class="w-full flex-col justify-start items-center lg:gap-11 gap-8 inline-flex">
                <div class="w-full flex-col justify-start items-center gap-2.5 flex">
                    <h2 class="text-center text-gray-900 text-3xl font-bold font-manrope leading-normal">Integrations</h2>
                    <p class="max-w-4xl mx-auto text-center text-gray-500 text-lg font-normal leading-8">Integrations refer to the process of combining different software systems or components to work together seamlessly. This involves connecting various applications.</p>
                </div>
                <div class="grid lg:grid-cols-4 md:grid-cols-2 grid-cols-1 justify-start items-start gap-8">
                    <div class="w-full px-6 py-8 rounded-2xl border border-gray-200 hover:border-indigo-600 transition-all duration-700 ease-in-out justify-center items-center gap-2.5 flex">
                        <div class="flex-col justify-start items-center gap-3.5 inline-flex">
                            <a href="">
                                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
                                    <g clip-path="url(#clip0_30847_81616)">
                                      <path d="M8.56691 25.1969C8.56691 27.4961 6.70865 29.3544 4.40943 29.3544C2.11022 29.3544 0.251953 27.4961 0.251953 25.1969C0.251953 22.8977 2.11022 21.0394 4.40943 21.0394H8.56691V25.1969ZM10.6457 25.1969C10.6457 22.8977 12.5039 21.0394 14.8031 21.0394C17.1023 21.0394 18.9606 22.8977 18.9606 25.1969V35.5906C18.9606 37.8898 17.1023 39.7481 14.8031 39.7481C12.5039 39.7481 10.6457 37.8898 10.6457 35.5906V25.1969Z" fill="#E01E5A"/>
                                      <path d="M14.8034 8.50393C12.5042 8.50393 10.6459 6.64566 10.6459 4.34645C10.6459 2.04723 12.5042 0.188965 14.8034 0.188965C17.1026 0.188965 18.9609 2.04723 18.9609 4.34645V8.50393H14.8034ZM14.8034 10.6142C17.1026 10.6142 18.9609 12.4724 18.9609 14.7716C18.9609 17.0709 17.1026 18.9291 14.8034 18.9291H4.37818C2.07897 18.9291 0.220703 17.0709 0.220703 14.7716C0.220703 12.4724 2.07897 10.6142 4.37818 10.6142H14.8034Z" fill="#36C5F0"/>
                                      <path d="M31.465 14.7716C31.465 12.4724 33.3233 10.6142 35.6225 10.6142C37.9217 10.6142 39.7799 12.4724 39.7799 14.7716C39.7799 17.0709 37.9217 18.9291 35.6225 18.9291H31.465V14.7716ZM29.3862 14.7716C29.3862 17.0709 27.528 18.9291 25.2288 18.9291C22.9296 18.9291 21.0713 17.0709 21.0713 14.7716V4.34645C21.0713 2.04723 22.9296 0.188965 25.2288 0.188965C27.528 0.188965 29.3862 2.04723 29.3862 4.34645V14.7716Z" fill="#2EB67D"/>
                                      <path d="M25.2288 31.4331C27.528 31.4331 29.3863 33.2914 29.3863 35.5906C29.3863 37.8898 27.528 39.7481 25.2288 39.7481C22.9296 39.7481 21.0713 37.8898 21.0713 35.5906V31.4331H25.2288ZM25.2288 29.3544C22.9296 29.3544 21.0713 27.4961 21.0713 25.1969C21.0713 22.8977 22.9296 21.0394 25.2288 21.0394H35.654C37.9532 21.0394 39.8114 22.8977 39.8114 25.1969C39.8114 27.4961 37.9532 29.3544 35.654 29.3544H25.2288Z" fill="#ECB22E"/>
                                    </g>
                                    <defs>
                                      <clipPath id="clip0_30847_81616">
                                        <rect width="40" height="40" fill="white"/>
                                      </clipPath>
                                    </defs>
                                </svg>
                            </a>
                            <h4 class="text-center text-gray-900 text-lg font-semibold leading-8">Slack</h4>
                            <p class="text-center text-gray-500 text-sm font-normal leading-snug">Slack is a cloud-based collaboration platform designed to facilitate communication</p>
                        </div>
                    </div>
                    <div class="w-full px-6 py-8 rounded-2xl border border-gray-200 hover:border-indigo-600 transition-all duration-700 ease-in-out justify-center items-center gap-2.5 flex">
                        <div class="flex-col justify-start items-center gap-3.5 inline-flex">
                            <a href="">
                                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
                                    <g clip-path="url(#clip0_30847_81621)">
                                      <path d="M39.558 16.4377L39.504 16.3058L34.0583 3.28449C33.9481 3.02882 33.7519 2.81192 33.4983 2.66521C33.309 2.55416 33.094 2.48529 32.8705 2.46413C32.6471 2.44297 32.4213 2.4701 32.2111 2.54335C32.0013 2.61661 31.8127 2.73394 31.6612 2.88595C31.5096 3.03796 31.3989 3.22042 31.338 3.41871L27.6622 13.7345H12.7764L9.10047 3.41871C9.03916 3.22072 8.92824 3.0386 8.77653 2.88688C8.62482 2.73516 8.43653 2.61804 8.22667 2.54484C8.01683 2.47165 7.79124 2.44442 7.56786 2.46532C7.34451 2.48622 7.12956 2.55467 6.94017 2.66521C6.68656 2.81192 6.49041 3.02882 6.38019 3.28449L0.93705 16.3082L0.880537 16.4377C0.0968834 18.3151 0.000340194 20.3751 0.605462 22.3072C1.21058 24.2393 2.48456 25.9388 4.23532 27.1491L4.25587 27.1632L4.30208 27.1961L12.5862 32.8874L16.6962 35.7342L19.193 37.4649C19.486 37.6678 19.8431 37.7776 20.2102 37.7776C20.5774 37.7776 20.9345 37.6678 21.2275 37.4649L23.7243 35.7342L27.8343 32.8874L36.1775 27.1632L36.2006 27.1467C37.9512 25.9369 39.2253 24.2379 39.831 22.3063C40.4365 20.3747 40.3407 18.315 39.558 16.4377Z" fill="#E24329"/>
                                      <path d="M39.5589 16.4372L39.5049 16.3053C36.8517 16.8044 34.3515 17.8352 32.184 19.324L20.2266 27.6124L27.8403 32.8869L36.1835 27.1627L36.2067 27.1462C37.9565 25.9356 39.2295 24.2365 39.8342 22.305C40.4386 20.3734 40.3421 18.314 39.5589 16.4372Z" fill="#FC6D26"/>
                                      <path d="M12.5869 32.8873L16.6969 35.7341L19.1937 37.4647C19.4867 37.6677 19.8438 37.7774 20.2109 37.7774C20.5781 37.7774 20.9352 37.6677 21.2281 37.4647L23.7249 35.7341L27.8349 32.8873L20.2212 27.6128L12.5869 32.8873Z" fill="#FCA326"/>
                                      <path d="M8.25536 19.3244C6.08853 17.8364 3.58936 16.8064 0.93705 16.3081L0.880538 16.4376C0.0968834 18.315 0.000340134 20.3751 0.605462 22.3072C1.21058 24.2392 2.48456 25.9386 4.23532 27.1489L4.25587 27.1631L4.30208 27.196L12.5862 32.8873L20.2051 27.6128L8.25536 19.3244Z" fill="#FC6D26"/>
                                    </g>
                                    <defs>
                                      <clipPath id="clip0_30847_81621">
                                        <rect width="40" height="40" fill="white"/>
                                      </clipPath>
                                    </defs>
                                </svg>
                            </a>
                            <h4 class="text-center text-gray-900 text-lg font-semibold leading-8">GitLab</h4>
                            <p class="text-center text-gray-500 text-sm font-normal leading-snug">GitLab is a comprehensive DevOps platform that provides a complete solution for the entire software </p>
                        </div>
                    </div>
                    <div class="w-full px-6 py-8 rounded-2xl border border-gray-200 hover:border-indigo-600 transition-all duration-700 ease-in-out justify-center items-center gap-2.5 flex">
                        <div class="flex-col justify-start items-center gap-3.5 inline-flex">
                            <a href="">
                                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
                                    <g clip-path="url(#clip0_30847_81626)">
                                      <path d="M19.9989 0.065918C8.9872 0.065918 0.0600586 8.99282 0.0600586 20.0045C0.0600586 31.0166 8.9872 39.9428 19.9989 39.9428C31.0117 39.9428 39.9379 31.0166 39.9379 20.0045C39.9379 8.99354 31.0117 0.0668703 19.9986 0.0668703L19.9989 0.065918ZM29.1427 28.8231C28.7855 29.4088 28.0189 29.5945 27.4332 29.235C22.7517 26.3754 16.8584 25.7278 9.91792 27.3135C9.24911 27.4659 8.58244 27.0469 8.43006 26.3778C8.27696 25.7088 8.69434 25.0421 9.36482 24.8897C16.9601 23.1538 23.4751 23.9016 28.7308 27.1135C29.3165 27.4731 29.5022 28.2373 29.1427 28.8231ZM31.5832 23.3933C31.1332 24.1254 30.176 24.3564 29.4451 23.9064C24.0855 20.6114 15.9158 19.6573 9.57649 21.5816C8.75434 21.83 7.88601 21.3666 7.63649 20.5459C7.38887 19.7238 7.85244 18.8571 8.67315 18.6071C15.9143 16.41 24.9165 17.4743 31.0712 21.2564C31.8022 21.7064 32.0332 22.6635 31.5832 23.3935V23.3933ZM31.7927 17.74C25.3665 13.9231 14.7641 13.5721 8.62863 15.4342C7.64339 15.7331 6.60149 15.1769 6.30292 14.1916C6.00434 13.2059 6.56006 12.1647 7.54601 11.8652C14.5891 9.72711 26.2974 10.1402 33.696 14.5323C34.5841 15.0583 34.8746 16.2028 34.3484 17.0878C33.8246 17.974 32.677 18.2662 31.7936 17.74H31.7927Z" fill="#1ED760"/>
                                    </g>
                                    <defs>
                                      <clipPath id="clip0_30847_81626">
                                        <rect width="40" height="40" fill="white"/>
                                      </clipPath>
                                    </defs>
                                </svg>
                            </a>
                            <h4 class="text-center text-gray-900 text-lg font-semibold leading-8">Spotify</h4>
                            <p class="text-center text-gray-500 text-sm font-normal leading-snug">Spotify is a digital music streaming service that offers users access to millions of songs, podcasts</p>
                        </div>
                    </div>
                    <div class="w-full px-6 py-8 rounded-2xl border border-gray-200 hover:border-indigo-600 transition-all duration-700 ease-in-out justify-center items-center gap-2.5 flex">
                        <div class="flex-col justify-start items-center gap-3.5 inline-flex">
                            <a href="" class="w-10 h-10 flex items-center justify-center">
                                <svg xmlns="http://www.w3.org/2000/svg" width="39" height="40" viewBox="0 0 39 40" fill="none">
                                    <path d="M1.50371 36.8587L0.00174568 3.84178C-0.0478582 2.75137 0.965589 1.82725 2.28566 1.75918L36.3258 0.0039847C37.6696 -0.0652987 38.8269 0.777181 38.9109 1.88571C38.9141 1.92748 38.9156 1.96932 38.9156 2.01116V37.9889C38.9156 39.0996 37.8242 40 36.4779 40C36.4415 40 36.405 39.9993 36.3686 39.998L3.83032 38.7923C2.56308 38.7454 1.55128 37.9045 1.50371 36.8587Z" fill="#FF4785"/>
                                    <path d="M28.7362 4.91664L28.9686 0.303024L33.6434 0L33.8448 4.75786C33.8518 4.92344 33.6948 5.06236 33.4941 5.06815C33.4082 5.07062 33.3239 5.04789 33.2564 5.00399L31.4536 3.83239L29.3192 5.16811C29.1592 5.26825 28.9311 5.24241 28.8097 5.11041C28.7587 5.05484 28.7326 4.98632 28.7362 4.91664Z" fill="white"/>
                                    <path d="M22.7578 15.0769C22.7578 15.8593 29.1461 15.4843 30.0037 14.9347C30.0037 9.60652 26.5383 6.80664 20.1926 6.80664C13.8467 6.80664 10.2913 9.65008 10.2913 13.9152C10.2913 21.3437 22.4427 21.4859 22.4427 25.5378C22.4427 26.6752 21.7677 27.3505 20.2825 27.3505C18.3472 27.3505 17.5821 26.5351 17.6722 23.7628C17.6722 23.1613 10.2913 22.9738 10.0662 23.7628C9.49324 30.4812 14.5669 32.419 20.3726 32.419C25.9983 32.419 30.4088 29.9451 30.4088 25.4667C30.4088 17.5051 18.0773 17.7183 18.0773 13.7731C18.0773 12.1736 19.5174 11.9604 20.3726 11.9604C21.2727 11.9604 22.8928 12.0913 22.7578 15.0769Z" fill="white"/>
                                </svg>
                            </a>
                            <h4 class="text-center text-gray-900 text-lg font-semibold leading-8">Storybook</h4>
                            <p class="text-center text-gray-500 text-sm font-normal leading-snug">Storybook is an open-source tool for developing UI components in isolation for React, Vue</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

HTML Copy

Integration with CTA Button

following example of integration shows box layout which includes logos and name of applications with CTA button on top.

Preview
Code

Figma File

                                                <section class="py-24 relative">
        <div class="w-full max-w-7xl px-4 md:px-5 lg:px-5 mx-auto">
            <div class="w-full flex-col justify-start items-center lg:gap-11 gap-7 inline-flex">
                <div class="w-full justify-between items-center lg:gap-12 gap-7 flex md:flex-row flex-col">
                    <div class="flex-col justify-center md:items-start items-center gap-2.5 inline-flex">
                        <h2 class="text-gray-900 text-3xl font-bold font-manrope leading-normal">Integrations</h2>
                        <p class="text-gray-500 text-base font-normal leading-relaxed md:text-start text-center">Over 250 top applications can be effortlessly integrated with Segment.</p>
                    </div>
                    <button class="px-5 py-2.5 bg-blue-600 hover:bg-blue-800 transition-all duration-700 ease-in-out rounded-xl shadow justify-center items-center flex">
                        <span class="px-2 py-px text-white text-base font-semibold leading-relaxed whitespace-nowrap">ALL INTEGRATION</span>
                        <div class="w-5 h-5 relative">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                <path d="M4.5845 4.99988L9.5847 10.0001L4.58154 15.0032M10.4178 4.99988L15.418 10.0001L10.4149 15.0032" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                    </button>
                </div>
                <div class="w-full justify-start items-center gap-6 flex md:flex-row flex-col">
                    <div class="w-full p-6 rounded-2xl border border-gray-200 hover:border-indigo-600 hover:bg-blue-50 transition-all duration-700 ease-in-out flex-col justify-start items-center gap-3 inline-flex">
                        <a href="">
                            <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none">
                                <g clip-path="url(#clip0_30847_81934)">
                                  <path d="M7.71003 22.6772C7.71003 24.7464 6.03759 26.4189 3.96829 26.4189C1.899 26.4189 0.226562 24.7464 0.226562 22.6772C0.226562 20.6079 1.899 18.9354 3.96829 18.9354H7.71003V22.6772ZM9.58089 22.6772C9.58089 20.6079 11.2533 18.9354 13.3226 18.9354C15.3919 18.9354 17.0644 20.6079 17.0644 22.6772V32.0315C17.0644 34.1008 15.3919 35.7732 13.3226 35.7732C11.2533 35.7732 9.58089 34.1008 9.58089 32.0315V22.6772Z" fill="#E01E5A"/>
                                  <path d="M13.3227 7.65351C11.2534 7.65351 9.58092 5.98107 9.58092 3.91178C9.58092 1.84248 11.2534 0.170044 13.3227 0.170044C15.3919 0.170044 17.0644 1.84248 17.0644 3.91178V7.65351H13.3227ZM13.3227 9.55272C15.3919 9.55272 17.0644 11.2252 17.0644 13.2945C17.0644 15.3637 15.3919 17.0362 13.3227 17.0362H3.93997C1.87068 17.0362 0.198242 15.3637 0.198242 13.2945C0.198242 11.2252 1.87068 9.55272 3.93997 9.55272H13.3227Z" fill="#36C5F0"/>
                                  <path d="M28.3182 13.2945C28.3182 11.2252 29.9906 9.55272 32.0599 9.55272C34.1292 9.55272 35.8017 11.2252 35.8017 13.2945C35.8017 15.3637 34.1292 17.0362 32.0599 17.0362H28.3182V13.2945ZM26.4473 13.2945C26.4473 15.3637 24.7749 17.0362 22.7056 17.0362C20.6363 17.0362 18.9639 15.3637 18.9639 13.2945V3.91178C18.9639 1.84248 20.6363 0.170044 22.7056 0.170044C24.7749 0.170044 26.4473 1.84248 26.4473 3.91178V13.2945Z" fill="#2EB67D"/>
                                  <path d="M22.7056 28.2898C24.7749 28.2898 26.4473 29.9622 26.4473 32.0315C26.4473 34.1008 24.7749 35.7732 22.7056 35.7732C20.6363 35.7732 18.9639 34.1008 18.9639 32.0315V28.2898H22.7056ZM22.7056 26.4189C20.6363 26.4189 18.9639 24.7464 18.9639 22.6772C18.9639 20.6079 20.6363 18.9354 22.7056 18.9354H32.0883C34.1576 18.9354 35.83 20.6079 35.83 22.6772C35.83 24.7464 34.1576 26.4189 32.0883 26.4189H22.7056Z" fill="#ECB22E"/>
                                </g>
                                <defs>
                                  <clipPath id="clip0_30847_81934">
                                    <rect width="36" height="36" fill="white"/>
                                  </clipPath>
                                </defs>
                            </svg>
                        </a>
                        <h5 class="text-center text-gray-900 text-base font-semibold leading-relaxed">Slack</h5>
                    </div>
                    <div class="w-full p-6 rounded-2xl border border-gray-200 hover:border-indigo-600 hover:bg-blue-50 transition-all duration-700 ease-in-out flex-col justify-start items-center gap-3 inline-flex">
                        <a href="">
                            <svg xmlns="http://www.w3.org/2000/svg" width="34" height="36" viewBox="0 0 34 36" fill="none">
                                <g clip-path="url(#clip0_30847_81937)">
                                  <path d="M33.1355 14.7939L33.091 14.6752L28.5983 2.95603C28.5073 2.72592 28.3454 2.53072 28.1363 2.39868C27.9801 2.29873 27.8027 2.23675 27.6183 2.21771C27.434 2.19866 27.2477 2.22308 27.0743 2.289C26.9012 2.35493 26.7456 2.46053 26.6206 2.59734C26.4956 2.73415 26.4042 2.89837 26.354 3.07683L23.3214 12.3611H11.0406L8.00804 3.07683C7.95745 2.89864 7.86595 2.73473 7.74079 2.59818C7.61562 2.46163 7.46029 2.35622 7.28715 2.29035C7.11403 2.22447 6.92792 2.19996 6.74364 2.21877C6.55937 2.23758 6.38204 2.29919 6.22579 2.39868C6.01656 2.53072 5.85473 2.72592 5.7638 2.95603L1.27321 14.6774L1.22659 14.7939C0.580075 16.4836 0.500427 18.3376 0.999653 20.0765C1.49888 21.8154 2.54991 23.3449 3.99428 24.4341L4.01124 24.4469L4.04936 24.4765L10.8838 29.5986L14.2745 32.1608L16.3344 33.7184C16.5761 33.9011 16.8707 33.9998 17.1736 33.9998C17.4765 33.9998 17.7711 33.9011 18.0128 33.7184L20.0727 32.1608L23.4634 29.5986L30.3466 24.4469L30.3657 24.432C31.8099 23.3432 32.861 21.8141 33.3607 20.0757C33.8602 18.3372 33.7812 16.4835 33.1355 14.7939Z" fill="#E24329"/>
                                  <path d="M33.1357 14.7935L33.0912 14.6748C30.9022 15.124 28.8396 16.0517 27.0514 17.3916L17.1865 24.8512L23.4678 29.5982L30.351 24.4464L30.3701 24.4316C31.8137 23.3421 32.864 21.8129 33.3628 20.0745C33.8615 18.3361 33.7818 16.4826 33.1357 14.7935Z" fill="#FC6D26"/>
                                  <path d="M10.8843 29.5986L14.275 32.1607L16.3349 33.7183C16.5766 33.901 16.8712 33.9997 17.1741 33.9997C17.477 33.9997 17.7716 33.901 18.0133 33.7183L20.0732 32.1607L23.4639 29.5986L17.1826 24.8516L10.8843 29.5986Z" fill="#FCA326"/>
                                  <path d="M7.31082 17.3919C5.52319 16.0527 3.46137 15.1257 1.27321 14.6772L1.22659 14.7938C0.580075 16.4835 0.500427 18.3375 0.999653 20.0764C1.49888 21.8153 2.54991 23.3447 3.99428 24.434L4.01124 24.4467L4.04936 24.4764L10.8838 29.5985L17.1694 24.8515L7.31082 17.3919Z" fill="#FC6D26"/>
                                </g>
                                <defs>
                                  <clipPath id="clip0_30847_81937">
                                    <rect width="33" height="36" fill="white" transform="translate(0.5)"/>
                                  </clipPath>
                                </defs>
                            </svg>
                        </a>
                        <h5 class="text-center text-gray-900 text-base font-semibold leading-relaxed">GitLab</h5>
                    </div>
                    <div class="w-full p-6 rounded-2xl border border-gray-200 hover:border-indigo-600 hover:bg-blue-50 transition-all duration-700 ease-in-out flex-col justify-start items-center gap-3 inline-flex">
                        <a href="">
                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="36" viewBox="0 0 40 36" fill="none">
                                <path d="M8.75404 1.18468L19.9598 0L31.1656 1.18468L39.841 12.8307L19.9598 35.9821L0.0786133 12.8307L8.75404 1.18468Z" fill="#FDB300"/>
                                <path d="M8.13149 12.8307L19.9598 35.9821L0.0786133 12.8307H8.13149Z" fill="#EA6C00"/>
                                <path d="M31.7879 12.8307L19.9596 35.9821L39.8408 12.8307H31.7879Z" fill="#EA6C00"/>
                                <path d="M8.13135 12.8307H31.788L19.9597 35.9821L8.13135 12.8307Z" fill="#FDAD00"/>
                                <path d="M19.9597 0L8.75386 1.18466L8.13135 12.8307L19.9597 0Z" fill="#FDD231"/>
                                <path d="M19.9598 0L31.1656 1.18466L31.7881 12.8307L19.9598 0Z" fill="#FDD231"/>
                                <path d="M39.8408 12.8307L31.1653 1.18469L31.7879 12.8307H39.8408Z" fill="#FDAD00"/>
                                <path d="M0.0786133 12.8307L8.75401 1.18469L8.13149 12.8307H0.0786133Z" fill="#FDAD00"/>
                                <path d="M19.9597 0L8.13135 12.8307H31.788L19.9597 0Z" fill="#FEEEB7"/>
                            </svg>
                        </a>
                        <h5 class="text-center text-gray-900 text-base font-semibold leading-relaxed">Sketch</h5>
                    </div>
                    <div class="w-full p-6 rounded-2xl border border-gray-200 hover:border-indigo-600 hover:bg-blue-50 transition-all duration-700 ease-in-out flex-col justify-start items-center gap-3 inline-flex">
                        <a href="">
                            <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none">
                                <g clip-path="url(#clip0_30847_81943)">
                                  <path d="M22.4999 18.0079C22.5005 19.3059 22.2663 20.5934 21.8087 21.8081C20.5935 22.2657 19.3058 22.5002 18.0073 22.5004H17.9921C16.6551 22.4987 15.374 22.2543 14.1919 21.8087C13.734 20.5938 13.4996 19.3062 13.5 18.0079V17.9921C13.4994 16.6943 13.7333 15.4071 14.1905 14.1924C15.4055 13.734 16.6936 13.4994 17.9923 13.5H18.0075C19.306 13.4994 20.5939 13.7339 21.8088 14.1923C22.2665 15.4068 22.5007 16.6941 22.5 17.992L22.4999 18.0079ZM35.75 15H25.243L32.6721 7.57041C32.089 6.75129 31.4386 5.98226 30.7275 5.27133C30.0165 4.56115 29.2477 3.91073 28.429 3.32789L20.9994 10.7575V0.250594C20.0113 0.0843649 19.011 0.000545189 18.009 0L17.9904 0C16.9712 0.0005625 15.9729 0.0871875 15 0.250594V10.7575L7.57041 3.32789C6.75161 3.91057 5.98312 4.5609 5.27302 5.27203L5.26908 5.27484C4.55928 5.98489 3.90975 6.75272 3.32719 7.57041L10.7574 15H0.250594C0.250594 15 0 16.9734 0 17.9938V18.0062C0 19.0266 0.0864844 20.0265 0.250594 21H10.7575L3.32733 28.4296C4.49615 30.0698 5.93016 31.5038 7.57041 32.6727L15 25.2425V35.75C15.9871 35.9154 16.9861 35.999 17.9869 36H18.0124C19.0132 35.9991 20.0122 35.9155 20.9993 35.75V25.2425L28.4296 32.6727C29.2481 32.0896 30.0167 31.4396 30.7275 30.7292L30.7292 30.7275C31.4393 30.0166 32.0891 29.248 32.6721 28.4296L25.2419 21H35.75C35.9135 20.0282 35.9989 19.0312 36 18.0131V17.9869C35.9989 16.9688 35.9135 15.9718 35.75 15Z" fill="#FF4A00"/>
                                </g>
                                <defs>
                                  <clipPath id="clip0_30847_81943">
                                    <rect width="36" height="36" fill="white"/>
                                  </clipPath>
                                </defs>
                            </svg>
                        </a>
                        <h5 class="text-center text-gray-900 text-base font-semibold leading-relaxed">Zapier</h5>
                    </div>
                    <div class="w-full p-6 rounded-2xl border border-gray-200 hover:border-indigo-600 hover:bg-blue-50 transition-all duration-700 ease-in-out flex-col justify-start items-center gap-3 inline-flex">
                        <a href="">
                            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="36" viewBox="0 0 48 36" fill="none">
                                <g clip-path="url(#clip0_30847_81946)">
                                  <path d="M40.1132 3.01496C37.105 1.60648 33.8888 0.582815 30.5264 0C30.1133 0.747198 29.6308 1.75218 29.2983 2.55168C25.7238 2.01371 22.1821 2.01371 18.6735 2.55168C18.341 1.75218 17.8475 0.747198 17.4309 0C14.0647 0.582815 10.8448 1.61022 7.83679 3.02243C1.76968 12.198 0.124979 21.1458 0.947329 29.9664C4.97136 32.9739 8.87112 34.8008 12.7051 35.9963C13.6517 34.6924 14.496 33.3064 15.2233 31.8456C13.8381 31.3188 12.5114 30.6688 11.2578 29.914C11.5903 29.6676 11.9156 29.4098 12.23 29.1446C19.876 32.7236 28.1835 32.7236 35.7383 29.1446C36.0561 29.4098 36.3815 29.6676 36.7104 29.914C35.4531 30.6724 34.1227 31.3226 32.7375 31.8493C33.4649 33.3064 34.3055 34.6962 35.2557 36C39.0933 34.8045 42.9967 32.9776 47.0208 29.9664C47.9858 19.7411 45.3724 10.8755 40.1132 3.01496ZM16.2649 24.5418C13.9697 24.5418 12.0874 22.3973 12.0874 19.7859C12.0874 17.1744 13.9295 15.0262 16.2649 15.0262C18.6005 15.0262 20.4826 17.1707 20.4424 19.7859C20.4462 22.3973 18.6005 24.5418 16.2649 24.5418ZM31.7033 24.5418C29.4079 24.5418 27.5256 22.3973 27.5256 19.7859C27.5256 17.1744 29.3678 15.0262 31.7033 15.0262C34.0386 15.0262 35.9209 17.1707 35.8807 19.7859C35.8807 22.3973 34.0386 24.5418 31.7033 24.5418Z" fill="#5865F2"/>
                                </g>
                                <defs>
                                  <clipPath id="clip0_30847_81946">
                                    <rect width="46.5" height="36" fill="white" transform="translate(0.75)"/>
                                  </clipPath>
                                </defs>
                            </svg>
                        </a>
                        <h5 class="text-center text-gray-900 text-base font-semibold leading-relaxed">Discord</h5>
                    </div>
                </div>
            </div>
        </div>
    </section>

HTML Copy

Dark Integration Section

This example of App integration in Tailwind CSS shows card layout which shows application logos and description. below example is perfectly suitable for dark theme of your website.

Preview
Code

Figma File

                                                <section class="py-24 relative bg-gray-900">
        <div class="w-full max-w-7xl px-4 md:px-5 lg:px-5 mx-auto">
            <div class="w-full flex-col justify-start items-start lg:gap-11 gap-8 inline-flex">
                <div class="flex-col justify-start items-center gap-2.5 flex">
                    <h2 class="text-center text-white text-3xl font-bold font-manrope leading-normal">Our Integrations</h2>
                    <p class="text-center text-gray-200 text-lg font-normal leading-8">The goal of integrating these services is to enrich the user experience, increase productivity, and provide users with a more comprehensive solution that meets their needs.</p>
                </div>
                <div class="flex-col justify-start items-start gap-8 grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1">
                    <div class="px-6 py-8 bg-gray-900 rounded-2xl border border-gray-500 justify-start items-start gap-2.5 flex">
                        <div class="flex-col justify-start items-start gap-4 inline-flex">
                            <a href="">
                                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
                                    <path d="M20 40C31.0457 40 40 31.0457 40 20C40 8.9543 31.0457 0 20 0C8.9543 0 0 8.9543 0 20C0 31.0457 8.9543 40 20 40Z" fill="#139EF3"/>
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M19.9999 7.23401C20.5183 7.23401 20.9386 7.64994 20.9386 8.16302V8.90622H27.5235C29.2271 8.90622 30.6081 10.2729 30.6081 11.9587V14.742C30.6081 15.0588 30.7352 15.3626 30.9616 15.5867L31.4827 16.1023C32.0588 16.6724 32.0588 17.5968 31.4827 18.1669L30.9616 18.6825C30.7352 18.9065 30.6081 19.2103 30.6081 19.5271V22.0981C30.6081 22.6112 30.1878 23.0271 29.6693 23.0271C29.1508 23.0271 28.7305 22.6112 28.7305 22.0981V19.5271C28.7305 18.7175 29.0555 17.9411 29.634 17.3687L29.8705 17.1346L29.634 16.9005C29.0555 16.328 28.7305 15.5516 28.7305 14.742V11.9587C28.7305 11.299 28.1901 10.7642 27.5235 10.7642H12.4762C11.8096 10.7642 11.2692 11.299 11.2692 11.9587V14.742C11.2692 15.5516 10.9442 16.328 10.3657 16.9005L10.1292 17.1346L10.3657 17.3687C10.9442 17.9411 11.2692 18.7175 11.2692 19.5271V21.9654C11.2692 22.6251 11.8096 23.1599 12.4762 23.1599H25.5118C27.2154 23.1599 28.5964 24.5265 28.5964 26.2123V30.9901C28.5964 32.6759 27.2154 34.0425 25.5118 34.0425H14.8902C13.1867 34.0425 11.8056 32.6759 11.8056 30.9901V28.7604C11.8056 28.2474 12.2259 27.8314 12.7444 27.8314C13.2629 27.8314 13.6832 28.2474 13.6832 28.7604V30.9901C13.6832 31.6497 14.2236 32.1845 14.8902 32.1845H25.5118C26.1784 32.1845 26.7188 31.6497 26.7188 30.9901V26.2123C26.7188 25.5527 26.1784 25.0179 25.5118 25.0179H12.4762C10.7727 25.0179 9.39162 23.6512 9.39162 21.9654V19.5271C9.39162 19.2103 9.26447 18.9065 9.03809 18.6825L8.51704 18.1669C7.94094 17.5968 7.94094 16.6724 8.51704 16.1023L9.03809 15.5867C9.26447 15.3626 9.39162 15.0588 9.39162 14.742V11.9587C9.39162 10.2729 10.7727 8.90622 12.4762 8.90622H19.0611V8.16302C19.0611 7.64994 19.4814 7.23401 19.9999 7.23401Z" fill="white"/>
                                    <path d="M16.3829 17.4469C17.2055 17.4469 17.8723 16.6848 17.8723 15.7447C17.8723 14.8047 17.2055 14.0426 16.3829 14.0426C15.5604 14.0426 14.8936 14.8047 14.8936 15.7447C14.8936 16.6848 15.5604 17.4469 16.3829 17.4469Z" fill="white"/>
                                    <path d="M23.6168 17.4469C24.4394 17.4469 25.1062 16.6848 25.1062 15.7447C25.1062 14.8047 24.4394 14.0426 23.6168 14.0426C22.7943 14.0426 22.1274 14.8047 22.1274 15.7447C22.1274 16.6848 22.7943 17.4469 23.6168 17.4469Z" fill="white"/>
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M20 5.34047C19.5769 5.34047 19.234 5.71198 19.234 6.17025C19.234 6.62853 19.5769 7.00004 20 7.00004C20.423 7.00004 20.7659 6.62853 20.7659 6.17025C20.7659 5.71198 20.423 5.34047 20 5.34047ZM17.4468 6.17025C17.4468 4.64266 18.5899 3.4043 20 3.4043C21.4101 3.4043 22.5532 4.64266 22.5532 6.17025C22.5532 7.69785 21.4101 8.93621 20 8.93621C18.5899 8.93621 17.4468 7.69785 17.4468 6.17025Z" fill="white"/>
                                </svg>
                            </a>
                            <h4 class="text-white text-lg font-semibold leading-8">Stoplight</h4>
                            <p class="text-gray-50 text-sm font-normal leading-snug">Stoplight is a powerful platform designed to streamline the development and management.</p>
                        </div>
                    </div>
                    <div class="px-6 py-8 bg-gray-900 rounded-2xl border border-gray-500 justify-start items-start gap-3 flex">
                        <div class="flex-col justify-start items-start gap-4 inline-flex">
                            <a href="">
                                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
                                    <mask id="mask0_30907_1209" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="40" height="40">
                                      <path d="M0 0H40V40H0V0Z" fill="white"/>
                                    </mask>
                                    <g mask="url(#mask0_30907_1209)">
                                      <path fill-rule="evenodd" clip-rule="evenodd" d="M35.8412 19.6002C35.3062 21.8861 34.4391 24.1156 33.2644 26.2271C32.5143 27.5754 31.6696 28.8168 30.7423 29.9407C31.8008 25.0952 31.0844 19.1592 28.4878 13.5926C28.3052 13.2012 27.8834 13.0715 27.5497 13.3057L19.4634 18.9806C19.1539 19.1981 19.0596 19.656 19.2531 20.0038L20.4387 22.1347C20.6321 22.4826 21.04 22.5882 21.3497 22.371L26.5905 18.6927C26.7661 19.258 26.9236 19.8271 27.0577 20.4002C27.562 22.554 27.7499 24.6557 27.6159 26.6473C27.3669 30.3546 26.0231 33.2433 23.8319 34.7811C22.7376 35.5492 21.4662 35.9559 20.0844 36.0001C20.0544 35.9995 20.0239 36.0006 19.9939 36.0001C19.9681 36.0001 19.942 35.9995 19.9162 36.0001C18.5343 35.956 17.2627 35.5492 16.1681 34.7809C13.977 33.2433 12.633 30.3546 12.384 26.6473C12.2502 24.6557 12.4381 22.554 12.9422 20.4002C13.4774 18.1143 14.3442 15.8848 15.5191 13.7733C16.6938 11.6618 18.0979 9.8093 19.6928 8.2671C21.1953 6.81401 22.7949 5.70305 24.4472 4.96508C27.5234 3.59119 30.4241 3.68163 32.6153 5.21945C34.8064 6.75708 36.1504 9.64575 36.3994 13.3531C36.5333 15.3447 36.3455 17.4464 35.8412 19.6002ZM6.73568 26.2271C5.56089 24.1156 4.69395 21.8861 4.15876 19.6002C3.6546 17.4464 3.46677 15.3447 3.60053 13.3531C3.84972 9.64575 5.19353 6.75708 7.38478 5.21945C9.57586 3.68163 12.4767 3.59119 15.5527 4.96508C16.0159 5.17185 16.4741 5.41232 16.9279 5.67792C15.2883 7.34654 13.7819 9.35178 12.5005 11.655C9.10713 17.7539 8.07507 24.5284 9.25817 29.9413C8.33088 28.8174 7.48598 27.5756 6.73568 26.2271ZM34.5014 1.82909C30.3442 -1.08852 24.8719 -0.395104 19.9986 3.05142C15.1262 -0.393962 9.6552 -1.08795 5.4985 1.82928C-1.0688 6.43817 -1.86641 18.3101 3.71699 28.3456C7.83401 35.7451 14.2703 40.0796 20.0003 39.9989C25.73 40.0792 32.1661 35.7449 36.283 28.3456C41.8664 18.3101 41.0689 6.43817 34.5014 1.82909Z" fill="#1BDBDB"/>
                                    </g>
                                </svg>
                            </a>
                            <h4 class="text-white text-lg font-semibold leading-8">GoDaddy</h4>
                            <p class="text-gray-50 text-sm font-normal leading-snug">GoDaddy is a globally renowned technology company specializing in domain registration</p>
                        </div>
                    </div>
                    <div class="px-6 py-8 bg-gray-900 rounded-2xl border border-gray-500 justify-start items-start gap-2.5 flex">
                        <div class="flex-col justify-start items-start gap-4 inline-flex">
                            <a href="">
                                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
                                    <g clip-path="url(#clip0_30847_81906)">
                                      <path d="M8.06732 0.0419922H32.1145C36.6002 0.0419922 40.128 2.7874 39.9594 6.15749V26.6194C39.9594 29.9843 36.4383 32.7297 32.1078 32.7297H26.8194L29.7064 39.9633L15.7638 32.7297H8.07406C3.5884 32.7297 0.0605565 29.9843 0.0605565 26.4934V6.16274C0.0538303 2.7874 3.58166 0.0419922 8.06732 0.0419922ZM17.4096 22.4987C16.5935 22.147 15.9392 21.6378 15.4467 20.9659C14.9543 20.294 14.7115 19.4856 14.7115 18.5459V7.64305C14.7115 7.47507 14.6643 7.34384 14.5631 7.25985C14.4687 7.17061 14.3068 7.12862 14.0774 7.12862H10.4956C10.4147 7.12862 10.3338 7.13912 10.2596 7.16536C10.1854 7.19161 10.1179 7.22835 10.0707 7.28085C9.95602 7.38059 9.89531 7.51182 9.90205 7.6483V18.5039C9.90205 20.2415 10.3607 21.6955 11.2781 22.8766C12.1955 24.0525 13.4231 24.9291 14.9746 25.5066C16.5193 26.084 18.2461 26.3675 20.1483 26.3675C22.0572 26.3675 23.784 26.084 25.3287 25.5223C26.8734 24.9606 28.101 24.0945 29.0184 22.9186C29.9358 21.7428 30.3945 20.2835 30.3945 18.5407V7.65355C30.3945 7.58531 30.381 7.51707 30.3472 7.44883C30.3135 7.38583 30.2663 7.32284 30.2056 7.2756C30.0774 7.17586 29.9088 7.12337 29.693 7.12337H26.2798C26.0774 7.12337 25.9088 7.17061 25.7874 7.27035C25.6592 7.37009 25.5985 7.49607 25.5985 7.65355V18.5459C25.5985 19.4226 25.3557 20.2047 24.87 20.8819C24.3843 21.5643 23.73 22.0892 22.9004 22.462C22.0707 22.8347 21.1533 23.0184 20.155 23.0184C19.1365 23.0236 18.2258 22.8504 17.4096 22.4987Z" fill="#2B52FD"/>
                                    </g>
                                    <defs>
                                      <clipPath id="clip0_30847_81906">
                                        <rect width="40" height="40" fill="white"/>
                                      </clipPath>
                                    </defs>
                                </svg>
                            </a>
                            <h4 class="text-white text-lg font-semibold leading-8">Usertesting</h4>
                            <p class="text-gray-50 text-sm font-normal leading-snug">UserTesting is a leading platform that enables businesses to gather valuable insights.</p>
                        </div>
                    </div>   
                    <div class="px-6 py-8 bg-gray-900 rounded-2xl border border-gray-500 justify-start items-start gap-2.5 flex">
                        <div class="flex-col justify-start items-start gap-4 inline-flex">
                            <a href="">
                                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
                                    <path d="M27.648 11.9033C26.19 11.9047 24.7912 11.2786 23.7592 10.1628C22.7272 9.047 22.1466 7.53285 22.1449 5.95333C22.1453 5.1711 22.288 4.3966 22.5646 3.67407C22.8413 2.95155 23.2466 2.29513 23.7575 1.74232C24.2684 1.1895 24.8747 0.751098 25.542 0.452152C26.2093 0.153206 26.9244 -0.000434128 27.6464 3.73333e-06C28.3686 -0.000872178 29.084 0.15239 29.7513 0.451035C30.4189 0.749682 31.0257 1.18786 31.5367 1.74055C32.048 2.29323 32.4537 2.9496 32.7306 3.67215C33.0075 4.3947 33.1504 5.16928 33.151 5.95167C33.1504 6.73405 33.0075 7.50863 32.7306 8.2312C32.4537 8.95375 32.048 9.61012 31.5367 10.1628C31.0257 10.7155 30.4189 11.1537 29.7513 11.4523C29.084 11.7509 28.3686 11.9042 27.6464 11.9033H27.648ZM11.0433 11.9033C10.3213 11.9042 9.60611 11.751 8.9387 11.4525C8.27128 11.1539 7.66468 10.7159 7.15353 10.1634C6.64239 9.61088 6.2367 8.95472 5.95962 8.23235C5.68256 7.50998 5.53953 6.73558 5.53873 5.95333C5.53913 5.17082 5.68185 4.39605 5.95874 3.6733C6.23564 2.95055 6.64125 2.294 7.15245 1.74113C7.66364 1.18827 8.27037 0.749945 8.93799 0.451195C9.60561 0.152445 10.321 -0.000872182 11.0433 3.73333e-06C11.7654 -0.000653152 12.4805 0.15277 13.1479 0.451513C13.8152 0.750258 14.4217 1.18847 14.9327 1.74113C15.4437 2.2938 15.8492 2.95008 16.1261 3.67253C16.403 4.39498 16.5458 5.16943 16.5464 5.95167C16.5458 6.73392 16.403 7.50837 16.1261 8.2308C15.8492 8.95325 15.4437 9.60955 14.9327 10.1622C14.4217 10.7149 13.8152 11.1531 13.1479 11.4518C12.4805 11.7506 11.7654 11.904 11.0433 11.9033ZM2.10334 19.315C0.801799 19.315 -0.22897 20.5283 0.0448765 21.905C1.00498 26.6573 3.43644 30.911 6.93561 33.9598C10.4348 37.0088 14.7912 38.6697 19.2818 38.6667C28.7187 38.6667 36.6049 31.4883 38.5203 21.905C38.7941 20.5283 37.7633 19.315 36.4618 19.315H2.10334Z" fill="#EB4E53"/>
                                </svg>
                            </a>
                            <h4 class="text-white text-lg font-semibold leading-8">Videoask</h4>
                            <p class="text-gray-50 text-sm font-normal leading-snug">Videoask is a versatile platform that enables users to create interactive video.</p>
                        </div>
                    </div>
                    <div class="px-6 py-8 bg-gray-900 rounded-2xl border border-gray-500 justify-start items-start gap-2.5 flex">
                        <div class="flex-col justify-start items-start gap-4 inline-flex">
                            <a href="">
                                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
                                    <g clip-path="url(#clip0_30847_81917)">
                                      <path d="M33.9903 33.9716H28.1721V24.7199C28.1721 22.5138 28.1333 19.6738 25.146 19.6738C22.1157 19.6738 21.6521 22.0775 21.6521 24.5593V33.971H15.8339V14.9458H21.4194V17.5458H21.4976C22.0565 16.5754 22.8643 15.777 23.8347 15.2359C24.8052 14.6946 25.902 14.4309 27.0085 14.4726C32.9054 14.4726 33.9927 18.411 33.9927 23.5347L33.9903 33.9716ZM9.26907 12.3452C8.60132 12.3453 7.94847 12.1444 7.3932 11.7677C6.83786 11.3911 6.40501 10.8558 6.14938 10.2294C5.89369 9.60301 5.82671 8.91372 5.95687 8.24867C6.08701 7.58363 6.40847 6.97267 6.88059 6.4931C7.35271 6.01358 7.95423 5.68696 8.6092 5.55456C9.2641 5.42216 9.94302 5.48993 10.56 5.74929C11.177 6.00866 11.7044 6.448 12.0755 7.01169C12.4466 7.57538 12.6447 8.23821 12.6448 8.91624C12.6449 9.36646 12.5577 9.8123 12.388 10.2282C12.2185 10.6442 11.9698 11.0222 11.6563 11.3406C11.3429 11.659 10.9707 11.9116 10.5611 12.084C10.1515 12.2564 9.71247 12.3451 9.26907 12.3452ZM12.1782 33.9716H6.35392V14.9458H12.1782V33.9716ZM36.8909 0.00241024H3.43029C2.67083 -0.00629214 1.93903 0.291515 1.39571 0.830389C0.852384 1.36926 0.541984 2.10512 0.532715 2.87625V36.9925C0.541666 37.7641 0.851875 38.5004 1.39518 39.0399C1.93849 39.5793 2.67046 39.8777 3.43029 39.8695H36.8909C37.6522 39.8792 38.3862 39.5817 38.9317 39.0422C39.4771 38.5028 39.7894 37.7656 39.8 36.9925V2.87379C39.7891 2.10113 39.4767 1.36444 38.9312 0.825577C38.3857 0.286715 37.6519 -0.0102419 36.8909 -5.12993e-05V0.00241024Z" fill="#0A66C2"/>
                                    </g>
                                    <defs>
                                      <clipPath id="clip0_30847_81917">
                                        <rect width="40" height="40" fill="white"/>
                                      </clipPath>
                                    </defs>
                                </svg>
                            </a>
                            <h4 class="text-white text-lg font-semibold leading-8">Linkdin</h4>
                            <p class="text-gray-50 text-sm font-normal leading-snug">LinkedIn is a professional networking platform that connects individuals and businesses worldwide.</p>
                        </div>
                    </div>
                    <div class="px-6 py-8 bg-gray-900 rounded-2xl border border-gray-500 justify-start items-start gap-2.5 flex">
                        <div class="flex-col justify-start items-start gap-4 inline-flex">
                            <a href="">
                                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
                                    <g clip-path="url(#clip0_30847_81922)">
                                      <path d="M1.0189 19.259C0.164265 20.2984 -0.193991 23.5672 0.103836 25.7345C0.207428 26.4492 0.380082 27.0459 0.626113 27.4033C0.967103 27.8951 1.54118 28.1902 2.19294 28.2066C2.61163 28.223 2.87492 28.1672 10.7522 26.2427C10.7522 26.2427 14.2528 25.3935 14.2701 25.3869C15.1419 25.2164 15.7333 24.6066 15.7894 23.8295C15.8455 23.0295 15.306 22.3246 14.4082 22.0722C14.4082 22.0722 11.9392 21.3082 11.9349 21.3082C3.46626 18.6558 3.08642 18.5509 2.65911 18.5476C2.00302 18.5312 1.42463 18.7804 1.0189 19.259ZM19.959 39.0263C20.0971 38.7246 20.1144 38.5181 20.136 32.2295C20.136 32.2295 20.1532 29.4525 20.1575 29.423C20.2136 28.741 19.6353 28.1213 18.6857 27.8427C17.7059 27.5574 16.6527 27.7345 16.0613 28.2918C16.0613 28.2918 14.3348 29.8492 14.3262 29.8492C8.39552 35.141 8.14517 35.3869 8.00273 35.6984C7.91209 35.882 7.88187 36.0787 7.90777 36.2754C7.9423 36.5574 8.11064 36.8328 8.38688 37.0918C9.76379 38.3345 16.3592 40.1771 18.4655 39.9017C19.2036 39.8066 19.7345 39.4951 19.959 39.0263ZM33.3439 36.8394C35.3338 36.2361 39.6717 32.0459 39.9781 30.4295C40.0861 29.8689 39.853 29.3836 39.3436 29.0754C39.0113 28.8853 38.7566 28.8099 30.8793 26.8459C30.8793 26.8459 27.4262 25.9804 27.3788 25.964C26.5414 25.7181 25.5875 25.9476 24.9487 26.5476C24.2796 27.164 24.1804 27.9804 24.7156 28.5935L26.1054 30.3115C30.78 36.0787 31.1383 36.4853 31.475 36.6853C31.9929 36.9968 32.6533 37.0492 33.3439 36.8394ZM29.2736 21.9935C38.2214 20.3476 38.571 20.259 38.9206 20.082C39.4645 19.8033 39.7364 19.341 39.6889 18.7771C39.6889 18.7607 39.6933 18.741 39.6889 18.7213C39.4602 17.0492 35.61 12.7082 33.7108 12.0033C33.0375 11.7574 32.3641 11.7738 31.8073 12.059C31.462 12.2295 31.2073 12.4886 26.4162 17.4689C26.4162 17.4689 24.2537 19.7082 24.2278 19.7312C23.6581 20.259 23.6494 21.0131 24.2063 21.6623C24.7846 22.3345 25.7601 22.659 26.6536 22.4722C26.6536 22.4722 26.6191 22.5213 26.6105 22.5279C27.0507 22.4 27.8363 22.2525 29.2736 21.9935ZM20.2913 16.3804C20.136 13.6853 19.0698 1.68855 18.9446 1.13446C18.7634 0.629537 18.2454 0.27216 17.503 0.127898C15.2153 -0.30161 6.48338 1.55741 4.86475 2.82298C4.34248 3.23609 4.15256 3.74101 4.30795 4.19019C4.56261 4.58692 15.3837 17.5181 15.3837 17.5181C16.9807 19.4886 18.2886 19.1804 18.7159 19.0787C19.1389 18.9836 20.4381 18.6754 20.2913 16.3804Z" fill="#FF1919"/>
                                    </g>
                                    <defs>
                                      <clipPath id="clip0_30847_81922">
                                        <rect width="40" height="40" fill="white"/>
                                      </clipPath>
                                    </defs>
                                </svg>
                            </a>
                            <h4 class="text-white text-lg font-semibold leading-8">Yelp</h4>
                            <p class="text-gray-50 text-sm font-normal leading-snug">Yelp is a popular online platform and mobile app that helps users discover and review.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

HTML Copy

App logos Integration

Below example shows only logos of different applications which you can integrate inside your project.

Preview
Code

Figma File

Integration Section with badge and CTA

Following Tailwind integration section shows badge at the top, logo of applications and CTA Button to perform any action.

Preview
Code

Figma File

Integration as double testimonial

Below example of integration shows double slider of application logos with their names.

Preview
Code

Figma File

Slider App integration

Following integration example shows slider of software logos and names combine in card.

Preview
Code

Figma File

Side by side integration

This example of integration shows application logos and names inside card in side by side manner.

Preview
Code

Figma File

Vertical App integration

Following example shows integration cards in Vertical layout.

Preview
Code

Figma File

Circular Integration

Below Tailwind CSS App integration exmaple shows application logos in circular way beside heading, description and CTA.

Preview
Code

Figma File

Integration card with background

This example of integration shows list of application integration cards with background color.

Preview
Code

Figma File

Scattered application icons

Below example shows application icons are scattered all over the sections with heading, description and CTA on center.

Preview
Code

Figma File

Integration list with description

Following example of app integration shows integration cards list and description of workflow integration.

Preview
Code

Figma File

Integration Grid

This example shows integration card in grid layout beside heading, description and CTA.

Preview
Code

Figma File

Vertical Integration Carousel

Following example shows Vertical Carousel of application integration which provides modern look of your project.

Preview
Code

Figma File

Two column Integration card

Below application integration example shows list of application logos and their name in two column grid beside heading, description and CTA.

Preview
Code

Figma File

Hexagon integration cards

Following example of application integration shows application icons and name in hexagon layout beside heading, description and CTA.

Preview
Code

Figma File

Vertical Integrations list

Below Example shows integration icons list in Vertical layout with title, description and CTA.

Preview
Code

Figma File

Four column Integration card

Following integration example shows list of application logos and their name in four column card grid.

Preview
Code

Figma File

Integrations card with horizontal layout

This example shows integration card in horizontal layout which includes logos of different applications and some details.

Preview
Code

Figma File

Three column Integration Card with CTA

Following example shows integration cards in a three column grid with CTA and and application logos with their names.

Preview
Code

Figma File