JSFiddle - React, Tailwind, and code Playground

HTML5 logo made with CSS3

by Jennifer Perrin

HTML

<h1>HTML</h1>
<div id="wrapper">
        
    <div id="five">

        <div class="top"></div>
        <div class="left-top"></div>
        <div class="middle"></div>
        <div class="right"></div>
        <div class="bottom"></div>
        <div class="left-bottom"></div>      
    </div>

    <div class="inner"></div>
    <div class="inner left"></div>

    <div class="inner left cover"></div>    
</div>

CSS

h1
    {
        font: bold 90px 'arial black';
        margin: 20px 0 0 0;
        text-align: center;
    }
    
    p
    {
        text-align: center;
    }
    
    /**/
    
    #wrapper
    {
        position: relative;
        width: 340px;
        margin: 10px auto 30px auto;
    }
    
    /**/
    
    #five
    {
        position: absolute; 
        z-index: 1;
        top: 0;
    }
    
    #five div,  #five div:after
    {
        position: absolute;
        background: #fff;
    }    
    
    #five .left-top
    {
        width: 40px;
        height: 130px;
        top: 72px;
        left: 70px;
        -webkit-transform: skew(5deg);
        -moz-transform: skew(5deg);
        -o-transform: skew(5deg);
        -ms-transform: skew(5deg);
        transform: skew(5deg);        
    }
    
    #five .top
    {
        width: 90px;
        height: 40px;        
        top: 72px;
        left: 80px;
    }
    
    #five .top:after
    {
        content: '';        
        left: 85px;
        top: 0;
        height: 40px;        
        width: 110px;
        -moz-transform: skew(-5deg);
        -webkit-transform: skew(-5deg);
        -o-transform: skew(-5deg);
        -ms-transform: skew(-5deg);        
        transform: skew(-5deg);
    }
    
    #five .middle
    {
        width: 96px;
        height: 40px;
        top: 162px;
        left: 75px;
    }
    
    #five .middle:after
    {    
        content: '';        
        top: 0;
        left: 96px;
        width: 80px;
        height: 40px;        
    }
    
    #five .right
    {
        left: 225px;
        top: 162px;
        height: 125px;        
        width: 40px;
        -moz-transform: skew(-5deg);
        -webkit-transform: skew(-5deg);
        -o-transform: skew(-5deg);
        -ms-transform: skew(-5deg);    
        transform: skew(-5deg);            
    }
    
    #five .bottom
    {    
        width: 90px;
        height: 40px;
        top: 260px;
        left: 87px;
      ...