JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<div class="box" contenteditable="true"> Edit this<br>text </div>

CSS

.box {
  width: 100px;
  resize: both;
  clip-path: circle(calc(71%));
  margin: 100px auto;
  position: relative;
  font-size: 35px;
  color: #fff;
}

/* the background layer */
.box::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: blue;
}

/* the image layer */
.box::after {
  content: "";
  position: fixed;
  z-index: -2;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url('https://picsum.photos/id/1015/1000/1000') center/cover no-repeat;
}