Tailwind CSS Downloads Components

<section class="relative pt-20 pb-32 md:pb-20 lg:pb-24 lg:pt-32 bg-body overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative max-w-lg md:max-w-8xl mx-auto">
      <img class="hidden md:block absolute bottom-0 right-0 -mb-16 lg:mr-12 xl:mr-32 z-10 max-w-xs lg:max-w-none" src="casper-assets/download/phone.png" alt="">
      <div class="relative px-8 lg:px-20 xl:px-32 pb-112 pt-24 md:py-32 rounded-3xl overflow-hidden">
        <img class="absolute top-0 left-0 w-full h-full object-cover" src="casper-assets/download/bg-gradient.png" alt="">
        <div class="relative max-w-sm lg:max-w-lg mx-auto md:mx-0">
          <h2 class="font-heading text-4xl xs:text-5xl lg:text-6xl font-medium tracking-tight mb-8">Get Benefit with Casper App</h2>
          <p class="max-w-md text-lg text-gray-900 tracking-tight mb-16">Nunc et tellus non erat accumsan aliquam eget non mi. Integer fringilla pellentesque finibus.</p>
          <div class="flex items-center flex-row">
            <a class="inline-block h-16 xs:h-12 mr-3" href="#">
              <img class="block h-full object-contain" src="casper-assets/download/button1.png" alt="">
            </a>
            <a class="inline-block h-16 xs:h-12" href="#">
              <img class="block h-full object-contain" src="casper-assets/download/button2.png" alt="">
            </a>
          </div>
        </div>
      </div>
      <img class="md:hidden absolute bottom-0 left-1/2 -mb-20 transform -translate-x-1/2 block max-w-xs" src="casper-assets/download/phone.png" alt="">
    </div>
  </div>
</section>

<section class="bg-neutral-50 pt-12 md:pt-24">
  <div class="container mx-auto px-4">
    <h1 class="text-6xl sm:text-9xl xl:text-11xl font-semibold text-neutral-800 max-w-sm sm:max-w-6xl relative mb-12 tracking-tight font-heading">
      <span class="mr-3">Join the community, and</span>
      <span class="relative inline-block">
        <span class="relative z-10">change the future.</span>
        <span class="absolute -bottom-2 left-0 h-2.5 w-full bg-orange-500 rounded-full"></span>
      </span>
    </h1>
    <p class="text-2xl md:text-4xl font-semibold mb-16 text-neutral-600 tracking-tight">Shape Tomorrow with Digital Learning Today!</p>
    <a class="inline-flex justify-center items-center text-center h-20 p-5 font-semibold tracking-tight text-2xl text-white bg-neutral-900 hover:bg-neutral-800 focus:bg-neutral-800 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">Download app</a>
    <img class="w-full h-full object-cover" style="height: 515px;" src="mirga-assets/images/download/phone-picture.png" alt="">
  </div>
</section>

<section class="py-24 md:py-36" style="background: url('fily-assets/gradients/gradient-header.jpg'); background-size: cover;">
    <div class="container mx-auto px-4">
        <div class="pt-20 xl:pt-32 bg-black overflow-hidden rounded-3xl">
            <div class="flex flex-wrap">
                <div class="w-full lg:w-1/3 xl:w-1/2 mb-16 md:mb-0">
                    <div class="px-10 md:pb-16 max-w-lg mx-auto">
                        <h2 class="mb-6 font-heading text-3xl md:text-4xl text-white">Get mobile app</h2>
                        <p class="mb-14 text-xl text-gray-500 font-medium leading-relaxed">Nullam dignissim diam sed velit molestie, at auctor lectus finibus. Phasellus risus nisl, cursus dictum orci a, fermentum finibus tellus.</p>
                        <a href="#" class="inline-flex justify-center items-center text-center h-18 py-6 px-10 font-semibold text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-full focus:ring-4 focus:ring-blue-200 transition duration-200">Download app</a>
                    </div>
                </div>
                <div class="w-full lg:w-2/3 xl:w-1/2 self-end">
                    <img class="mx-auto xl:ml-0 object-cover transform hover:scale-105 transition duration-500" style="height: 476px;" src="fily-assets/faq/iphone.png" alt="">
                </div>
            </div>
        </div>
    </div>
</section>

<section class="relative bg-coolGray-50 overflow-hidden">
  <div class="relative container mx-auto px-4">
    <img class="hidden md:block absolute bottom-0 right-0 -mr-30 lg:-mr-40 xl:-mr-0 w-10/12 lg:w-auto" src="asitrastudio-assets/download/phone-right-xl.png" alt="">
    <div class="relative">
      <div class="max-w-sm md:max-w-md lg:max-w-lg mx-auto md:mx-0 py-12 md:py-40">
        <h2 class="font-heading text-5xl sm:text-6xl lg:text-7xl tracking-tight mb-8">Get our mobile app to make the process faster</h2>
        <p class="max-w-sm lg:max-w-md text-xl mb-12">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
        <div class="flex max-w-sm">
          <a class="inline-block mr-6" href="#">
            <img src="asitrastudio-assets/download/app-store.svg" alt="">
          </a>
          <a class="inline-block" href="#">
            <img src="asitrastudio-assets/download/google.svg" alt="">
          </a>
        </div>
      </div>
      <img class="block md:hidden w-full" src="asitrastudio-assets/download/phone-right-xl.png" alt="">
    </div>
  </div>
