JSFiddle - React, Tailwind, and code Playground

by jcubed111

HTML

<div class='main'>
    <h2>This is a title!</h2>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facilisis leo sed nisi varius condimentum. Aenean sit amet lacus sed urna sagittis porttitor. Suspendisse non justo et lorem accumsan fringilla. Etiam justo lectus, accumsan non blandit id, lobortis at ipsum. Nam varius velit ut est lobortis eu luctus felis vestibulum. Aenean pulvinar velit at dui bibendum faucibus. Donec bibendum vestibulum tempus. Ut egestas, urna quis rhoncus adipiscing, erat justo mollis est, et rhoncus neque sem sed magna. Cras pharetra est vel dolor posuere non ultricies velit sagittis. Proin et metus vitae urna vulputate ornare. In blandit odio at orci ornare consequat. Nam vel vehicula urna. Nulla quis leo vel mi condimentum convallis eget id lorem. Phasellus eu dolor urna. Vivamus sagittis malesuada pharetra.
    </p>
    <h2>And some more text!</h2>
    <p>
        Pellentesque eleifend rutrum dui, ac tristique felis scelerisque eu. Maecenas et augue dolor, sed luctus dui. In lobortis magna nisl. Aenean feugiat dolor quis est convallis molestie. Phasellus feugiat, quam sit amet rutrum consectetur, sapien turpis euismod elit, vitae hendrerit est sapien vitae neque. Ut sit amet porta magna. Duis tellus est, vehicula in iaculis ac, elementum a ante. In egestas mauris quis nibh fringilla commodo. Fusce vestibulum venenatis libero, non ultricies eros volutpat ut. Donec feugiat lobortis lectus nec laoreet. In at posuere mauris. Sed quam enim, vulputate eu lobortis posuere, ornare sit amet neque.
    </p>
</div>

CSS

body{
    background:#ddd;
    margin:0;
    padding:0;
}

.main{
    margin:0 50px;
    background:#f5f5f5;
    padding:15px 0;
}

h2{
    position:relative;
    height:30px;
    padding:5px;
    margin:20px 65px 10px -15px;
    background:#c20000;
    padding-left:30px;
    font-size:25px;
    font-weight:bold;
    color:#600;
    text-shadow:1px 1px 0 #e00;
}

h2:before{
    content:"";
    display:block;
    position:absolute;
    top:40px;
    left:0;
    border-width:0 15px 8px 0;
    border-style:solid;
    border-color:transparent #700 transparent transparent;
    height:0;
    width:0;
}

h2:after{
    content:"";
    display:block;
    position:absolute;
    top:0;
    right:-40px;
    border-width:20px 40px 20px 0;
    border-style:solid;
    border-color:#c20000 transparent #c20000 transparent;
    height:0;
    width:0;
}

p{
    color:#111;
    margin:10px 15px
}

JavaScript

/*CSS title banners*/