Centered On Dark Panel

With Responsive Design

CTA Section in Tailwind CSS

                    
                        
                      <div class="bg-white">
      <div class="mx-auto max-w-7xl py-24 sm:px-6 sm:py-32 lg:px-8">
        <div
          class="relative isolate overflow-hidden bg-gray-900 px-6 pt-16 py-16 shadow-2xl sm:rounded-3xl sm:px-16 md:pt-24 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0"
        >
          <svg
            viewBox="0 0 1024 1024"
            class="absolute top-1/2 left-1/2 -z-10 size-[64rem] -translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] sm:left-full sm:-ml-80 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2 lg:translate-y-0"
            aria-hidden="true"
          >
            <circle
              cx="512"
              cy="512"
              r="512"
              fill="url(#759c1415-0410-454c-8f7c-9a820de03641)"
              fill-opacity="0.7"
            />
            <defs>
              <radialGradient id="759c1415-0410-454c-8f7c-9a820de03641">
                <stop stop-color="#00bcff" />
                <stop offset="1" stop-color="#0031ff" />
              </radialGradient>
            </defs>
          </svg>
          <div
            class="mx-auto max-w-2xl items-center justify-center text-center lg:flex-auto lg:py-32"
          >
            <h2
              class="text-3xl text-center font-semibold tracking-tight text-balance text-white sm:text-5xl"
            >
              Boost your productivity today.
            </h2>
            <p class="mt-6 text-lg/8 text-pretty text-gray-300 text-center">
              Ac euismod vel sit maecenas id pellentesque eu sed consectetur.
              Malesuada adipiscing sagittis vel nulla.
            </p>
            <div
              class="mt-10 flex items-center justify-center gap-x-6 lg:justify-center"
            >
              <a
                href="#"
                class="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-xs hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
                >Get started</a
              >
              <a href="#" class="text-sm/6 font-semibold text-white"
                >Learn more <span aria-hidden="true">→</span></a
              >
            </div>
          </div>
        </div>
      </div>
    </div>

Dark Panel With App Screen Shot

With Responsive Design

CTA Section in Tailwind CSS

                    
                        
                      <div class="bg-white">
      <div class="mx-auto max-w-7xl py-24 sm:px-6 sm:py-32 lg:px-8">
        <div
          class="relative isolate overflow-hidden bg-gray-900 px-6 pt-16 shadow-2xl sm:rounded-3xl sm:px-16 md:pt-24 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0"
        >
          <svg
            viewBox="0 0 1024 1024"
            class="absolute top-1/2 left-1/2 -z-10 size-[64rem] -translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] sm:left-full sm:-ml-80 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2 lg:translate-y-0"
            aria-hidden="true"
          >
            <circle
              cx="512"
              cy="512"
              r="512"
              fill="url(#759c1415-0410-454c-8f7c-9a820de03641)"
              fill-opacity="0.7"
            />
            <defs>
              <radialGradient id="759c1415-0410-454c-8f7c-9a820de03641">
                <stop stop-color="#7775D6" />
                <stop offset="1" stop-color="#E935C1" />
              </radialGradient>
            </defs>
          </svg>
          <div
            class="mx-auto max-w-md text-center lg:mx-0 lg:flex-auto lg:py-32 lg:text-left"
          >
            <h2
              class="text-3xl font-semibold tracking-tight text-balance text-white sm:text-4xl"
            >
              Boost your productivity. Start using our app today.
            </h2>
            <p class="mt-6 text-lg/8 text-pretty text-gray-300">
              Ac euismod vel sit maecenas id pellentesque eu sed consectetur.
              Malesuada adipiscing sagittis vel nulla.
            </p>
            <div
              class="mt-10 flex items-center justify-center gap-x-6 lg:justify-start"
            >
              <a
                href="#"
                class="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-xs hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
                >Get started</a
              >
              <a href="#" class="text-sm/6 font-semibold text-white"
                >Learn more <span aria-hidden="true">→</span></a
              >
            </div>
          </div>
          <div class="relative mt-16 h-80 lg:mt-8">
            <img
              class="absolute top-0 left-0 w-[57rem] max-w-none rounded-md bg-white/5 ring-1 ring-white/10"
              src="https://tailwindcss.com/plus-assets/img/component-images/dark-project-app-screenshot.png"
              alt="App screenshot"
              width="1824"
              height="1080"
            />
          </div>
        </div>
      </div>
    </div>

Simple Centered

With Responsive Design

