Sections

Section components created with Tailwind CSS. These responsive, SEO-optimized layouts are perfect for building content blocks, feature sections, and landing page segments for marketing websites and web applications.

0/4 Dark Mode (Request)Updated: N/A

Content with image, 1/2 grid

markmead

<section>
  <div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 md:items-center md:gap-8">
      <div>
        <div class="max-w-prose md:max-w-none">
          <h2 class="text-2xl font-semibold text-gray-900 sm:text-3xl">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
          </h2>

          <p class="mt-4 text-pretty text-gray-700">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur doloremque saepe
            architecto maiores repudiandae amet perferendis repellendus, reprehenderit voluptas
            sequi.
          </p>
        </div>
      </div>

      <div>
        <img
          src="https://images.unsplash.com/photo-1731690415686-e68f78e2b5bd?auto=format&fit=crop&q=80&w=1160"
          class="rounded"
          alt=""
        />
      </div>
    </div>
  </div>
</section>

Content with image, 2/3 grid

markmead

<section>
  <div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 gap-4 md:grid-cols-4 md:items-center md:gap-8">
      <div class="md:col-span-1">
        <div class="max-w-prose md:max-w-none">
          <h2 class="text-2xl font-semibold text-gray-900 sm:text-3xl">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
          </h2>

          <p class="mt-4 text-pretty text-gray-700">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur doloremque saepe
            architecto maiores repudiandae amet perferendis repellendus, reprehenderit voluptas
            sequi.
          </p>
        </div>
      </div>

      <div class="md:col-span-3">
        <img
          src="https://images.unsplash.com/photo-1731690415686-e68f78e2b5bd?auto=format&fit=crop&q=80&w=1160"
          class="rounded"
          alt=""
        />
      </div>
    </div>
  </div>
</section>

Content with image, 3/2 grid

markmead

<section>
  <div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 gap-4 md:grid-cols-4 md:items-center md:gap-8">
      <div class="md:col-span-3">
        <img
          src="https://images.unsplash.com/photo-1731690415686-e68f78e2b5bd?auto=format&fit=crop&q=80&w=1160"
          class="rounded"
          alt=""
        />
      </div>

      <div class="md:col-span-1">
        <div class="max-w-prose md:max-w-none">
          <h2 class="text-2xl font-semibold text-gray-900 sm:text-3xl">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
          </h2>

          <p class="mt-4 text-pretty text-gray-700">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur doloremque saepe
            architecto maiores repudiandae amet perferendis repellendus, reprehenderit voluptas
            sequi.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

Content with image, vertical split

markmead

<section>
  <div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
    <div class="space-y-4 md:space-y-8">
      <div class="max-w-prose">
        <h2 class="text-2xl font-semibold text-gray-900 sm:text-3xl">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </h2>

        <p class="mt-4 text-pretty text-gray-700">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur doloremque saepe
          architecto maiores repudiandae amet perferendis repellendus, reprehenderit voluptas
          sequi.
        </p>
      </div>

      <img
        src="https://images.unsplash.com/photo-1731690415686-e68f78e2b5bd?auto=format&fit=crop&q=80&w=1160"
        class="rounded"
        alt=""
      />
    </div>
  </div>
</section>

View all marketing components