galaxy/Cards/Praashoo7_jolly-bulldog-31.html

<div class="main">
  <div class="card">
    <div class="ups">
      <div class="screw1">+</div>
      <div class="screw2">+</div>
    </div>
    <div class="card1">
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="yl">
        <div class="roll">
          <div class="s_wheel"></div>
          <div class="tape"></div>
          <div class="e_wheel"></div>
        </div>
        <p class="num">90</p>
      </div>
      <div class="or">
        <p class="time">2×30min</p>
      </div>
    </div>
    <div class="card2_main">
      <div class="card2">
        <div class="c1"></div>
        <div class="t1"></div>
        <div class="screw5">+</div>
        <div class="t2"></div>
        <div class="c2"></div>
      </div>
    </div>
    <div class="downs">
      <div class="screw3">+</div>
      <div class="screw4">+</div>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by Praashoo7 - Tags: card, realistic, cassette */
.card {
  width: 300px;
  height: 200px;
  background: #252525;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.ups {
  display: flex;
}

.screw1 {
  display: flex;
  color: black;
  border: 1px solid black;
  background-color: lightgrey;
  height: 0.75em;
  width: 0.75em;
  margin: 0.5em;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}

.screw2 {
  display: flex;
  color: black;
  border: 1px solid black;
  background-color: lightgrey;
  height: 0.75em;
  width: 0.7em;
  margin-top: 0.5em;
  margin-left: 15.8em;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}

.downs {
  display: flex;
}

.screw3 {
  display: flex;
  color: black;
  border: 1px solid black;
  background-color: lightgrey;
  height: 0.75em;
  width: 0.75em;
  margin-top: -1.3em;
  margin-left: 0.5em;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}

.screw4 {
  display: flex;
  color: black;
  border: 1px solid black;
  background-color: lightgrey;
  height: 0.75em;
  width: 0.75em;
  margin-top: -1.3em;
  margin-left: 16.35em;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}

.card1 {
  width: 230px;
  height: 115px;
  margin-top: 0.5em;
  margin-left: 2.18em;
  background-color: #FFFDD0;
  clip-path: polygon(5% 0, 95% 0, 100% 10%, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 10%);
  border-radius: 5px;
}

.line1 {
  position: relative;
  width: 200px;
  height: 1px;
  background-color: black;
  top: 1em;
  left: 0.8em;
}

.line2 {
  position: relative;
  width: 200px;
  height: 1px;
  background-color: black;
  top: 2em;
  left: 0.8em;
}

.yl {
  display: flex;
  width: 228px;
  height: 50px;
  background-color: rgb(242, 188, 0);
  margin-top: 2.5em;
  margin-left: 0.06em;
}

.roll {
  width: 8em;
  height: 2em;
  margin-left: 3em;
  border-radius: 15px;
  background-color: #171717;
  display: flex;
}

.tape {
  width: 3em;
  height: 1.5em;
  position: relative;
  left: 0.9em;
  background-color: #252525;
}

.s_wheel {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 0.215em;
  left: 0.15em;
  width: 1.55em;
  height: 1.55em;
  border: 2px dashed #fff;
  box-shadow: 0 0 0 4.4px #fff;
  border-radius: 50%;
  animation: 2s run infinite linear;
}

.window {
  background-color: white;
  width: auto;
  height: 2em;
}

.e_wheel {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 0.215em;
  left: 1.7em;
  width: 1.55em;
  height: 1.55em;
  border: 2px dashed #fff;
  box-shadow: 0 0 0 4.4px #fff;
  border-radius: 50%;
  animation: 2s run infinite linear;
}

.num {
  margin-left: 1.5em;
  align-self: center;
}

.or {
  display: flex;
  width: 230px;
  height: 18px;
  background-color: rgb(241, 90, 37);
  margin-top: 0.4em;
  margin-left: 0em;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  align-items: center;
  justify-content: center;
}

.time {
  font-size: 0.5em;
}

.card2_main {
  filter: drop-shadow(4px 4px 14px rgba(0, 0, 0, 1));
}

.card2 {
  width: 150px;
  height: 50px;
  margin-top: 0em;
  margin-left: 4.6em;
  background-color: #252525;
  clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
}

.screw5 {
  position: relative;
  display: flex;
  color: black;
  border: 1px solid black;
  background-color: lightgrey;
  height: 0.75em;
  width: 0.75em;
  left: 4.25em;
  top: -0.5em;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}

.c1 {
  position: relative;
  width: 0.5em;
  height: 0.5em;
  background-color: rgb(190, 190, 190);
  border-radius: 50%;
  left: 1.5em;
  top: 2em;
}

.t1 {
  position: relative;
  width: 0.5em;
  height: 0.5em;
  background-color: rgb(190, 190, 190);
  border-radius: 2px;
  left: 3em;
  top: 1em;
}

.t2 {
  position: relative;
  width: 0.5em;
  height: 0.5em;
  background-color: rgb(190, 190, 190);
  border-radius: 2px;
  left: 5.7em;
  top: -0.2em;
}

.c2 {
  position: relative;
  width: 0.5em;
  height: 0.5em;
  background-color: rgb(190, 190, 190);
  border-radius: 50%;
  left: 7.2em;
  top: -0.2em;
}

@keyframes run {
  100% {
    transform: rotate(360deg);
  }
}
</style>