JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
    <div class="inner" draggable='true' ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">
        <p>Some content here that should have clean rounded corners while being dragged</p>
    </div>
</div>

CSS

.outer {
  background-color: #aa9;
  padding: 4px;
}


.inner {
  opacity: 0.999;
  position: relative;
  border-radius: 18px;
  padding: 12px;
  background-color: #ead;
}