JSFiddle - React, Tailwind, and code Playground

by Kiran G

HTML

<div class="dropTargetRow"><div class="ItemRow ItemRow--highlighted ItemRow--enabled DraggableItemRow-item TaskRow TaskRow--highlighted MyTasksTaskRow MyTasksTaskRow--editable"><div class="ItemRow-left"><div class="dragHandle TaskRow-dragHandle" draggable="true"><svg class="Icon DragIcon DragHandle-icon" viewBox="0 0 32 32"><path d="M 14 5.5 a 3 3 0 1 1 -3 -3 A 3 3 0 0 1 14 5.5 Z m 7 3 a 3 3 0 1 0 -3 -3 A 3 3 0 0 0 21 8.5 Z m -10 4 a 3 3 0 1 0 3 3 A 3 3 0 0 0 11 12.5 Z m 10 0 a 3 3 0 1 0 3 3 A 3 3 0 0 0 21 12.5 Z m -10 10 a 3 3 0 1 0 3 3 A 3 3 0 0 0 11 22.5 Z m 10 0 a 3 3 0 1 0 3 3 A 3 3 0 0 0 21 22.5 Z"></path></svg></div><div class="TaskRowCompletionStatus-checkbox TaskRowCompletionStatus-checkbox--incomplete TaskRowCompletionStatus--taskRowSelected TaskRowCompletionStatus TaskRow-completionStatus"><svg class="Icon CheckIcon TaskRowCompletionStatus-checkIcon" viewBox="0 0 32 32"><polygon points="27.672,4.786 10.901,21.557 4.328,14.984 1.5,17.812 10.901,27.214 30.5,7.615 "></polygon></svg></div><div class="TaskName TaskName--editable TaskRow-taskName"><div class="TaskName-shadow">sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss|</div><textarea id="pot.420763656792055inbox_513692555556279" class="TaskName-input override-focus-border" placeholder="" rows="1" tabindex="100" wrap="off" style="white-space: pre;">sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</textarea></div></div><div class="ItemRow-right"><div class="PotPillsContainer TaskRow-pots"><a class="NavigationLink PotPillsContainer-potPillLink" href="https://app.asana.com/0/493461269685277/list"><div class="Pill--clickable Pill--colorNone Pill Pill--small">TEsting2</div></a></div><a class="MiniHeartButton MiniHeartButton--hearted TaskRow-hearts" role="button" aria-pressed="true">1<svg class="Icon ThumbsUpIcon MiniHeartButton-icon...

CSS

.TaskList {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow: hidden;
}

.TaskList .dropTargetRow:first-child {
    margin-top: 1px;
}


.dropTargetRow {
    margin-bottom: -1px;
    padding-bottom: 1px;
    position: relative;
}


.ItemRow, .FakeSearchGridRow, .PotGridBodyPlaceholder-itemRow {
    border-bottom: 1px solid transparent;
    border-top: 1px solid transparent;
    height: 34px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    overflow: visible;
    padding: 0 30px;
    position: relative;
    -webkit-transition: box-shadow 0s ease-in;
    transition: box-shadow 0s ease-in;
    white-space: nowrap;
}

.MyTasksTaskRow.MyTasksTaskRow--editable {
    cursor: auto;
}

.ItemRow--enabled.ItemRow--highlighted {
    background-color: #edf8ff;
}

.TaskRow.TaskRow--highlighted {
    overflow: hidden;
}


.ItemRow--enabled {
    -webkit-transition: box-shadow 100ms ease-in-out;
    transition: box-shadow 100ms ease-in-out;
}

.DraggableItemRow-item .ItemRow-left {
    margin-left: -30px;
}

.ItemRow-left, .PotGridBodyPlaceholder-itemRowLeft {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1000 auto;
    -ms-flex: 1 1000 auto;
    flex: 1 1000 auto;
    height: 100%;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    min-width: 1px;
    position: relative;
}

.TaskRow-dragHandle {
    visibility:...