I use react-slick and I pass custom arrows, but the default arrow position is right-left.

but I want to change it to the bottom right side.

also, we should consider that I use sliders on another page where I want the default position of arrows. so I can’t use a css file.

for information I use Tailwind

`const settings = {
    dots: true,
    infinite: false,
    speed: 500,
    slidesToShow: 6,
    slidesToScroll: 2,
    nextArrow: <RightIcon  />,
    prevArrow: <LeftIcon  />,
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 4,
          slidesToScroll: 2,
        },
      },
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 2,
        },
      },
      {
        breakpoint: 640,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 1,
        },
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
        },
      },
    ],
  };
`

 <Slider {...settings}>
          {ProductsDB.map((product, index) => (
            <ProductCard key={product.id} data={product} />
          ))}
        </Slider>

I tried to find answers in google but there was nothing