CTA Section in Tailwind CSS

                    
                        
                      <div class="bg-white">
      <div class="mx-auto max-w-7xl py-24 sm:px-6 sm:py-32 lg:px-8">
        <div
          class="relative px-6 pt-16 py-16 shadow-2xl sm:rounded-3xl sm:px-16 md:pt-24 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0"
        >
          <div
            class="mx-auto max-w-2xl items-center justify-center text-center lg:flex-auto lg:py-32"
          >
            <h2
              class="text-3xl text-center font-semibold tracking-tight text-balance text-gray-900 sm:text-5xl"
            >
              Boost your productivity today.
            </h2>
            <p class="mt-6 text-lg/8 text-pretty text-gray-500 text-center">
              Ac euismod vel sit maecenas id pellentesque eu sed consectetur.
              Malesuada adipiscing sagittis vel nulla.
            </p>
            <div
              class="mt-10 flex items-center justify-center gap-x-6 lg:justify-center"
            >
              <a
                href="#"
                class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-gray-100 shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
                >Get started</a
              >
              <a href="#" class="text-sm/6 font-semibold text-gray-900"
                >Learn more <span aria-hidden="true">→</span></a
              >
            </div>
          </div>
        </div>
      </div>
    </div>

Simple Justified

With Responsive Design

CTA Section in Tailwind CSS

                    
                        
                      <div class="bg-white">
      <div class="mx-auto max-w-7xl py-24 sm:px-6 sm:py-32 lg:px-8">
        <div
          class="relative px-6 pt-16 py-16 md:border border-indigo-300 sm:rounded-3xl sm:px-16 md:pt-24 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0"
        >
          <div class="mx-auto max-w-2xl lg:flex-auto lg:py-32">
            <h2
              class="text-3xl font-semibold tracking-tight text-balance text-gray-900 sm:text-5xl"
            >
              Ready to dive in? <br />
              Start your free trial today.
            </h2>
          </div>
          <div
            class="mt-10 md:mt-0 flex items-center md:justify-center gap-x-6 lg:justify-center"
          >
            <a
              href="#"
              class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-gray-100 shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
              >Get started</a
            >
            <a href="#" class="text-sm/6 font-semibold text-gray-900"
              >Learn more <span aria-hidden="true">→</span></a
            >
          </div>
        </div>
      </div>
    </div>

Simple Stacked

With Responsive Design

CTA Section in Tailwind CSS

                    
                        
                      <div class="bg-white">
      <div class="mx-auto max-w-7xl py-24 sm:px-6 sm:py-32 lg:px-8">
        <div
          class="px-6 pt-16 border border-gray-200 sm:rounded-3xl sm:px-16 md:pt-24 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0"
        >
          <div
            class="mx-auto max-w-2/3 text-center lg:mx-0 lg:flex-auto lg:py-32 lg:text-left"
          >
            <h2
              class="text-3xl font-semibold tracking-tight text-balance text-gray-900 sm:text-4xl"
            >
              Boost your productivity. Start using our app today.
            </h2>
            <p class="mt-6 text-lg/8 text-pretty text-gray-600">
              Ac euismod vel sit maecenas id pellentesque eu sed consectetur.
              Malesuada adipiscing sagittis vel nulla.
            </p>
            <div
              class="mt-10 flex items-center justify-center gap-x-6 lg:justify-start"
            >
              <a
                href="#"
                class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
                >Get started</a
              >
              <a href="#" class="text-sm/6 font-semibold text-gray-900"
                >Learn more <span aria-hidden="true">→</span></a
              >
            </div>
          </div>
          <div class="flex items-center justify-center h-screen">
            <img
              class="w-3/6 p-10 md:w-3/6 md:p-0"
              src="img/gifted.png"
              alt="pro"
            />
          </div>
        </div>
      </div>
    </div>

Split With image

With Responsive Design

CTA Section in Tailwind CSS

                    
                        
                      <div>
      <div class="grid grid-cols-1 md:grid-cols-2 bg-gray-900">
        <div class="">
          <img
            class="md:h-screen w-full object-cover"
            src="https://images.unsplash.com/photo-1525130413817-d45c1d127c42?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1920&q=60&blend=6366F1&sat=-100&blend-mode=multiply"
            alt="image"
          />
        </div>
        <div
          class="flex p-10 items-center justify-center mt-10 md:mt-0 md:min-h-screen bg-gray-900"
        >
          <div class="flex flex-col max-w-3xl w-full text-left">
            <p class="text-sm font-semibold text-indigo-400">
              Award winning support
            </p>
            <h2
              class="mt-4 text-3xl font-bold tracking-tight text-gray-100 sm:text-6xl"
            >
              We’re here to help
            </h2>
            <p class="mt-6 text-lg text-gray-300">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et,
              egestas tempus tellus etiam sed. Quam a scelerisque amet
              ullamcorper eu enim et fermentum, augue. Aliquet amet volutpat
              quisque ut interdum tincidunt duis.
            </p>
            <div class="mt-10">
              <a
                href="#"
                class="inline-block rounded-md font-bold bg-slate-600 px-3.5 py-2.5 text-sm text-gray-100 shadow-xs"
              >
                Visit the help center
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

