JSFiddle - React, Tailwind, and code Playground

by nate

HTML

<div id="building">
    <div class="window">
        <div class="shade"></div>
        <div class="content"></div>
        <div class="sill"></div>
    </div>
    <div class="window">
        <div class="shade"></div>
        <div class="content"></div>
        <div class="sill"></div>
    </div>
    <div class="window">
        <div class="shade"></div>
        <div class="content"></div>
        <div class="sill"></div>
    </div>
    <div class="window">
        <div class="shade"></div>
        <div class="content"></div>
        <div class="sill"></div>
    </div>
</div>

CSS

#building {
    background-color: #a0645c;
    background-image: url( http://images.pombs.com/bricks.png );
    border-top: 10px solid #333;
    height: 1000px;
    margin: 100px auto 0;
    width: 500px;
}

.window {
    background-color: white;
    background-image: url( http://images.pombs.com/window-crossbars.png );
    background-position: 50% 50%;
    border: 4px solid #333;
    border-radius: 35px 35px 0 0;
    float: left;
    height: 100px;
    margin: 10px;
    width: 50px;
}

.shade {
    height: 100px;
    position: absolute;
    width: 50px;
}