Download Components

<section class="relative lg:py-40 bg-gray-900 overflow-hidden">
  <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">
          <a class="inline-block p-1" href="#">
            <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>
          </a>
        </div>
        <div class="w-auto px-14">
          <img class="block" src="suncealand-assets/images/phone-frame-light.png" alt="">
        </div>
        <div class="flex-shrink-0 w-auto">
          <a class="inline-block p-1" href="#">
            <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>
          </a>
        </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&apos;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">
          <a class="inline-block p-1" href="#">
            <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>
          </a>
        </div>
        <div class="w-auto px-6">
          <img class="block" src="suncealand-assets/images/phone-frame-light.png" alt="">
        </div>
        <div class="flex-shrink-0 w-auto">
          <a class="inline-block p-1" href="#">
            <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>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

Redirecting to PayPal

Flex

Zospace

Artemis

Yofte

Download Components

Framework

UI Library

Components

Component #1

Not sure which UI library

is best for your template?

Component #2

HTML for this component is available only to registered users.

Component #3

HTML for this component is available only to registered users.

Component #4

HTML for this component is available only to registered users.

Component #5

HTML for this component is available only to registered users.

Component #6

HTML for this component is available only to registered users.

Component #7

HTML for this component is available only to registered users.

Component #8

HTML for this component is available only to registered users.

Component #9

HTML for this component is available only to registered users.

Component #10

HTML for this component is available only to registered users.

Download Components by Shuffle

The easiest way to create beautiful templates

How many people?

monthly

annual

lifetime

Create an account

50+ Beautiful UI libraries

Flexible solution

Constant update

No limits

Plugin support

Products

UI Components

Company

Legal