JSFiddle - React, Tailwind, and code Playground

by Julien Etienne

HTML

<div id="paper">
    <div class="line">
        .

        <div class="blueline"></div>
    </div>

    <div class="line">
        .

        <div class="blueline"></div>
    </div>

    <div class="line">
        .

        <div class="blueline"></div>
    </div>

    <div class="line">
        .

        <div class="blueline"></div>
    </div>

    <div class="line">
        .

        <div class="blueline"></div>
    </div>

    <div class="line">
        .

        <div class="blueline"></div>
    </div>

    <div class="line">
        .

        <div class="blueline"></div>
    </div>

    <div class="line">
        .

        <div class="blueline"></div>
    </div>

    <div class="line">
        .

        <div class="blueline"></div>
    </div>

    <div class="line">
        .

        <div class="blueline"></div>
    </div>

    <div class="line">
        .

        <div class="blueline"></div>
    </div>

    <div class="line">
        .

        <div class="blueline"></div>
    </div>

    <div class="line">
        .

        <div class="blueline"></div>
    </div>

    <div class="line">
        .

        <div class="blueline"></div>
    </div>

    <div class="line">
        .

        <div class="blueline"></div>
    </div>

    <div class="line">
        .

        <div class="blueline"></div>
    </div>

    <div class="line">
        .

        <div class="blueline"></div>
    </div>

    <div class="line">
        .

        <div class="blueline"></div>
    </div>

    <div class="line">
        .

        <div class="blueline"></div>
    </div>

    <div class="line">
        .

        <div class="blueline"></div>
    </div>

    <div class="line">
        .

        <div class="blueline"></div>
    </div>

    <div class="margin"></div>
</div>

<div id="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed
    libero quis mauris ultricies tincidunt. Donec semper elit vitae tellus
    semper et faucibus purus...

CSS

body {
    background:#d3d3d3
}

#paper {
    top:0;
    z-index:0;
    position:absolute;
    width:100%;
    background:#fff;
    overflow:hidden;
    -webkit-box-shadow:0 0 20px 10px #000;
    -moz-box-shadow:0 0 20px 10px #000;
    box-shadow:0 0 20px 10px #000
}

.blueline {
    width:100%;
    height:2px;
    background:#add8e6;
    position:absolute;
    top:auto;
    bottom:0
}

.line {
    width:100%;
    background:#fff;
    position:relative;
    float:left;
    color:#fff
}

#content {
    background:;
    width:100%;
    height:auto;
    top:0;
    z-index:100;
    position:absolute
}

#content p {
    line-height:2em;
    padding:2.5em 3em 0 4em
}

.margin {
    width:2px;
    height:100%;
    background:red;
    position:absolute;
    z-index:2;
    left:3.5em;
    opacity:.7
}

JavaScript

//jquery
var lineHeight = $('#content p').css('line-height');
$('.line').css({
    height: lineHeight
}, 0);
var x = $('#content').height();
$('#paper').css('height', x + 40 + "px");