galaxy/Cards/MuhammadHasann_calm-sloth-44.html

<div class="card">
  <div class="rectangle left-top"></div>
  <div class="rectangle right-top"></div>
  <div class="rectangle left-bottom"></div>
  <div class="rectangle right-bottom"></div>
  <div class="image">
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="svg">
      <path
        d="M20 5H4V19L13.2923 9.70649C13.6828 9.31595 14.3159 9.31591 14.7065 9.70641L20 15.0104V5ZM2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM8 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7C9.10457 7 10 7.89543 10 9C10 10.1046 9.10457 11 8 11Z"
      ></path>
    </svg>
  </div>
  <div class="love">
    <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="svg">
      <path
        d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"
      ></path>
    </svg>
    <span>2322</span>
  </div>
  <div class="category">
    <button class="button">Abstract</button>
    <button class="button">Nature</button>
    <button class="button">Simple</button>
  </div>
  <button class="action">Action</button>
</div>

<style>
/* From Uiverse.io by MuhammadHasann  - Tags: simple, action, minimalist, card, hover, rounded, smooth, image */
.card {
  --pink-500: #fda8ff;
  --red-400: #f56767;
  --sky-300: #bbefff;
  --blue-500: #00a3fe;

  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;

  padding: 1rem;
  width: 14rem;
  height: auto;
  background-color: black;

  border-radius: 0.5rem;
}

.card .rectangle {
  position: absolute;

  width: 0.925rem;
  aspect-ratio: 1 / 1;
  background-color: white;

  opacity: 0;
  box-shadow: 0rem 0rem 0rem 0.175rem black;
}
.card:hover .rectangle {
  opacity: 1;
}

.card .rectangle.left-top {
  top: -0.25rem;
  left: -0.25rem;
}
.card .rectangle.right-top {
  top: -0.25rem;
  right: -0.25rem;
}
.card .rectangle.left-bottom {
  bottom: -0.25rem;
  left: -0.25rem;
}
.card .rectangle.right-bottom {
  bottom: -0.25rem;
  right: -0.25rem;
}

.card .image {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;

  padding: 0.25rem;
  width: 100%;
  height: 7.25rem;
  background-color: var(--pink-500);

  border-radius: 0.25rem;
}

.card .image .svg {
  width: 2.5rem;
  fill: black;
}

.card .title {
  position: relative;
  z-index: 10;

  font-size: 1.25rem;
  color: white;
  font-weight: bold;
}

.card .love {
  display: flex;
  align-items: center;
  gap: 0.375rem;

  font-size: 1rem;
  font-weight: bold;
  color: white;
}

.card .love .svg {
  width: 1.25rem;
  fill: var(--red-400);
}

.card .category {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.card .category .button {
  cursor: pointer;

  padding: 0.25rem 0.5rem;
  background-color: #d9d9d9;

  font-size: 0.5rem;
  color: black;

  border: 2px solid transparent;
  border-radius: 9999px;
  transition: all 0.3s ease-in-out;
}
.card .category .button:hover {
  border: 2px solid var(--blue-500);
}

.card .action {
  padding-block: 0.375rem;
  margin-top: 0.75rem;
  background-color: var(--sky-300);

  font-size: 0.75rem;
  font-weight: 700;
  color: black;

  border: 2px solid transparent;
  border-radius: 0.5rem;
  transition: all 0.3s ease-in-out;
}
.card .action:hover {
  border: 2px solid var(--blue-500);
}

</style>