JSFiddle - React, Tailwind, and code Playground

by Dmitry Luzanov

HTML

<div class="block">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim incidunt aut minima deserunt vero? Ad, autem cumque modi fugiat alias ducimus quam fugit odit saepe optio labore consectetur excepturi sed, sint dignissimos accusantium? Molestias perspiciatis sed vel doloremque vero alias ex quaerat obcaecati, reprehenderit? Accusantium molestias autem blanditiis porro voluptates odio amet. Iure animi, ex iste ipsum aliquam, dignissimos tempora quae dicta cupiditate incidunt sequi dolorem consequatur optio recusandae totam labore rerum placeat culpa aspernatur cum. Debitis ipsum vitae accusamus excepturi harum quos, quis aut totam repellendus sit iure iste suscipit vero, nihil a sed id error ullam voluptas eos.
  <span class="block__decore"></span>
</div>

CSS

.block {
  background-color: orange;
  padding: 20px;
  padding-right: 120px;
  color: black;
  width: 320px;
  overflow: hidden;
  position: relative;
}

.block__decore {
  content: '';
  display: block;
  height: 150%;
  width: 150%;
  position: absolute;
  top: -25%;
  background-color: #fff;
  right: -150%;
  z-index: 1;
  border-radius: 75%;
  transform: translateX(-13%);
}