Your free Tailwind CSS component of the day is here.

<!-- About Section: Company with Images -->
<div class="bg-white dark:bg-gray-950 dark:text-gray-100">
  <div
    class="container mx-auto flex flex-col gap-16 px-4 py-16 lg:px-8 lg:py-32 xl:max-w-7xl"
  >
    <!-- Heading -->
    <div class="text-center">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1"
        stroke="currentColor"
        class="mb-5 inline-block size-12 text-blue-600 dark:text-blue-400"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M14.25 9.75 16.5 12l-2.25 2.25m-4.5 0L7.5 12l2.25-2.25M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z"
        />
      </svg>
      <h2 class="text-4xl font-black dark:text-white">We are TechCode</h2>
      <p
        class="mx-auto mt-4 w-full max-w-3xl text-lg/relaxed font-medium text-gray-700 dark:text-gray-300"
      >
        A passionate team who are here to help you code and build your business
        using powerful tools. Let's build something amazing together.
      </p>
    </div>
    <!-- END Heading -->

    <!-- Images -->
    <div class="flex gap-2">
      <div>
        <img
          src="https://cdn.tailkit.com/media/placeholders/photo-gMsnXqILjp4-1280x800.jpg"
          alt="Team meating working on a project"
          class="aspect-16/10 w-full rounded-lg object-cover"
        />
      </div>
      <div>
        <img
          src="https://cdn.tailkit.com/media/placeholders/photo-c3tNiAb098I-600x800.jpg"
          alt="Corridor in the offices"
          class="aspect-3/4 w-full rounded-lg object-cover"
        />
      </div>
    </div>
    <!-- END Images -->

    <!-- Values -->
    <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
      <div
        class="rounded-xl bg-gray-50 p-6 sm:p-8 dark:bg-gray-800/25"
      >
        <div
          class="mb-4 text-4xl font-black text-gray-200 dark:text-gray-700"
        >
          01
        </div>
        <h3 class="text-lg font-bold">Passion</h3>
        <p
          class="mt-2.5 text-sm/relaxed text-gray-600 dark:text-gray-400"
        >
          We are passionate with our work and love crafting products that can
          make your life easier and help you succeed. We pay attention to small
          details and always aim for the best.
        </p>
      </div>
      <div
        class="rounded-xl bg-gray-50 p-6 sm:p-8 dark:bg-gray-800/25"
      >
        <div
          class="mb-4 text-4xl font-black text-gray-200 dark:text-gray-700"
        >
          02
        </div>
        <h3 class="text-lg font-bold">Commitment</h3>
        <p
          class="mt-2.5 text-sm/relaxed text-gray-600 dark:text-gray-400"
        >
          We are committed and stand by our projects. Our aim is to improve them
          in every update and offer the most full-featured packages with the
          smallest possible footprint.
        </p>
      </div>
      <div
        class="rounded-xl bg-gray-50 p-6 sm:p-8 dark:bg-gray-800/25"
      >
        <div
          class="mb-4 text-4xl font-black text-gray-200 dark:text-gray-700"
        >
          03
        </div>
        <h3 class="text-lg font-bold">Less is More</h3>
        <p
          class="mt-2.5 text-sm/relaxed text-gray-600 dark:text-gray-400"
        >
          Design should be invisible and enhance the user experience, not get in
          the way. This gives room for your content to breathe and attract your
          users' attention.
        </p>
      </div>
    </div>
    <!-- END Values -->
  </div>
</div>
<!-- END About Section: Company with Images -->