JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.ckeditor.com/4.5.4/standard-all/ckeditor.js"></script>
<textarea name="editor">
  <div class="simplebox">
  <h2 class="simplebox-title">Title</h2>

  <div class="simplebox-content">Content</div>
  </div>
</textarea>

JavaScript

CKEDITOR.config.extraPlugins = 'simplebox';
CKEDITOR.config.autoParagraph = false;
CKEDITOR.config.contentsCss = 'data:text/plain;charset=utf-8;base64,LnNpbXBsZWJveHtwYWRkaW5nOjhweDttYXJnaW46MTBweDtiYWNrZ3JvdW5kOiNlZWU7Ym9yZGVyLXJhZGl1czo4cHg7Ym9yZGVyOjFweCBzb2xpZCAjZGRkO2JveC1zaGFkb3c6MCAxcHggMXB4ICNmZmYgaW5zZXQsMCAtMXB4IDBweCAjY2NjIGluc2V0O30uc2ltcGxlYm94LXRpdGxlLC5zaW1wbGVib3gtY29udGVudHtib3gtc2hhZG93OjAgMXB4IDFweCAjZGRkIGluc2V0O2JvcmRlcjoxcHggc29saWQgI2NjY2NjYztib3JkZXItcmFkaXVzOjVweDtiYWNrZ3JvdW5kOiNmZmY7fS5zaW1wbGVib3gtdGl0bGV7bWFyZ2luOjAgMCA4cHg7cGFkZGluZzo1cHggOHB4O30uc2ltcGxlYm94LWNvbnRlbnR7CXBhZGRpbmc6MCA4cHg7fQ==';

CKEDITOR.plugins.add( 'simplebox', {
    requires: 'widget',

    icons: 'simplebox',

    init: function( editor ) {
        editor.widgets.add( 'simplebox', {

            button: 'Create a simple box',

            template:
                '<div class="simplebox">' +
                    '<h2 class="simplebox-title">Title</h2>' +
                    '<div class="simplebox-content">Content...</div>' +
                '</div>',

            editables: {
                title: {
                    selector: '.simplebox-title',
                    allowedContent: 'br strong em'
                },
                content: {
                    selector: '.simplebox-content',
                }
            },

            allowedContent:
                'div(!simplebox); div(!simplebox-content); h2(!simplebox-title)',

            requiredContent: 'div(simplebox)',

            upcast: function( element ) {
                return element.name == 'div' && element.hasClass( 'simplebox' );
            }
        } );
    }
} );

CKEDITOR.replace( 'editor' );