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 {
    border-radius: 18px;
    padding: 12px;
    background-color: #ead;
}