JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="site">
    <iframe src="http://imarc.net/blog" frameborder="0"></iframe>
</div>
<div class="sitemanager">
    <h1>Edit Blog</h1>
    <div class="text">
        <label for="">Title:</label>
        <input type="text" value="Pencils Down: Knowing When You’re Done and How To Get There Faster" />
    </div>
    <div class="text">
        <label for="">Short URL:</label>
        <input type="text">
        <p class="help">
            A friendly URL for your blog post. <strong>ex: /blog/{SHORT_URL}</strong>.	Adding a short URL is optional, but recommended. Please choose your short URL with care. Be aware that changing the short URL after your blog goes live will break the link the world uses to access your blog.
        </p>
    </div>
    <div class="dates">
        <label for="">Date Posted:</label>
        <div class="group">
            <input type="text" class="date">
            <input type="text" class="date">
        </div>
    </div>
    <div class="textarea">
        <label for="">Body:</label>
        <div class="wysiwyg">
					<p>
						</p><p>As designers, sometimes our biggest hurdle can be ourselves. I’m a bit of a perfectionist myself and occasionally I find it difficult to export a comp, close Photoshop and say, “I’m done.” What I’ve learned as I become a more seasoned designer is recognizing the difference between when I’m just pushing around pixels (Push Mode) and when I’m actually being productive (Design Mode). Unfortunately, knowing the difference doesn’t always keep me out of Push Mode so I’ve tried to modify my process a bit to keep it from happening.</p>
<h2>Schedule breaks into your design time</h2>
<p>Sometimes the best thing you can do is put some space between you and your design. If I’m struggling with a design I’ll make sure I put it down for a while and work on something else, or if time permits I’ll spend a few hours on it at the end of the day and then go home. When I pick it back up in the morning new solutions come to...

CSS

html, body, .site, .sitemanager {
    font-family: Arial,Helvetica,sans-serif;
    padding: 0;
    margin: 0;
    height: 100%;
}

.site, .sitemanager {
    width: 50%;
}

.site {
    float: left;
    background: white;
    position: relative;
}

.site iframe {
    position: absolute;
    -webkit-transform: scale(.5, .5);
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
}

.sitemanager {
    overflow-y: scroll;
    float: right;
    box-sizing: border-box;
    padding: 1em 0;
    background: #0394cd;
    color: #fff;
}

.sitemanager h1 {
    padding: 0 16px;
}

.sitemanager > div {
    padding: 1em 1em;
}

.sitemanager > :nth-child(2n) {
    background: rgba(0, 0, 0, .15);
}

.group:before,
.group:after {
    display: table;
    content: '';
    clear: both;
}

.sitemanager label,
.sitemanager input,
.sitemanager textarea,
.sitemanager select {
    display: block;
    width: 100%;
}

.sitemanager input,
.sitemanager textarea {
    color: black;
}

.sitemanager .wysiwyg {
    color: black;
    background: white;
    border:  2px inset;
}

.wysiwyg:before {
    content: 'FAKE WYSIWYG TOOLBAR';
    display: block;
    background: silver;
    height: 32px;
}

.sitemanager .help {
    opacity: .6;
    font-size: .875em;
    font-style: italic;
}

.sitemanager .date {
    float: left;
    width: 48%;
}
.sitemanager .date + .date {
    float: right;
}