JSFiddle - React, Tailwind, and code Playground

by Kang Mousir

HTML

<div class='post-body' style='text-align:center'>
    :) :D :( :-o @@, :s :wow: 8) :x :P :| ;) :lol: :oops: :cry: :evil: :twisted: :roll: :!: :?: :idea: :arrow: :mrgreen: :-d <br/>
 <strong>Klik emoticon untuk melihat kode</strong>
</div>

CSS

.emoWrap{margin:0 auto;text-align:center}
.emo,.emoKey{display:inline-block;*display:inline;vertical-align:middle}
.emoKey{width:auto;border:1px solid #ccc;background-color:white;font:normal bold 11px/normal Arial,Sans-Serif;padding:2px;margin:0 0 0 2px;color:black}

JavaScript

var emoRange=".comment_reply_form,.div.comment-form,#comments p, div.post-body, div.emoWrap",emoMessage="Untuk menyisipkan emoticon setidaknya Anda harus menambahkan satu spasi di awal simbol.";(function($){$(document).ready(function(){function emo(emo,imgRep,emoKey){$(emoRange).html(function(){return $(this).html().replace(/<br ?\/?>(:|;|=|\^)/ig,"<br> $1").replace(emo," <img src='"+imgRep+"' class='emo delayLoad' alt='"+emoKey+"'...