Flip Card - Copy this React, Mui Component to your project

.flip card { background color: transparent; /* width: 400px; */ height: fit content; perspective: 1000px; /* Adds perspective */ } .flip card inner { position: relative; width: 100%; height: 100%; text align: center; transition: transform 0.6s; transform style: preserve 3d; } .flip card:hover .flip card inner { transform: rotateY(180deg); } .flip card front, .flip card back { /* position: absolute; */ width: 100%; height: 100%; backface visibility: hidden; } .flip card front { background color: #663131; color: black; height: 100%; } .flip card back { background color: #2980b9; color: white; transform: rotateX(180deg); height: 100%; } .text { /* position: absolute; */ bottom: 20px; left: 20px; font size: 18px; font weight: bold; } make the css slick and beautiful