JSFiddle - React, Tailwind, and code Playground

CSS

* {
    box-sizing: border-box;
    margin: 0;
}

html, body, #root {
    height: 100%;
}

.carousel {
    height: 100%;
    width: 80%;
    overflow: hidden;
}

.carousel-insider {
    display: flex;
    gap: 40px;
    width: 90%;
}

img {
    width: 40%;
    border-radius: 1em;
    pointer-events: none;
}

JavaScript

import { useState, useRef, useEffect } from 'react'
import { motion } from 'framer-motion';

import picOne from "./Pictures/daniel-lozano-valdes-lZ2LB1s_z7s-unsplash.jpeg"
import picTwo from "./Pictures/kenrick-mills-MF9Wy1NA55I-unsplash.jpeg"
import picThree from "./Pictures/leonard-von-bibra-UQaht0LBiYc-unsplash.jpeg"
import picFour from "./Pictures/mike-yukhtenko-wfh8dDlNFOk-unsplash.jpeg"

const fotos = [picOne, picTwo, picThree, picFour]

export const App = () => {
  
  const [width, setWidth] = useState(0)
  const ref = useRef(null)
  
  useEffect(() => {
    setWidth(ref.current.scrollWidth - ref.current.offsetWidth)
  }, [])

  return (
    <>
      <div className="carousel" ref={ref}>
        <motion.div className="carousel-insider"
                    drag="x"
                    dragConstraints={{right: 0, left: -width}}>
        
          {fotos.map((foto, index) => <img key={index} src={foto}/>)}
        </motion.div>
      </div>
    </>
  )
}