Two Columns with photo on dark panel

CTA Section in Tailwind CSS

                    
                        
                      <div
      class="mt-20 bg-gradient-to-br from-[#000000] to-[#012052] text-white rounded-3xl p-8 sm:p-12 shadow-xl max-w-7xl mx-auto"
    >
      <div class="flex flex-col md:flex-row items-center gap-10">
        <!-- Image Section -->
        <div class="w-full h-[400px] md:w-1/3">
          <img
            src="https://images.unsplash.com/photo-1519338381761-c7523edc1f46?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=80"
            alt="Team at beach"
            class="rounded-2xl object-cover w-full h-full"
          />
        </div>

        <!-- Content Section -->
        <div class="w-full md:w-2/3">
          <h2 class="text-5xl font-bold mb-4">Join our team</h2>
          <p class="text-lg text-gray-300 mb-6">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus
            magnam voluptatum cupiditate veritatis in accusamus quisquam.
          </p>

          <!-- Benefits Grid -->
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
            <div class="flex items-center gap-2">
              <span class="text-green-400">✔</span> Competitive salaries
            </div>
            <div class="flex items-center gap-2">
              <span class="text-green-400">✔</span> Flexible work hours
            </div>
            <div class="flex items-center gap-2">
              <span class="text-green-400">✔</span> 30 days of paid vacation
            </div>
            <div class="flex items-center gap-2">
              <span class="text-green-400">✔</span> Annual team retreats
            </div>
            <div class="flex items-center gap-2">
              <span class="text-green-400">✔</span> Benefits for you and your
              family
            </div>
            <div class="flex items-center gap-2">
              <span class="text-green-400">✔</span> A great work environment
            </div>
          </div>

          <!-- Job Postings Link -->
          <div class="mt-6">
            <a href="#" class="text-blue-400 hover:underline"
              >See our job postings →</a
            >
          </div>
        </div>
      </div>
    </div>

With image titles

With Responsive Design

CTA Section in Tailwind CSS

                    
                        
                      <div class="bg-white py-16 px-6 sm:px-12 lg:px-24">
      <div
        class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"
      >
        <!-- Text Section -->
        <div>
          <h2 class="text-5xl font-bold text-gray-900 mb-4">Our people</h2>
          <p class="text-lg text-gray-600 mb-6">
            Quasi est quaerat. Sit molestiae et. Provident ad dolorem occaecati
            eos iste. Soluta rerum quidem minus ut molestiae velit error quod.
            Excepturi quidem expedita molestias quas.
          </p>
          <p class="text-base text-gray-500 mb-8">
            Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui
            lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat
            fugiat. Quasi aperiam sit non sit neque reprehenderit.
          </p>
          <a
            href="#"
            class="inline-block bg-indigo-600 text-white font-semibold px-6 py-3 rounded-lg hover:bg-indigo-700 transition"
          >
            Join our team →
          </a>
        </div>

        <!-- Image Collage -->
        <div class="grid grid-cols-1 gap-4">
          <img
            src="https://images.unsplash.com/photo-1670272502246-768d249768ca?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1152&q=80"
            alt="People 1"
            class="rounded-xl object-cover w-full h-full row-span-2"
          />
        </div>
      </div>
      <!-- Image Collage Section -->
      <div class="bg-white py-16 px-6 sm:px-12 hidden md:block">
        <div
          class="max-w-7xl mx-auto flex flex-col lg:flex-row gap-6 items-start"
        >
          <!-- Image 1 -->
          <div class="w-full lg:w-1/4 h-[500px] flex items-end">
            <img
              src="https://images.unsplash.com/photo-1605656816944-971cd5c1407f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=768&h=604&q=80"
              alt="Beach scene"
              class="rounded-xl object-cover w-full h-full max-h-[400px]"
            />
          </div>

          <!-- Image 2 -->
          <div class="w-full lg:w-2/3 h-[500px] flex items-end">
            <img
              src="https://images.unsplash.com/photo-1568992687947-868a62a9f521?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1152&h=842&q=80"
              alt="Team meeting"
              class="rounded-xl object-cover w-full"
            />
          </div>

          <!-- Image 3 -->
          <div class="w-full lg:w-1/3 h-[500px] flex">
            <img
              src="https://images.unsplash.com/photo-1612872087720-bb876e2e67d1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=768&h=604&q=80"
              alt="Volleyball game"
              class="rounded-xl object-cover w-full h-2/3 mt-5"
            />
          </div>
        </div>
      </div>
    </div>