What is JSX and Styling in React

All UI in your carousel is written in JSX—React’s syntax extension that looks like HTML.

Example:

<div className="carousel">
  <button className="nav-button" onClick={prevImage}>⟵</button>
  <div className="image-container">
    <motion.img ... />
  </div>
  <button className="nav-button" onClick={nextImage}>⟶</button>
</div>

The visual layout and colors are defined using regular CSS in index.css. We use:

• A dark background (#000) for the full app
• Neon cyan (#00eaff) for borders and text
• Smooth transitions on hover
• Circular buttons and rounded corners for a modern, friendly feel

If you’re using the Tailwind version (Carousel.jsx), the same design is created using utility classes.