JSFiddle - React, Tailwind, and code Playground

by Sampath_Madhuranga

HTML

<section style="background-color:gray; padding: 5px 5px 15px;">
        <p>section</p>
    </section>
    <section class="diagonal">
      <div class="content">
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
      </div>
    </section>
    <section class="diagonal" style="background-color:black;">
    <div class="content">
        <img src="#">
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
      </div>
    </section>
    <footer class="diagonal" style="background-color:gray;">
    <div class="content">
        <p>Footer</p> 
      </div>   
    </footer>

CSS

body {
        
        margin: 0px;
    }
    p {
        color: white;
        margin-top: 5px;
    }
    section {
        position: relative;
        background: blue;
        color: #fff;
        text-align: center;
    }
    .diagonal {
       text-align: center;
        -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
    }
    .content {
          -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
    }
    section:before {
        position: absolute;
        content:'';
    }
    section.diagonal {
        background: blue;
    }
    footer {
        position: relative;
        background: black;
        color: #fff;
        text-align: center;
    }
    footer:before {
        position: absolute;
        content:'';
    }
    footer.diagonal {
        background: black;
    }
    .diagonal {
        z-index: 1;
        padding: 3em;
    }
    .diagonal:before {
        -webkit-transform: rotate(-3deg);
        transform: rotate(-3deg);
        -webkit-transform-origin: -3% 0;
        transform-origin: -3% 0;
        top: 0;
        left: -25%;
        z-index: -1;
        width: 150%;
        height: 75%;
        background: inherit;
    }