Feature Section Component Built with Tailwind

FeatureSection.tsx

import Image from "next/image";

export enum Position {
  LEFT,
  RIGHT,
}

interface IFeatureSection {
  illustrationPath: string;
  title: string;
  subtitle: string;
  position: Position;
}

export default function FeatureSection({
  illustrationPath,
  title,
  subtitle,
  position,
}: IFeatureSection) {
  const isLeftPosition = position === Position.LEFT;

  return (
    <section
      className={`flex mx-32 overflow-y-hidden ${
        isLeftPosition ? "flex-row" : "flex-row-reverse"
      }`}
    >
      <div className="w-2/4 flex justify-center items-center">
        <Image
          src={illustrationPath}
          width={800}
          height={20}
          alt={title + " illustration"}
        />
      </div>
      <div className="w-3/5 flex justify-center items-center text-center flex-col">
        <div className="w-2/3 space-y-5">
          <h2 className="font-bold text-6xl tracking-tighter">{title}</h2>
          <h3 className="w-auto h-46 text-justify">{subtitle}</h3>
        </div>
      </div>
    </section>
  );
}