<div class="container">
  <div class="wrapper">
    <div class="flair flair--1"></div>
  </div>
      <div class="wrapper">
    <div class="flair flair--3"></div>
  </div>
  <div class="wrapper">
    <div class="flair flair--2"></div>
  </div>

  <h4>Spin us, Drag us...</h4>
</div>
html, body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.container {
  position: relative;
  width: 90vw;
  height: 90vh;
  max-width: 90vh;
  max-height: 90vw;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-radius: 9px;
  border: solid 2px var(--mid);
}

h4 {
  color: var(--mid);
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  bottom: 1rem;
  text-align: center;
  pointer-events: none;
}

.flair {
  cursor: pointer;
  width: 70px;
  height: 70px;
  max-height: 15vh;
  max-width: 15vh;
}
gsap.registerPlugin(Draggable, InertiaPlugin);

Draggable.create(".flair--1", {
  type: "x",
  bounds: ".container"
});

Draggable.create(".flair--3", {
  type: "rotation",
  inertia: true
});

Draggable.create(".flair--2", {
  bounds: ".container",
  inertia: true
});

External CSS

  1. https://codepen.io/GreenSock/pen/xxmzBrw/fcaef74061bb7a76e5263dfc076c363e.css

External JavaScript

  1. https://unpkg.co/gsap@3/dist/gsap.min.js
  2. https://unpkg.com/gsap@3/dist/Draggable.min.js
  3. https://assets.codepen.io/16327/InertiaPlugin.min.js