JSFiddle - React, Tailwind, and code Playground

HTML

<div class="d-grid gap-2 d-md-flex justify-content-md-center align-items-center">
			
					
							  
				  <button id="spin"  class=" btn btn-primary me-md-2">Lancer le dé</button>
				
			
		
		
				<div class="panel">
					  <div class="dice" id="dice">
						<div class="side one">
						  <span class="dot"></span>
						</div>
						<div class="side two">
						  <span class="dot"></span>
						  <span class="dot"></span>
						</div>
						<div class="side three">
						  <span class="dot"></span>
						  <span class="dot"></span>
						  <span class="dot"></span>
						</div>
						<div class="side four">
						  <div class="kolona">
							<span class="dot"></span>
							<span class="dot"></span>
						  </div>
						  <div class="kolona">
							<span class="dot"></span>
							<span class="dot"></span>
						  </div>
						</div>
						<div class="side five">
						  <div class="kolona">
							<span class="dot"></span>
							<span class="dot"></span>
						  </div>
						  <div class="kolona">
							<span class="dot"></span>
						  </div>
						  <div class="kolona">
							<span class="dot"></span>
							<span class="dot"></span>
						  </div>
						</div>
						<div class="side six">
						  <div class="kolona">
							<span class="dot"></span>
							<span class="dot"></span>
						  </div>
						  <div class="kolona">
							<span class="dot"></span>
							<span class="dot"></span>
						  </div>
						  <div class="kolona">
							<span class="dot"></span>
							<span class="dot"></span>
						  </div>
						</div>
					  </div>
				</div>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

CSS

/* le dé*/
.dice {
  height: 60px;
  width: 60px;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-30px) rotateY(-45deg) rotateX(-45deg);
  transition: transform 1s;
}
.panel {
  border-radius: 3px;
  width: 60px;
  height: 60px;
  perspective: 120px;
  /* position: absolute;
left: 25%;*/
  
  
}
.dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin: 1px;
  background-color: gold;
}
.side {
  position: absolute;
  background-color: black;
  width: 60px;
  height: 60px;
  border-radius: 3px;
  line-height:60px;
}
.one {
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotateX(-90deg) translateZ(30px);
  z-index: 1;
}
.two {
  display: flex;
  justify-content: space-between;
  transform: rotateY(180deg) translateZ(30px);
  z-index: 2;
}
.two .dot:nth-of-type(2) {
  align-self: flex-end;
}
.three {
  display: flex;
  justify-content: space-between;
  transform: rotateY(90deg) translateZ(30px);
  z-index: 3;
}

.three .dot:nth-of-type(2) {
  align-self: center;
}

.three .dot:nth-of-type(3) {
  align-self: flex-end;
}
.four {
  z-index: 4;
  transform: rotateY(0deg) translateZ(30px);
}
.four,
.six {
  display: flex;
  justify-content: space-between;
}

.four .kolona,
.six .kolona {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.five {
  display: flex;
  justify-content: space-between;
  transform: rotateY(-90deg) translateZ(30px);
  z-index: 5;
}

.five .kolona {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.five .kolona:nth-of-type(2) {
  justify-content: center;
}
.six {
  transform: rotateX(90deg) translateZ(30px);
  z-index: 6;
}

JavaScript

$("#spin").click(function(e) {

        e.preventDefault(); 
		document.getElementById("dice").style.transform = "rotateY(560deg) rotateX(700deg)";
		 //alert("troune");
        rnd = Math.floor(Math.random() * 6 + 1); 
		
        switch (rnd) {
          case 1:
            x = 720;
            y = 810;
            break;
          case 6:
            x = 720;
            y = 990;
            break;
          default:
            x = 720 + (6 - rnd) * 90;
            y = 900;
            break;
				}
		
		 $(".dice").css(
		 "transform",
		  "translateZ(-100px) rotateY(" + x + "deg) rotateX(" + y + "deg)"
		  ); 
     });