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">
    </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>
        <textarea name="" id="" cols="30" rows="10"></textarea>
    </div>
    <div class="tags">
        <label for="">Blog Tags:</label>
        <ul>
            <li>social media</li>
            <li>strategy</li>
        </ul>
        <select name="" id="">
            <option value="">Select...</option>
        </select>
        <a href="#">Add a Blog Tag</a>
    </div>
    <div class="select">
        <label for="">Status:</label>
        <select name="" id="">
            <option value="">Active</option>
            <option value="">Inactive</option>
        </select>
    </div>
    <div class="dates">
        <label for="">Publication Date &amp; Time:</label>
        <div class="group">
            <input type="text" class="date">
            <input type="text" class="date">
        </div>
        <p class="help">
            If saved as Inactive, publication will happen on the quarter hour equal to or greater than the specified time.
        </p>
    </div>
    <div class="actions">
        <button>Save</button>
   ...

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 .help {
    opacity: .6;
    font-size: .875em;
    font-style: italic;
}

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