JSFiddle - React, Tailwind, and code Playground

HTML

<textarea rows="8" id="my-editor" cols="80">
    <p class="Kuvateksti element-has-class">Test</p>
    <div class="TestDiv element-has-class">
    <table class="Testitaulukko element-has-class">
        <tbody><tr><td>I'm a table</td></tr></tbody>
    </table>
    </div>
    <ul class="Testilista-ul element-has-class"><li><ul><li><ul><li>I'm very nested.</li></ul></li></ul></li></ul>
    <p class="Kuvateksti element-has-class"><img alt="" src="http://media.tumblr.com/tumblr_lmurwplmH31qajltn.png" style="width: 500px; height: 363px; " class="Testikuva element-has-class"/></p>
</textarea>
<script type="text/javascript" src="http://ckeditor.com/apps/ckeditor/3.6.2/ckeditor.js"></script>

CSS

.element-has-class { 
    background-color: pink;
    border: 3px solid green;    
}

JavaScript

window.x  = CKEDITOR.editor.replace('my-editor', {
                skin : 'office2003', 
                stylesSet: [
                    // Block example
                    { name: 'Kuvateksti', element: 'p', attributes: { 'class': 'Kuvateksti element-has-class'} },
                    // Inline example
                    { name: 'Huomiovari', element: 'span', attributes: { 'class':'Huomiovari element-has-class' } }
                    // From DB
                    ,{ name : 'Testitaulukko', element : 'table', attributes : { 'class':'Testitaulukko element-has-class'} }
                    ,{ name : 'Testilista-ul', element : 'ul', attributes : { 'class':'Testilista-ul element-has-class'} }
                    ,{ name : 'Testilista-ol', element : 'ol', attributes : { 'class':'Testilista-ol element-has-class'} }
                    ,{ name : 'Testikuva', element : 'img', attributes : { 'class':'TestiKuva element-has-class'} }
                    ,{ name : 'TestDiv', element : 'div', attributes : { 'class':'TestDiv element-has-class'} }
                ]
});
window.x.addCss( '.element-has-class{ background-color: #eee; border: 3px solid purple; color:red; }' );