Ugly baboon

<!-- From Uiverse.io by SmookyDev  - Tags: simple, material design, card, light&dark, hover effect, hoverme, tailwind -->
<div
  class="service-card w-[300px] shadow-xl cursor-pointer snap-start shrink-0 py-8 px-6 bg-white flex flex-col items-start gap-3 transition-all duration-300 group hover:bg-[#202127]"
>
  <svg
    stroke-linejoin="round"
    stroke-linecap="round"
    stroke-width="2"
    stroke="#000000"
    fill="none"
    viewBox="0 0 24 24"
    class="text-5xl h-12 w-12 stroke-gray-800 group-hover:stroke-gray-400"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect ry="2" rx="2" height="14" width="20" y="3" x="2"></rect>
    <line y2="21" x2="16" y1="21" x1="8"></line>
    <line y2="21" x2="12" y1="17" x1="12"></line>
  </svg>

  <p class="font-bold text-2xl group-hover:text-white text-black/80">
    WEBSITE SEO
  </p>
  <p class="text-gray-400 text-sm">
    Website ravida surna eveti semen the conse tusio anivite dianne one nivam
    acestion vue artin dictum.
  </p>
  <p
    style="-webkit-text-stroke: 1px gray;
                              -webkit-text-fill-color: transparent;"
    class="text-5xl font-bold self-end"
  >
    09
  </p>
</div>

.flex {
  display: flex;
}
.h-12 {
  height: calc(0.25rem * 12);
}
.w-12 {
  width: calc(0.25rem * 12);
}
.w-\[300px\] {
  width: 300px;
}
.shrink-0 {
  flex-shrink: 0;
}
.cursor-pointer {
  cursor: pointer;
}
.snap-start {
  scroll-snap-align: start;
}
.flex-col {
  flex-direction: column;
}
.items-start {
  align-items: flex-start;
}
.gap-3 {
  gap: calc(0.25rem * 3);
}
.self-end {
  align-self: flex-end;
}
.bg-white {
  background-color: #fff;
}
.stroke-gray-800 {
  stroke: oklch(27.8% 0.033 256.848);
}
.px-6 {
  padding-inline: calc(0.25rem * 6);
}
.py-8 {
  padding-block: calc(0.25rem * 8);
}
.text-2xl {
  font-size: 1.5rem;
  line-height: var(--tw-leading, calc(2 / 1.5));
}
.text-5xl {
  font-size: 3rem;
  line-height: var(--tw-leading, 1);
}
.text-sm {
  font-size: 0.875rem;
  line-height: var(--tw-leading, calc(1.25 / 0.875));
}
.font-bold {
  --tw-font-weight: 700;
  font-weight: 700;
}
.text-black\/80 {
  color: color-mix(in oklab, #000 80%, transparent);
}
.text-gray-400 {
  color: oklch(70.7% 0.022 261.325);
}
.shadow-xl {
  --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.transition-all {
  transition-property: all;
  transition-timing-function: var(--tw-ease, cubic-bezier(0.4, 0, 0.2, 1));
  transition-duration: var(--tw-duration, 150ms);
}
.duration-300 {
  --tw-duration: 300ms;
  transition-duration: 300ms;
}
@media (hover: hover) {
  .group-hover\:stroke-gray-400:is(:where(.group):hover *) {
    stroke: oklch(70.7% 0.022 261.325);
  }
  .group-hover\:text-white:is(:where(.group):hover *) {
    color: #fff;
  }
  .hover\:bg-\[\#202127\]:hover {
    background-color: #202127;
  }
}

<!-- From Uiverse.io by SmookyDev  - Tags: simple, material design, card, light&dark, hover effect, hoverme, tailwind -->
<div
  class="service-card w-[300px] shadow-xl cursor-pointer snap-start shrink-0 py-8 px-6 bg-white flex flex-col items-start gap-3 transition-all duration-300 group hover:bg-[#202127]"
>
  <svg
    stroke-linejoin="round"
    stroke-linecap="round"
    stroke-width="2"
    stroke="#000000"
    fill="none"
    viewBox="0 0 24 24"
    class="text-5xl h-12 w-12 stroke-gray-800 group-hover:stroke-gray-400"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect ry="2" rx="2" height="14" width="20" y="3" x="2"></rect>
    <line y2="21" x2="16" y1="21" x1="8"></line>
    <line y2="21" x2="12" y1="17" x1="12"></line>
  </svg>

  <p class="font-bold text-2xl group-hover:text-white text-black/80">
    WEBSITE SEO
  </p>
  <p class="text-gray-400 text-sm">
    Website ravida surna eveti semen the conse tusio anivite dianne one nivam
    acestion vue artin dictum.
  </p>
  <p
    style="-webkit-text-stroke: 1px gray;
                              -webkit-text-fill-color: transparent;"
    class="text-5xl font-bold self-end"
  >
    09
  </p>
</div>