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.
<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>
