title: How to design a UI Component like this in React?
body: <p>I got the requirement for developing a UI component for teams-info like this.</p>
  <p><a href="https://i.stack.imgur.com/GNIe7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GNIe7.png" alt="enter image description here" /></a></p>
  <p>I have just started using React with React-Bootstrap, but I couldn't find a UI layout which can render this. I have used react-responsive-carousel, but It's a flat icon at the bottom of the image as Thumbnail not like a half-circular option shown in the image.</p>
  <p>Update:
  On selecting another image the image positions must not change. Like this.
  <a href="https://i.stack.imgur.com/NpxSV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NpxSV.png" alt="enter image description here" /></a>
  Can anyone guide me how can I achieve this?</p>
  <p>Thanks in advance.</p>