JSFiddle - React, Tailwind, and code Playground

by Kiran G

HTML

<div class="TaskCommentComposer is-collapsed"><div class="Avatar Avatar--medium Avatar--color5 TaskCommentComposer-avatar">KG</div><div class="TaskCommentComposer-composer"><div class="TaskCommentComposer-textEditor textEditor-container"><div class="textEditor-placeholder">Write a comment…</div><div class="quill-container"><div class="ql-editor" id="undefined" tabindex="106" contenteditable="true" data-gramm="false"><div><br></div></div><div class="ql-paste-manager" contenteditable="true" tabindex="-1"></div></div></div><div class="TaskCommentComposer-toolbar"><a class="Button Button--small Button--primary TaskCommentComposer-commentButton" tabindex="-1" role="button" aria-disabled="false">Comment</a></div></div></div>

CSS

.TaskCommentComposer, .SingleTaskPanePlaceholder-commentComposer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 10px 30px;
}

.TaskCommentComposer-avatar {
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-right: 10px;
}

.Avatar--color5 {
    background-color: #eec300;
}

.Avatar--medium {
    font-size: 11px;
    height: 30px;
    line-height: 30px;
    width: 30px;
}


.Avatar {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background: center/cover #d5dce0;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    vertical-align: top;
}

.SingleTaskPane {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 1px;
}

.TaskCommentComposer-composer {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    border: 1px solid #d5dce0;
    border-radius: 3px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 9px;
    background: #fff;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 1px;
    overflow:...