flip-card-wc/dist/demo.css

Flip Card Web Component

:root {
  --flip-card-height: 100px;
  --flip-card-background-color-front: white;
  --flip-card-background-color-back: white;
  --flip-card-box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.container {
  padding: 16px;
  width: 500px;
}

flip-card {
  margin-bottom: 32px;
}

.trivia-card {
  --flip-card-height: 300px;
  --flip-card-background-color-front: LightSkyBlue;
  --flip-card-background-color-back: salmon;
  --flip-card-box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%),
    0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
  --flip-card-transition-timing-function: ease-in;
}

.trivia-card__details {
  height: var(--flip-card-height);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.trivia-card__details p {
  font-size: 24px;
  font-weight: bold;
}

.movie-card {
  --flip-card-height: 400px;
  --flip-card-background-color-front: white;
  --flip-card-background-color-back: white;
  width: 300px;
  --flip-card-transition-timing-function: linear;
}

.movie-card__image img {
  width: 100%;
}

.movie-card__details--back {
  padding: 32px;
}