</section>

<section class="relative lg:py-40 bg-gray-900 overflow-hidden" x-data="{ activeSlide: 1, slideCount: 3 }">
  <div class="hidden lg:flex items-center absolute top-0 right-0 w-1/2 px-4 h-full bg-yellowGray-500">
    <div class="max-w-2xl pl-8 xl:pl-20">
      <div class="flex items-center justify-center">
        <div class="flex-shrink-0 w-auto">
          <button x-on:click="activeSlide = activeSlide > 1 ? activeSlide - 1 : slideCount" class="inline-block relative z-50 p-1">
            <svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M7.99906 16L9.41406 14.585L3.82906 9L2.74902 8L3.82906 7L9.41406 1.415L7.99906 8.29971e-07L-0.000937716 8L7.99906 16Z" fill="#04082F"></path>
            </svg>
          </button>
        </div>
        <div class="w-auto px-14">
            <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">
                        <img class="block" src="suncealand-assets/images/phone-frame-light.png" alt="">
                    </div>
                    <div class="inline-block w-full whitespace-normal">
                        <img class="block" src="suncealand-assets/images/phone-frame-light.png" alt="">
                    </div>
                    <div class="inline-block w-full whitespace-normal">
                        <img class="block" src="suncealand-assets/images/phone-frame-light.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="flex-shrink-0 w-auto">
          <button x-on:click="activeSlide = activeSlide < slideCount ? activeSlide + 1 : 1" class="inline-block relative z-50 p-1">
            <svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2.00094 0L0.585938 1.415L6.17094 7L7.25098 8L6.17094 9L0.585938 14.585L2.00094 16L10.0009 8L2.00094 0Z" fill="#04082F"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="relative container px-4 mx-auto">
    <div class="max-w-md xl:max-w-xl mx-auto lg:mx-0 py-20 lg:py-0">
      <div class="inline-flex px-5 py-2 items-center mb-8 bg-white rounded-full">
        <span class="block w-2 h-2 mr-2 rounded-full bg-blue-500"></span>
        <span class="uppercase text-sm font-medium tracking-tight">APPLICATION</span>
      </div>
      <h1 class="text-5xl xl:text-7xl 2xl:text-8xl font-heading font-semibold text-white mb-10">Download our application</h1>
      <p class="max-w-md text-lg text-gray-200 mb-14">Record your audio and upload it to Suncealand. We'll help you distribute your podcast!</p>
      <ul class="mb-18">
        <li class="flex mb-4 items-center">
          <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9492" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9492 9.63605)" fill="white"></rect><rect x="7.62891" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.62891 17.0431)" fill="white"></rect></svg>
          <span class="ml-8 text-lg text-gray-200">Quisque euismod</span>
        </li>
        <li class="flex items-center">
          <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9492" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9492 9.63605)" fill="white"></rect><rect x="7.62891" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.62891 17.0431)" fill="white"></rect></svg>
          <span class="ml-8 text-lg text-gray-200">Nunc iaculis quis risus at tristique</span>
        </li>
      </ul>
      <a class="group relative inline-block h-16 w-full sm:w-52 bg-white rounded" href="#">
        <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
          <div class="flex h-full w-full items-center justify-center bg-gray-900 border-2 border-white rounded">
            <span class="text-base font-semibold text-white uppercase">Download</span>
          </div>
        </div>
      </a>
    </div>
  </div>
  <div class="lg:hidden py-20 px-4 bg-yellowGray-500">
    <div class="px-10">
      <div class="flex items-center justify-center">
        <div class="flex-shrink-0 w-auto">
          <button x-on:click="activeSlide = activeSlide > 1 ? activeSlide - 1 : slideCount" class="inline-block relative z-50 p-1">
            <svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M7.99906 16L9.41406 14.585L3.82906 9L2.74902 8L3.82906 7L9.41406 1.415L7.99906 8.29971e-07L-0.000937716 8L7.99906 16Z" fill="#04082F"></path>
            </svg>
          </button>
        </div>
        <div class="w-auto px-6">
            <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">
                        <img class="block" src="suncealand-assets/images/phone-frame-light.png" alt="">
                    </div>
                    <div class="inline-block w-full whitespace-normal">
                        <img class="block" src="suncealand-assets/images/phone-frame-light.png" alt="">
                    </div>
                    <div class="inline-block w-full whitespace-normal">
                        <img class="block" src="suncealand-assets/images/phone-frame-light.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="flex-shrink-0 w-auto">
          <button x-on:click="activeSlide = activeSlide < slideCount ? activeSlide + 1 : 1" class="inline-block relative z-50 p-1">
            <svg width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2.00094 0L0.585938 1.415L6.17094 7L7.25098 8L6.17094 9L0.585938 14.585L2.00094 16L10.0009 8L2.00094 0Z" fill="#04082F"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</section>