JSFiddle - React, Tailwind, and code Playground

HTML

<div id="designWrapper">
                    <div id="design">
                        <div id="redStripes">
                            <div class="redStripeWrapper" id="redStripeWrapper1">
                                <div class="redStripe" id="red1">
                                    red1
                                </div>
                            </div>
                            <div class="redStripeWrapper" id="redStripeWrapper2">
                                <div class="redStripe" id="red2">
                                    red2
                                </div>
                            </div>
                            <div class="redStripeWrapper" id="redStripeWrapper3">
                                <div class="redStripe" id="red3">
                                    red3
                                </div>
                            </div>
                            <div class="redStripeWrapper" id="redStripeWrapper4">
                                <div class="redStripe" id="red4">
                                    red4
                                </div>
                            </div>
                            <div class="redStripeWrapper" id="redStripeWrapper5">
                                <div class="redStripe" id="red5">
                                    red5
                                </div>
                            </div>
                            <div class="redStripeWrapper" id="redStripeWrapper6">
                                <div class="redStripe" id="red6">
                                    red6
                                </div>
                            </div>
                        </div>
                        <div id="triangleWrapper">
                            <div id="triangle">
                            </div>
                        </div>
                    </div>
                </div>

CSS

body{
  margin: 0;
  
  background-color: #ffffff;
}

#design{
    width: 100%;
    height: 100%;
}

#designWrapper{
    width: 60vw;
    height: 100%;

    float: right;

    position: relative;
}

#redStripes{
    position: static;

    z-index: -1;
}

.redStripe{
    margin-bottom: 20px;

    background-color: #e83c3c;

    transform: rotate(25deg);

    width: 2000px;
    height: 50px;

    position: relative;
    left: -200px;

    z-index: 2;
}

#triangle{
    border-bottom: 40vw solid #ceecec;
    border-left: 40vw solid #ffffff;
}

#triangleWrapper{
    position: absolute;
    bottom: 0px;
    right: 0px;
}
.redStripeWrapper{
    position: relative;
    top: 50px;
}