JSFiddle - React, Tailwind, and code Playground

HTML

<section class="image" style="background-image: url('https://source.unsplash.com/200x200/?girl');"></section>

CSS

.image{
  position: relative;
  width: 200px;
  height: 200px;
  margin: 50px auto;
  border-radius: 50%;
  border-image-slice: 20;
  background-size: cover;
}
.image:after{
  content: '';
  position: absolute;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  border-radius: 50%;
  background: #fff;
  z-index: -1;
}
.image:before{
  content: '';
  position: absolute;
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  border-radius: 50%;
  background-image: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
  z-index: -1;
  transition: transform 5s ease-in-out;
}
.image:hover:before{
  transform: rotate(888deg);
}