galaxy/Cards/SelfMadeSystem_swift-bullfrog-34.html

<div class="card">
      <div class="bg uwu"></div>
      <div class="bg"></div>
      <div class="content">
            <div class="img">
                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"></path></svg>
            </div>
            <div class="h1">
                  Johnathon<br>F. Stag
            </div>
            <div class="p">
                  Professional human
                  <p>
                        I do human things such as exist, eat foot, and work.
                  </p>
            </div>
      </div>
</div>
<style>
/* From Uiverse.io by SelfMadeSystem - Tags: animation, card, glow, rainbow */
.card {
  position: relative;
  width: 190px;
  color: white;
  height: 260px;
  background: #444;
  border-radius: 14px;
}

.bg {
  position: absolute;
  z-index: -1;
  inset: -4px;
  border-radius: 16px;
  overflow: hidden;
}

.uwu {
  filter: blur(8px);
  transition: filter 0.3s;
}

.bg::before {
  content: '';
  position: absolute;
  aspect-ratio: 1/1;
  top: 50%;
  left: 50%;
  min-width: 150%;
  min-height: 150%;
  background-image: conic-gradient(
    hsl(0, 100%, 50%),
    hsl(30, 100%, 50%),
    hsl(60, 100%, 50%),
    hsl(90, 100%, 50%),
    hsl(120, 100%, 50%),
    hsl(150, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(210, 100%, 50%),
    hsl(240, 100%, 60%),
    hsl(270, 100%, 50%),
    hsl(300, 100%, 50%),
    hsl(330, 100%, 50%),
    hsl(360, 100%, 50%)
  );
  animation: speeen 4s linear infinite;
  transform-origin: 0% 0%;
  transform: rotate(0deg) translate(-50%, -50%);
}

@keyframes speeen {
  from {
    transform: rotate(0deg) translate(-50%, -50%);
  }

  to {
    transform: rotate(360deg) translate(-50%, -50%);
  }
}

.content {
  position: relative;
  padding: 14px 16px;
}

.img {
  height: 5em;
  width: 5em;
  margin: auto;
  background-color: #fff3;
  border-radius: 1em;
}

.img svg {
  height: 100%;
  fill: white;
}

.content div {
  text-align: center;
}

.h1 {
  margin-top: 1em;
  margin-bottom: 0.5em;
  font-size: 1em;
  font-weight: 600;
}

.p {
  font-size: 0.75em;
}

.p p {
  margin-top: 0.5em;
  padding: 0.5em;
  background-color: #0003;
  border-radius: 1em;
}
</style>