JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<div id="wrap">

        <header roll="banner">
            <h1><a href="#" class="head"></a></h1>
        </header><!-- /banner -->
    
        <ul id="subscribe">
            <li><a id="rss" href="#">rss</a></li>
            <li><a id="email" href="#">email</a></li>
            <li><a id="twitter" href="#">twitter</a></li>
            <li><a id="facebook" href="#">facebook</a></li>
        </ul>
        
    <div id="content">
    </div><!-- /content -->

</div><!-- /wrap -->

CSS

* { margin: 0; padding: 0; }

body { background: #efefef; }

#wrap { 
    width: 978px;
    margin: 0px auto;
    position: relative;
    }

header[roll="banner"] { 
    width: 894px;
    height: 200px;
    background: #fff;
    margin: 54px 0;
    position: relative;
    }

header[roll="banner"]:after {    
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 100px solid transparent;
    border-left: 100px solid transparent;
    border-bottom: 100px solid #efefef;
    border-right: 100px solid #efefef;
    }
    
#content { 
    height: 700px;
    width: 978px;
    margin: 0 auto;
    background: #fff;
    position: relative;
    }

#content:after {
    content: "";
    position: absolute;
    top: -252px;
    right: 0;
    width: 0;
    height: 0;
    border-top: 126px solid transparent;
    border-left: 126px solid transparent;
    border-bottom: 126px solid #fff;
    border-right: 126px solid #fff;    
    }

#subscribe {
    position: absolute;
    top: 0px;
    right: 0;
    width: 138px;
    height: 138px;
    background: #efefef;    
    z-index: 2;
    }

#subscribe li { 
    list-style-type: none;
    text-align: center;
    }

#subscribe li a { 
    margin: 0px 15px 8px 15px; 
    text-decoration: none;
    width: 108px;     
    display: block; 
    padding: 4px; 
    color: white;
    }
    
#rss { 
    background: #e36115; 
    }
    
    
#email { 
    background: #717273; 
    }
    
    
#twitter { 
    background: #4AD2FF; 
    }
    
    
#facebook { 
    background: #3B5998; 
    }