JSFiddle - React, Tailwind, and code Playground

HTML

<div class="contain">
  <div class="front">With all your text etc</div>
  <div class="rear"></div>
</div>

CSS

.contain {
  position: relative;
  width: 80px;
  height: 80px;
  overflow: hidden;
}

.contain > div {
  position: absolute;
}

div.front {
  width: 80px;
  height: 80px;
  background: transparent;
  z-index: 1;
  border: solid 2px blue;
}

div.rear {
  width: 200px;
  left: -50px;
  top: -50px;
  height: 200px;
  background-image: radial-gradient(at bottom left, blue, red);
  border: red solid 2px;
  animation: spin 10s linear infinite;

}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}