JSFiddle - React, Tailwind, and code Playground

by kthornbloom

HTML

<div style="position: relative; width: 300px; height: 200px; border: 1px solid black; overflow: hidden;">
  <!-- Contenteditable element -->
  <div contenteditable="true" style="
      width: 100%;
      height: 100%;
      padding: 10px;
      box-sizing: border-box;
      position: relative;
      line-height: 1.5;
      outline: none;">
  </div>

  <!-- Button in the corner -->
  <button style="
      position: absolute;
      bottom: 10px;
      right: 10px;
      width: 50px;
      height: 50px;
      border: none;
      border-radius: 50%;
      background: black;
      color: white;">Send</button>

  <!-- Exclusion zone -->
  <div style="
      position: absolute;
      bottom: 0;
      right: 0;
      width: 70px;
      height: 70px;
      background: transparent;
      pointer-events: none;
      clip-path: circle(35px at center);"></div>
</div>