JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://code.jquery.com/ui/1.14.1/jquery-ui.js"></script>

<h1>DOMINOS</h1>
<div id="container1">
  <div id="domino1" draggable="true" ondragstart="deplace(event)">
    <div class="dominoA">
      <div class="dominoA1">
        <div class="point"><div class="point0"></div></div>
        <div class="point"></div>
        <div class="point"></div>
      </div>
      <div class="dominoA2">
        <div class="point"></div>
        <div class="point"><div class="point0"></div></div>
        <div class="point"></div>
      </div>
      <div class="dominoA3">
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"><div class="point0"></div></div>
      </div>
    </div>
    <div class="dominoB">
      <div class="dominoB1">
        <div class="point"><div class="point0"></div></div>
        <div class="point"></div>
        <div class="point"><div class="point0"></div></div>
      </div>
      <div class="dominoB2">
        <div class="point"></div>
        <div class="point"></div>
        <div class="point"></div>
      </div>
      <div class="dominoB3">
        <div class="point"><div class="point0"></div></div>
        <div class="point"></div>
        <div class="point"><div class="point0"></div></div>
      </div>
    </div>
  </div>
</div>
<div id="container2" ondrop="depot(event)" onDragOver="survol(event)"></div>
<br />
<button id="pivoter">Pivoter</button>

CSS

body {
  margin-left: 50px;
}
#container1 {
  border: 1px solid red;
  width: 350px;
  height: 150px;
  display: flex;
}
#container2 {
  border: 1px solid red;
  width: 350px;
  height: 150px;
}

#domino1 {
  border: 3px solid black;
  width: 80px;
  height: 40px;
  display: flex;
  background-color: beige;
}

.dominoA {
  border-right: 1px solid black;
  width: 40px;
}

.dominoB {
  width: 40px;
}

Button {
  float: left;
  height: 30px;
  margin-left: 200px;
}
.point {
  width: 13px;
  height: 13px;
  float: left;
}
.point0 {
  width: 3px;
  height: 3px;
  border: 1px solid black;
  border-radius: 50%;
  background-color: black;
  margin-top: 3px;
  margin-left: 3px;
}

JavaScript

$(function () {
  $('[draggable]').draggable();
});

const domino1 = document.getElementById('domino1');
var contaner2 = document.getElementById('container2');
var pivot = 0;
let elementGlisse = '';
let caseChoisie = '';

function deplace(event) {
  elementGlisse = event.target;
}
function survol(event) {
  event.preventDefault();
}
function depot(event) {
  container2.appendChild(domino1);
  pivot = 0;
  event.preventDefault();
}

pivoter.addEventListener('click', function () {
  if (pivot > 360) {
    pivot = 0;
  }
  pivot = pivot + 90;
  if (pivot === 90) {
    domino1.style.transform = 'rotate(90deg)';
    domino1.style.marginTop = '20px';
    domino1.style.marginLeft = '-20px';
  }
  if (pivot === 180) {
    domino1.style.transform = 'rotate(180deg)';
    domino1.style.marginTop = '0px';
    domino1.style.marginLeft = '0px';
  }
  if (pivot === 270) {
    domino1.style.transform = 'rotate(270deg)';
    domino1.style.marginTop = '20px';
    domino1.style.marginLeft = '-20px';
  }
  if (pivot === 360) {
    domino1.style.transform = 'rotate(360deg)';
    domino1.style.marginTop = '0px';
    domino1.style.marginLeft = '0px';
    pivot = 0;
  }
});