JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

html, body{
  background-color: #e7e7e7e7;
}
.image{
  position: absolute;
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 4px solid transparent;
  border-radius: 50%;
  background-image: linear-gradient(white, white), radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
  background-origin: border-box;
  background-clip: content-box, border-box;
}
.image__src{
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  border-radius: 50%;
  background-size: cover;
}