JSFiddle - React, Tailwind, and code Playground

by toubia95

HTML

<span class="box"><span class="code">"(manière|façon)" "de" "(dire|faire)"</span></span>

CSS

.box, .plainmessage, fieldset.xwikimessage {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    overflow-x: auto;
}
.code, .code pre, .code *, .monospace {
    font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
    white-space: pre;
}