JSFiddle - React, Tailwind, and code Playground

by psycketom

HTML

<header id="top" data-accept="logo|navigation|contacts" data-editable="true">
    <figure id="logo"></figure>
    <figure class="contacts">
        <dl>
            <dt>Address:</dt>
            <dd>Lorem Ipsum, Solar System, UNVRS</dd>
            
            <dt>Phone:</dt>
            <dd>+1337 13333337</dd>
            
            <dt>E-Mail:</dt>
            <dd><a href="mailto:[email protected]" data-void="true">[email protected]</a></dd>
        </dl>
    </figure>
    
    <nav class="navigation">
        <a href="#index">Home</a>
        <a href="#about">About Us</a>
        <a href="#contacts">Contacts</a>
    </nav>
</header>

<section id="main" data-layouts="page" data-layout="content+sidebar" data-exclude="logo|navigation|contacts">
    <section id="content" data-editable="true">
    </section>
    
    <section id="sidebar" data-editable="true">
    </section>
</section>

<footer id="bottom" data-editable="true" data-accept="navigation|contacts">
    <nav class="navigation">
        <a href="#index">Home</a>
        <a href="#about">About Us</a>
        <a href="#contacts">Contacts</a>
    </nav>
</footer>

<!-- 
For demo purposes.
Store templates we do not want to be rendered by default.
-->
<div id="templates">
    <div id="layouts">
        <div class="page" name="content+sidebar">
            <section data-attr-id="content" data-editable="true"></section>
            
            <section data-attr-id="sidebar" data-editable="true"></section>
        </div>
        
        <div class="page" name="content">
            <section data-attr-id="content" data-editable="true"></section>
        </div>
        
        <div class="page" name="content+sidetwobar" data-attr-class="applied-class">
            <section data-attr-id="content" data-editable="true"></section>
            
            <section data-attr-id="sidebar-one" data-editable="true"></section>
            <section data-attr-id="sidebar-two" data-editable="true"></section>
       ...

CSS

/**
 * Resets
 */
*
{
    margin: 0;
    box-sizing: border-box;
}

body
{
    margin: 0;
}

/**
 * Sections
 */
#top
{
    background-color: #333;
    padding: 16px;
}

#main
{
    margin: 16px 0;
    padding: 16px;
}

#bottom
{
}

/**
 * Assets
 */
#logo
{
    background: red;
    min-width: 100px;
    min-height: 50px;
}

figure.contacts
{
    
}

figure.contacts dl, figure.contacts dt, figure.contacts dd
{
    margin: 0;
    padding: 0;
}

nav.navigation
{
    
}

nav.navigation a
{
    display: inline-block;
    padding: 0.8em;
}

/**
 * Actual styles.
 */
#top nav.navigation a
{
    background-color: black;
    color: white;
    
    text-decoration: none;
}

#bottom nav.navigation a
{
    background-color: white;
    color: black;
    
    text-decoration: none;
}

#main
{
    overflow: hidden;
}

#content
{
    width: 60%;
    background-color: #666;
    
    padding: 8px;
    margin-right: 2%;
    
    float: left;
}

#sidebar
{
    width: 38%;
    float: right;
    
    background-color: #888;
    padding: 8px;
}

#bottom
{
    background-color: #444;
    padding: 16px;
}

/**
 * Templates
 */
#templates
{
    display: none;
}

/**
 * Editor styles.
 */
[data-editable="true"] .block-placeholder
{
    border: dashed 1px green;
    
    position: relative;
    
    height: 70px;
    
    background-color: white;
}

[data-editable="true"] .block-placeholder:not(:first-child)
{
    margin-top: 16px;
}

[data-editable="true"] .block-placeholder:after
{
    position: absolute;
       
    left: 50%;
    top: 50%;
    
    -webkit-transform: translate(-50%, -50%);
    
    padding: 0.5em;
    
    background-color: green;
    border-radius: 100%;
    
    width: 16px;
    height: 16px;
    
    line-height: 16px;
    
    font-size: 24px;
    text-align: center;
    font-weight: bold;
    font-family: 'Courier New';
    
    color: white;
    
    content: '+';
    
    display: block;
}

JavaScript

$(function() {
    // For demo purposes.
    // Disable links, we do not want to be pushed, yet, want to be properly rendered
    // and keep semantic.
    $('[data-void="true"]').on({
        click : function(e)
        {
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();
        }
    });
    
    // Editable block placeholder.
    var $blockPlaceholder = $(document.createElement('div')).addClass('block-placeholder');
    
    // Editable regions.
    $('[data-editable="true"]').append($blockPlaceholder.clone(true));
});