<section className="flex w-full place-content-center px-4 py-16">
  <div className="flex max-w-3xl flex-col items-center space-y-16">
    <div className="relative grid max-w-xl place-items-center space-y-4">
      <span className="rounded-md bg-primary/10 px-2 py-1 font-bold text-primary"
        >Start Today</span
      >
      <h2 className="text-center text-3xl font-bold">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit
      </h2>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        version="1.1"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        xmlns:svgjs="http://svgjs.dev/svgjs"
        viewBox="0 0 800 800"
        className="absolute -top-[90px] right-20 h-40 w-40 -rotate-45 max-[600px]:right-10 max-[550px]:-right-0 max-[450px]:-right-10"
      >
        <g
          strokeWidth="10"
          stroke="#eb5e28"
          fill="none"
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeDasharray="18 26"
          transform="matrix(-0.7771459614569708,-0.6293203910498376,0.6293203910498376,-0.7771459614569708,426.13022816285326,962.5865410027234)"
        >
          <path
            d="M320.6474151611328 241.1018524169922Q-70.35258483886719 634.1018524169922 620.6474151611328 541.1018524169922 "
            marker-end="url(#SvgjsMarker1612)"
          ></path>
        </g>
        <defs>
          <marker
            markerWidth="8"
            markerHeight="8"
            refX="4"
            refY="4"
            viewBox="0 0 8 8"
            orient="auto"
            id="SvgjsMarker1612"
          >
            <polyline
              points="0,4 4,2 0,0"
              fill="none"
              strokeWidth="1.3333333333333333"
              stroke="#eb5e28"
              strokeLinecap="round"
              transform="matrix(1,0,0,1,1.3333333333333333,2)"
              strokeLinejoin="round"
            ></polyline>
          </marker>
        </defs>
      </svg>
    </div>
    <ul className="grid gap-10 md:grid-cols-2 md:text-balance">
      <li className="flex space-x-6 self-center">
        <span
          className="flex h-fit place-content-center items-center rounded-md bg-primary/10 p-2 text-primary"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="h-8 w-8"
          >
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11" />
          </svg>
        </span>
        <div className="space-y-2">
          <h4 className="text-lg font-bold">Lorem ipsum dolor</h4>
          <p>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita
            iusto, perferendis cupiditate, voluptatem similique, nisi omnis
            optio voluptatum aperiam culpa vel fuga? A quasi nesciunt, nam
            asperiores minus harum repudiandae!
          </p>
        </div>
      </li>
      <li className="flex space-x-6 self-center">
        <span
          className="flex h-fit place-content-center items-center rounded-md bg-primary/10 p-2 text-primary"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="h-8 w-8"
          >
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11" />
          </svg>
        </span>
        <div className="space-y-2">
          <h4 className="text-lg font-bold">Lorem ipsum dolor</h4>
          <p>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita
            iusto, perferendis cupiditate, voluptatem similique, nisi omnis
            optio voluptatum aperiam culpa vel fuga? A quasi nesciunt, nam
            asperiores minus harum repudiandae!
          </p>
        </div>
      </li>
      <li className="flex space-x-6 self-center">
        <span
          className="flex h-fit place-content-center items-center rounded-md bg-primary/10 p-2 text-primary"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="h-8 w-8"
          >
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11" />
          </svg>
        </span>
        <div className="space-y-2">
          <h4 className="text-lg font-bold">Lorem ipsum dolor</h4>
          <p>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita
            iusto, perferendis cupiditate, voluptatem similique, nisi omnis
            optio voluptatum aperiam culpa vel fuga? A quasi nesciunt, nam
            asperiores minus harum repudiandae!
          </p>
        </div>
      </li>
      <li className="flex space-x-6 self-center">
        <span
          className="flex h-fit place-content-center items-center rounded-md bg-primary/10 p-2 text-primary"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="h-8 w-8"
          >
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11" />
          </svg>
        </span>
        <div className="space-y-2">
          <h4 className="text-lg font-bold">Lorem ipsum dolor</h4>
          <p>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita
            iusto, perferendis cupiditate, voluptatem similique, nisi omnis
            optio voluptatum aperiam culpa vel fuga? A quasi nesciunt, nam
            asperiores minus harum repudiandae!
          </p>
        </div>
      </li>
      <li className="flex space-x-6 self-center">
        <span
          className="flex h-fit place-content-center items-center rounded-md bg-primary/10 p-2 text-primary"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="h-8 w-8"
          >
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11" />
          </svg>
        </span>
        <div className="space-y-2">
          <h4 className="text-lg font-bold">Lorem ipsum dolor</h4>
          <p>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita
            iusto, perferendis cupiditate, voluptatem similique, nisi omnis
            optio voluptatum aperiam culpa vel fuga? A quasi nesciunt, nam
            asperiores minus harum repudiandae!
          </p>
        </div>
      </li>
      <li className="flex space-x-6 self-center">
        <span
          className="flex h-fit place-content-center items-center rounded-md bg-primary/10 p-2 text-primary"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="h-8 w-8"
          >
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11" />
          </svg>
        </span>
        <div className="space-y-2">
          <h4 className="text-lg font-bold">Lorem ipsum dolor</h4>
          <p>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita
            iusto, perferendis cupiditate, voluptatem similique, nisi omnis
            optio voluptatum aperiam culpa vel fuga? A quasi nesciunt, nam
            asperiores minus harum repudiandae!
          </p>
        </div>
      </li>
    </ul>
  </div>
</section>
#Centered grid

#Basic Centered

#With left indicator and image

#Check icons on left image to right

#Grid to the left and image
