JSFiddle - React, Tailwind, and code Playground

by Taufik Nurrohman

HTML

<div id="outer">
    <div id="page-wrap">
        <!-- content here -->
    </div>
    <div id="half-ribbon">
         <div class="inner">Lorem Ipsum</div>
    </div>
</div>

CSS

body {text-align:center;}

#outer {
 width:100%;
 position:relative;   
}

#page-wrap {
 width:370px;
 height:1000px;
 background-color:pink;
 margin:0px auto 0px;   
}

#half-ribbon {
 position:absolute;
 top:30px;
 left:50%;
 width:50%;
 background-color:black;   
}


/* CSS Box-Model: Padding akan menyimpangkan nilai 'width:50%' pada elemen #half-ribbon, Saya harus menambahkan ekstra elemen di dalamnya agar Anda bisa mengatur nilai padding tanpa harus mempengaruhi elemen induknya yaitu  #half-ribbon */
#half-ribbon .inner {
 text-align:left;
 padding:10px 15px;
 color:white;
 font:bold 14px Georgia,Serif;   
}

JavaScript

// Half Ribbon Layout