JSFiddle - React, Tailwind, and code Playground

by Shashank D

CSS

body,
            html,
            h1 {
                margin: 0;
                padding: 0;
            }

            body {
                font-family: sans-serif;
                font-size: 100%;
            }
            .zig-content{
                background: #ec173a;
                opacity: 0.5
            }
            .h-zigzag {
                /* Horizontal */
                background: linear-gradient(-135deg, #333538 5px, transparent 0)
                        0 5px,
                    linear-gradient(135deg, #333538 5px, #fff 0) 0 5px;
                background-color: #333538;
                background-position: left bottom;
                background-repeat: repeat-x;
                background-size: 10px 10px;
            }

            .v-zigzag {
                /* Vertical */
                background: linear-gradient(45deg, #ec173a 5px, transparent 0) 0
                        5px,
                    linear-gradient(135deg, #ec173a 5px, #fff 0) 0 5px;
                background-color: #ec173a;
                background-position: right top;
                background-repeat: repeat-y;
                background-size: 10px 10px;
            }

            /* Additional rules to enhance visualization */
            .h-zigzag,
            .v-zigzag {
                color: #fff;
                margin-bottom: 5%;
                padding: 0.5em;
            }

            .v-zigzag {
                padding: 3em 0.5em;
                width: 40%;
            }