Logo Cloud blocks

Sponsors Logo Cloud

The first thing people see when they visit your website, a hero section is the area that immediately shows up on the screen under your logo and menu.

Customize

sm

md

lg

xl

2xl

sponsors.html

                                    
                                        <div class="relative flex flex-col items-center overflow-hidden py-20 md:py-40 bg-gray-100 dark:bg-gray-800">
  <div class="container relative z-[1] m-auto px-6 md:px-12">
    <div class="m-auto text-center md:w-8/12 lg:w-6/12">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white md:text-4xl">
        Our heroes <span class="text-primary">contribute</span> to the development of tailus
      </h2>
    </div>
    <div class="m-auto mt-16 md:w-11/12 lg:w-8/12 xl:w-7/12">
      <div class="flex flex-wrap justify-center gap-6">
        <div
          class="group rounded-xl border border-gray-200 dark:border-gray-600 bg-white bg-opacity-5 py-2 px-4 hover:bg-opacity-10"
        >
          <img
            src="images/clients/airbnb.svg"
            class="contrast-0 transition group-hover:contrast-100"
            loading="lazy"
            alt="logo airbnb"
          />
        </div>
        <div
          class="group rounded-xl border border-gray-200 dark:border-gray-600 bg-white bg-opacity-5 py-2 px-4 hover:bg-opacity-10"
        >
          <img
            src="images/clients/microsoft.svg"
            class="contrast-0 transition group-hover:contrast-100"
            loading="lazy"
            alt="logo microsoft"
          />
        </div>
        <div
          class="group rounded-xl border border-gray-200 dark:border-gray-600 bg-white bg-opacity-5 py-2 px-4 hover:bg-opacity-10"
        >
          <img
            src="images/clients/ge.svg"
            class="contrast-0 transition group-hover:contrast-100"
            loading="lazy"
            alt="logo ge"
          />
        </div>
        <div
          class="group rounded-xl border border-gray-200 dark:border-gray-600 bg-white bg-opacity-5 py-2 px-4 hover:bg-opacity-10"
        >
          <img
            src="images/clients/bissell.svg"
            class="contrast-0 transition group-hover:contrast-100"
            loading="lazy"
            alt="logo bissell"
          />
        </div>
        <div
          class="group rounded-xl border border-gray-200 dark:border-gray-600 bg-white bg-opacity-5 py-2 px-4 hover:bg-opacity-10"
        >
          <img
            src="images/clients/bissell.svg"
            class="contrast-0 transition group-hover:contrast-100"
            loading="lazy"
            alt="logo bissell"
          />
        </div>
        <div
          class="group rounded-xl border border-gray-200 dark:border-gray-600 bg-white bg-opacity-5 py-2 px-4 hover:bg-opacity-10"
        >
          <img
            src="images/clients/automatic.svg"
            class="contrast-0 transition group-hover:contrast-100"
            loading="lazy"
            alt="logo automatic"
          />
        </div>
      </div>
    </div>
  </div>
</div>

Company-site Logo Cloud

The first thing people see when they visit your website, a hero section is the area that immediately shows up on the screen under your logo and menu.

Customize

sm

md

lg

xl

2xl

company-site.html

                                    
                                        <div class="py-16 bg-gray-100">
    <div class="container m-auto px-6 space-y-8 md:px-12 lg:px-56">
        <div class="m-auto text-center lg:w-7/12">
            <h2 class="text-2xl text-gray-700 font-bold md:text-4xl">Your favorite companies are our partners.</h2>
        </div>
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4">
            <div class="p-4">
                <img src="images/clients/airbnb.svg" class="" alt="">
            </div>
            <div class="p-4">
                <img src="images/clients/client-8.png" class="w-32 " alt="">
            </div>
            <div class="p-4">
                <img src="images/clients/client-3.png" class="w-32 " alt="">
            </div>
            <div class="p-4">
                <img src="images/clients/client-1.png" class="w-32 " alt="">
            </div>
            <div class="p-4">
                <img src="images/clients/tailus.svg" class="w-32" alt="">
            </div>
            <div class="p-4">
                <img src="images/clients/microsoft.svg" class="w-32" alt="">
            </div>
            <div class="p-4">
                <img src="images/clients/coty.svg" class="w-20" alt="">
            </div>
            <div class="p-4">
                <img src="images/clients/client-4.png" class="w-24" alt="">
            </div>
        </div>
    </div>
</div>

Startup-site Logo Cloud

The first thing people see when they visit your website, a hero section is the area that immediately shows up on the screen under your logo and menu.

Customize

sm

md

lg

xl

2xl

startup-site.html

                                    
                                        <div class="bg-gray-100 dark:bg-gray-800 py-8 lg:py-2">
  <div class="container m-auto space-y-8 px-6 text-gray-500 md:px-12 lg:px-20">
    <div class="items-center gap-12 lg:flex">
      <div class="lg:w-2/6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Our clients</h2>
        <p class="text-gray-600 dark:text-gray-300">We have already worked for +20 clients</p>
      </div>
      <div class="mt-8 lg:mt-0 lg:w-4/6">
        <div class="-mx-6 flex flex-wrap gap-6 px-6 md:justify-between lg:gap-2">
          <div class="flex items-center rounded-xl lg:p-4 lg:hover:bg-white">
            <img src="./images/clients/airbnb.svg" class="w-24 lg:w-28" alt="" />
          </div>

          <div class="flex items-center rounded-xl lg:p-4 lg:hover:bg-white">
            <img src="./images/clients/ge.svg" class="w-10" alt="" />
          </div>

          <div class="flex items-center rounded-xl lg:p-4 lg:hover:bg-white">
            <img src="./images/clients/coty.svg" class="w-28" alt="" />
          </div>

          <div class="flex items-center rounded-xl lg:p-4 lg:hover:bg-white">
            <img src="./images/clients/tailus.svg" class="w-32" alt="" />
          </div>

          <div class="flex items-center rounded-xl lg:p-4 lg:hover:bg-white">
            <img src="./images/clients/microsoft.svg" class="w-32" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Application-site Logo Cloud

The first thing people see when they visit your website, a hero section is the area that immediately shows up on the screen under your logo and menu.

Customize

sm

md

lg

xl

2xl

application-site.html

                                    
                                        <div class="bg-gray-50 dark:bg-gray-800 py-16">
  <div class="container m-auto space-y-8 px-6 text-gray-500 md:px-12 lg:px-40">
    <div class="mb-8">
      <h6 class="text-lg² text-center font-bold text-cyan-500">Trusted by +5 giants</h6>
    </div>
    <div class="scrollbar-transparent overflow-x-auto lg:overflow-hidden">
      <div class="-mx-6 flex space-x-6 px-6 md:space-x-12 lg:justify-between">
        <img
          src="images/clients/airbnb.svg"
          loading="lazy"
          class="grayscale transition hover:grayscale-0"
          alt="logo"
        />
        <img
          src="images/clients/tailus.svg"
          loading="lazy"
          class="w-36 grayscale transition hover:grayscale-0"
          alt="logo"
        />
        <img
          src="images/clients/ge.svg"
          loading="lazy"
          class="grayscale transition hover:grayscale-0"
          alt="logo"
        />
        <img
          src="images/clients/coty.svg"
          loading="lazy"
          class="grayscale transition hover:grayscale-0"
          alt="logo"
        />
        <img
          src="images/clients/microsoft.svg"
          loading="lazy"
          class="grayscale transition hover:grayscale-0"
          alt="logo"
        />
      </div>
    </div>
  </div>
</div>