nextjs-tailwindcss-headlessUI-project/app/components/bigImg/page.tsx

"use client";

import Image from "next/image";

export default function Component() {
  return (
    <div className="w-full bg-linear-gradient">
      <div
        className="flex justify-between items-end m-auto max-w-7xl h-20 px-3   /* small */
                            md:px-3 md:h-calc-2                                         /* middle */
                            xl:max-w-7xl xl:h-96                                        /* xlarge */
                            "
      >
        <h1
          className="self-center text-center text-lg leading-normal font-bold w-full  /* small */
                                md:text-left md:text-calc-1 md:w-2/5                            /* middle */
                                xl:text-left xl:text-4xl xl:leading-normal xl:w-2/5             /* xlarge */
                                "
          // style={{ fontSize: 'calc((100vw - 8px) / 1024 * 36)' }}
        >
          Free, official online office tutorials by WPS Academy
        </h1>
        <div
          className="hidden
                                md:flex md:h-calc-1 /* midle */
                                xl:h-80 xl:w-3/5    /* xlarge */
                                "
        >
          <Image
            className="w-full h-full"
            src="https://res-academy.cache.wpscdn.com/images/57a4a45ff9748ff9cdef334582053ed9.png"
            alt={"big img"}
          />
        </div>
      </div>
    </div>
  );
}