JSFiddle - React, Tailwind, and code Playground

by Simo990

HTML

<div class="wrapper">
    <div class="banner_body"><h1>BANNER TEXT</h1></div>
<div class="banner_folds">
    <div class="banner_fold_left"></div>
    <div class="banner_fold_right"></div>
    <div class="banner_shadow"></div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ullamcorper eros et elit condimentum quis rhoncus velit vulputate. Sed ac magna ut nunc luctus interdum. Maecenas sed justo lacus, nec sodales tortor. Suspendisse accumsan fringilla felis vel lobortis. Duis vulputate libero vitae tortor scelerisque at accumsan eros porta. Phasellus et ipsum est, consequat interdum orci. Nunc fringilla tristique molestie. In pulvinar tempus blandit.
<br/><br/>
Praesent ullamcorper lorem eget lorem euismod commodo. Donec id turpis est, vehicula porttitor nunc. Aenean lobortis fringilla iaculis. Aliquam erat volutpat. In vel erat quis tortor dictum sodales commodo at magna. Nullam at dolor ac eros pellentesque viverra. Fusce ultricies ullamcorper fermentum. Nullam porttitor lectus nec arcu scelerisque lobortis.
<br/><br/>
Suspendisse nec massa lorem. Suspendisse id nunc libero. Mauris nec tristique sapien. Suspendisse vehicula nulla non nibh bibendum dictum. Donec in magna lectus. Integer in nibh sed odio adipiscing gravida at ac nulla. Suspendisse consequat, diam ut malesuada fermentum, orci metus auctor diam, at facilisis ante urna in augue. Aenean malesuada ultricies sapien non vestibulum. Sed accumsan diam at felis consectetur auctor. Etiam vitae quam ac diam lacinia rutrum at eget nisi.
    <br/><br/>
Suspendisse interdum nunc id mi luctus egestas. Integer ipsum purus, porta id pellentesque fermentum, convallis ac metus. Mauris tincidunt tellus vitae nisi lacinia accumsan. Etiam viverra dictum nisl, et semper ipsum pellentesque hendrerit. Vivamus aliquet mollis nisi, vitae laoreet justo consectetur id. Nam vestibulum volutpat justo nec porttitor. Nam et eros eros, ac pulvinar massa.
        <br/><br/>
Phasellus non semper...

CSS

body {
    background-color: #578;
}
h1 {
    text-align: center; 
    font-size: 30px; 
    line-height: 80px; 
    vertical-align: bottom; 
    font-family: 'Arial Black';
    color: #fcc;
}
.wrapper {
    width: 400px;
    margin: 10px auto;
}
.banner_body {
    width: 400px; 
    height: 80px; 
    background-color: #B66;
}
.banner_folds {
    width: 400px; 
    height: 20px;
}
.banner_fold_left {
    width: 0; 
    height: 0; 
    border: 20px solid transparent; 
    border-top: 0; 
    border-right-color: #722; 
    margin-left: -20px; 
    float: left;
}
.banner_fold_right {
    width: 0; 
    height: 0; 
    border: 20px solid transparent; 
    border-top: 0; 
    border-left-color: #722; 
    margin-right: -20px; 
    float: right;
}
.banner_shadow {
    height: 10px; 
    width: 360px; 
    background: #AAA; 
    margin: auto;
}
.content {
    width: 330px; 
    padding: 0px 15px; 
    margin: auto; 
    background-color: #FFF   
}