Wireframe MBP with only html and sass.

index.html

<style>
    body, html {
        height: 100%;
    }
    body {
        background-color: #4baad3;
        font-family: Helvetica Neue, Helvetica, sans-serif;
        color: white;
        -webkit-font-smoothing: antialiased;
    }
    h1 {
        font-size: 40px;
        font-weight: 200;
    }
    .container {
        width: 960px;
        margin: 0 auto;
        text-align: center;
    }
    .container p {
        width: 600px;
        margin: 0 auto 40px;

    }
    .macbook {
        display: inline-block !important;
        margin-right: 20px;
    }
</style>
<link href="macbook.css" rel="stylesheet" type="text/css" media="all">

<div class='container'>
    <h1>CSS-only Wireframe Macbook Pro</h1>
    <p>Scales beautifully, and all you need to change is the width.</p>

    <div class='macbook' style='width: 500px;'>
        <div>
            <div class='macbook-screen'>
                <i></i>
                <div></div>
            </div>
            <div class='macbook-keyboard'>
                <div></div>
            </div>
            <div class='macbook-base'>
            </div>
        </div>
    </div>

    <div class='macbook' style='width: 250px;'>
        <div>
            <div class='macbook-screen'>
                <i></i>
                <div></div>
            </div>
            <div class='macbook-keyboard'>
                <div></div>
            </div>
            <div class='macbook-base'>
            </div>
        </div>
    </div>

    <div class='macbook' style='width: 100px;'>
        <div>
            <div class='macbook-screen'>
                <i></i>
                <div></div>
            </div>
            <div class='macbook-keyboard'>
                <div></div>
            </div>
            <div class='macbook-base'>
            </div>
        </div>
    </div>
</div>

macbook.css

/* line 3, macbook.sass */
.macbook {
  position: relative;
  display: block;
}
/* line 8, macbook.sass */
.macbook:before {
  padding-top: 50%;
  content: "";
  display: block;
}
/* line 13, macbook.sass */
.macbook > div {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
/* line 20, macbook.sass */
.macbook .macbook-screen {
  height: 91%;
  border: 1px solid white;
  border-bottom: none;
  -moz-border-radius-topleft: 6%;
  -webkit-border-top-left-radius: 6%;
  border-top-left-radius: 6%;
  -moz-border-radius-topright: 6%;
  -webkit-border-top-right-radius: 6%;
  border-top-right-radius: 6%;
  margin: 0 10%;
  padding: 3%;
}
/* line 28, macbook.sass */
.macbook .macbook-screen > i {
  display: block;
  width: 1%;
  height: 1.75%;
  border: 1px solid white;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  border-radius: 50px;
  margin: -2.5% auto 1.5%;
}
/* line 36, macbook.sass */
.macbook .macbook-screen > div {
  border: 1px solid white;
  height: 100%;
}
/* line 40, macbook.sass */
.macbook .macbook-keyboard {
  height: 6%;
  border: 1px solid white;
  border-bottom: none;
  -moz-border-radius-topleft: 1px;
  -webkit-border-top-left-radius: 1px;
  border-top-left-radius: 1px;
  -moz-border-radius-topright: 1px;
  -webkit-border-top-right-radius: 1px;
  border-top-right-radius: 1px;
}
/* line 46, macbook.sass */
.macbook .macbook-keyboard > div {
  border: 1px solid white;
  border-top: none;
  height: 40%;
  width: 15%;
  margin: 0 auto;
  -moz-border-radius-bottomleft: 15px;
  -webkit-border-bottom-left-radius: 15px;
  border-bottom-left-radius: 15px;
  -moz-border-radius-bottomright: 15px;
  -webkit-border-bottom-right-radius: 15px;
  border-bottom-right-radius: 15px;
}
/* line 54, macbook.sass */
.macbook .macbook-base {
  height: 3%;
  border: 1px solid white;
  -moz-border-radius-bottomleft: 18px;
  -webkit-border-bottom-left-radius: 18px;
  border-bottom-left-radius: 18px;
  -moz-border-radius-bottomright: 18px;
  -webkit-border-bottom-right-radius: 18px;
  border-bottom-right-radius: 18px;
}

macbook.sass

@import compass/css3/border-radius

.macbook
    // We need this to maintain the ratios.
    position: relative
    display: block

    &:before
        padding-top: 50%
        content: ''
        display: block

    > div
        position: absolute
        top: 0
        right: 0
        bottom: 0
        left: 0

    .macbook-screen
        height: 91%
        border: 1px solid #fff
            bottom: none
        +border-top-radius(6%)
        margin: 0 10%
        padding: 3%

        > i
            display: block
            width: 1%
            height: 1.75%
            border: 1px solid #fff
            +border-radius(50px)
            margin: -2.5% auto 1.5%

        > div
            border: 1px solid #fff
            height: 100%

    .macbook-keyboard
        height: 6%
        border: 1px solid #fff
            bottom: none
        +border-top-radius(1px)

        > div
            border: 1px solid #fff
                top: none
            height: 40%
            width: 15%
            margin: 0 auto
            +border-bottom-radius(15px)

    .macbook-base
        height: 3%
        border: 1px solid #fff
        +border-bottom-radius(18px)