Tailwind Downloads Components (25)

Framework

UI Library

Components

Downloads from Casper

Tailwind CSS

Casper

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

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Casper App Promotional Hero with Store Badges and Phone Mockup

A mobile app marketing hero section with a gradient background, a bold headline, short supporting text, Google Play and App Store download badges, and a tilted phone mockup displaying an illustrated 3D robot character. The outer component is a promotional section centered on app download calls to action.

Downloads from Mirga

Tailwind CSS

Mirga

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

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Hero section promoting digital learning app with phone mockup

A light-background marketing hero with a large two-line headline, a coral underline accent, a supporting subheading, and a black Download app button. A phone device mockup with a placeholder app screen sits below the text, centered horizontally.

Downloads from FilyTreck

Tailwind CSS

FilyTreck

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

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Dark mobile app promotion section with device mockups

A dark promotional section titled 'Get mobile app' with descriptive text and a blue 'Download app' button on the left, and two overlapping phone mockups displaying the FilyTreck app on the right. The layout is a split-screen marketing block designed to encourage app downloads.

Downloads from asitrastudio

Tailwind CSS

asitrastudio

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

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Mobile App Promo Hero with Download Badges and Phone Mockup

A light promotional hero section with a large left-aligned heading, supporting paragraph, and App Store and Google Play download badges, paired with a tilted phone mockup on the right showing a crypto send-to-friend screen. The layout is a split screen that promotes a mobile app.

Downloads from Suncealand

Tailwind CSS

Suncealand

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

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Split-screen app download promo with phone mockup

A marketing section with a dark left panel containing a pill badge, serif heading, supporting copy, checkmark feature list, and a DOWNLOAD button, paired with a light beige right panel showing a phone mockup of an app interface. The layout places text content beside a device screenshot to promote the application.