JSFiddle - React, Tailwind, and code Playground

by Beben Koben

HTML

<div class="smiley">Lorem ipsum vix id kasd <span class="smile"></span> adhuc dignissim
        <span class="sad"></span>, eum ad dico audire <span class="cry"></span> mediocritatem, te
            iisque <span class="wink"></span> tritani efficiendi has <span class="sarcastic"></span>.
            Ne quo justo docendi <span class="indifferent"></span>. Cum ea quando placerat,
<span class="moustache"></span>eirmod latine erroribus mei ei <span class="oh"></span>, quo mazim
                appetere et <span class="mouth_shut"></span>. Munere aliquid vis ea
<span class="cheek"></span>. Te congue ullamcorper per <span class="nap"></span>. Dicat dolores
                    eu duo <span class="welcome"></span>. Quas labitur volumus te duo <span class="undecided"></span>,
                    at per sonet detraxit evertitur <span class="partying"></span>. No nonumy
                    percipit voluptatum vel <span class="angel"></span>, alii erant mediocritatem
                    sed at <span class="evil"></span>. Brute aeque deseruisse mei ex <span class="vampire"></span>,
                    invidunt constituto usu te <span class="laugh"></span>, sea te delectus
                    urbanitas interpretaris <span class="tongue_cheek"></span>. Eu ullum ubique
                    eum, id aliquid mediocrem quo <span class="angry"></span>. Nam ne eius debitis
<span class="kissed"></span>. Vis porro labitur laboramus an <span class="smug"></span>. Utamur
                        electram beben koben pret <span class="heart"></span> Sed da sine vocabulario
    <span class="sigh"></span>, il magazines interlinguistica web <span class="greedy"></span>.
                            Al duo tote synonymo finalmente <span class="tongue_tied"></span>.
</div>

CSS

.smiley > span {
    color: #555;
    width: 19px;
    height: 19px;
    margin: 0 3px;
    font-size: 11px;   
    font-family: Arial; 
    border-radius: 30px;
    background: #ffe622;    
    display: inline-block;
    vertical-align:middle;
    border: 1px solid #555;
}
:before, :after {
    display: block;
    content:"";
    position: absolute;
}
.smile:after {
    content:":-)";
    font-weight: bolder;
    margin-left: 5px;
    margin-top: 3px;
    transform: rotate(90deg);
}
.sad:after {
    content:":-(";
    font-weight: bolder;
    margin-left: 5px;
    margin-top: 3px;
    transform: rotate(90deg);
}
.cry:after{
  content: "'";
  font-weight: bolder;
  margin-left: 13px;
  margin-top: 6px;
}
.cry:before {
    content:": (";
    font-weight: bolder;
    margin-left: 5px;
    margin-top: 3px;
    transform: rotate(90deg);
}
.wink:after {
    content:";-)";
    font-weight: bolder;
    margin-left: 5px;
    margin-top: 3px;
    transform: rotate(90deg);
}
.sarcastic:after {
    content:":-s";
    font-weight: bolder;
    margin-left: 5px;
    margin-top: 3px;
    transform: rotate(90deg);
}
.indifferent:after {
    content:":- |";
    font-weight: bolder;
    margin-left: 5px;
    margin-top: 3px;
    transform: rotate(90deg);
}
.moustache:after {
    content:":-{)";
    font-weight: bolder;
    margin-left: 4px;
    margin-top: 3px;
    transform: rotate(90deg);
}
.undecided:before {
    content:":-";
    font-weight: bolder;
    margin-left: 8px;
    margin-top: 1px;
    transform: rotate(90deg);
}
.undecided:after{
  content: "/";
  font-weight: bolder;
  margin-top: 7px; 
  margin-left: 9px;
  transform: rotate(90deg);
}
.oh:after {
    content:":-o";
    font-weight: bolder;
    margin-left: 5px;
    margin-top: 3px;
    transform: rotate(90deg);
}
.mouth_shut:after {
    content:":-x";
    font-weight: bolder;
    margin-left: 5px;
    margin-top: 3px;
    transform: rotate(90deg);
}
.laugh:before {
    content:":-";
    font-weight: bolder;
   ...