tailwind css slide in and out from the right

the idea here is to make this div that shows details of a clicked project slide in and out smoothly from the right.

this is what ive tried. note: i’m using tailwind

{selectedProject !== null && (
        <div
          className={`fixed top-0 right-0 w-full h-full md:w-1/2 z-20 bg-white px-5 py-10 overflow-scroll transform transition duration-600 ${
            selectedProject !== null ? 'translate-x-0' : 'translate-x-full'
          }`}
        >
          {' '}
          <div
            className="flex items-center justify-between w-full px-1 py-2"
            onClick={closeDetails}
          >
            <div>
              <Image
                src={back}
                alt={back}
                quality={100}
                height={30}
                width={30}
                placeholder="blur"
                className="cursor-pointer"
              />
            </div>
            <Link href="#projects">
              <div onClick={closeDetails} className="font-bold cursor-pointer">
                Back to projects
              </div>
            </Link>
          </div>
          <hr className="pb-10" />
          <p className="text-lg font-extrabold text-black pb-1">
            {projects[selectedProject].name}
          </p>
          <p className="text-gray-700  text-base pb-4 ">
            {projects[selectedProject].details}
          </p>
          <Image
            src={projects[selectedProject].image}
            alt={`${projects[selectedProject].name} screenshot`}
            quality={100}
            placeholder="blur"
            blurDataURL="iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mOMzoyuBwAD5gGgL5NkuQAAAABJRU5ErkJggg=="
            className="h-72 md:h-80 max-w-auto rounded-lg"
          />
          <p className="text-base font-bold text-black pb-1 pt-7">About</p>
          <p className="text-xs md:text-base">
            {projects[selectedProject].details}
          </p>
          <p className="text-base font-bold text-black pb-1 pt-7">
            Technologies
          </p>
          <div className="mt-5">
            <div className="flex flex-wrap gap-3 mt-3">
              {projects[selectedProject].skills.map((skill, skillIndex) => (
                <span
                  key={skillIndex}
                  className="w-fit inline-flex items-center rounded-md bg-indigo-50 px-2 py-1 text-sm font-medium text-black ring-1 ring-inset ring-indigo-700/10"
                >
                  {skill}
                </span>
              ))}
            </div>
          </div>
          <div className="w-fit gap-1 flex items-center">
            <Image
              src={earth}
              alt="earth icon"
              quality={100}
              height={20}
              width={20}
              placeholder="blur"
              className="cursor-pointer"
            />
            <p className="text-base font-bold text-black pb-1 pt-7">Website</p>
          </div>
          <Link href={projects[selectedProject].link}>
            {projects[selectedProject].link}
          </Link>
          <div className="w-fit gap-3 flex items-center">
            <Image
              src={github}
              alt="github icon"
              quality={100}
              height={20}
              width={20}
              placeholder="blur"
              className="cursor-pointer"
            />
            <p className="text-base font-bold text-black pb-1 pt-7">Github</p>{' '}
          </div>
          <Link href={projects[selectedProject].github}>
            {projects[selectedProject].github}
          </Link>
        </div>
      )}

for the life of me, i cannot get it to work as desired . i have the same issues applying this same feature in my menu bar too but an answer to this should fix all i suppose