JSFiddle - React, Tailwind, and code Playground

by mrnobody

HTML

<div class="holder-sections">
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
</div>
<div class="holder-sections">
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
</div>

CSS

body {
    margin:
        0;
}
.holder-sections {
    position: relative;
    background: linear-gradient(to top left, #fff calc(50% - 25px), #F1BEBD calc(50% - 25px), #F1BEBD calc(50% + 25px), #fff calc(50% + 25px));
}
.holder-sections:nth-child(even) {
    background: linear-gradient(to top right, #fff calc(50% - 25px), #F1BEBD calc(50% - 25px), #F1BEBD calc(50% + 25px), #fff calc(50% + 25px));
}
.section {
    position: relative;
    height: 100vh;
    mix-blend-mode: luminosity;
}
.section:nth-child(1) {
    /* фон прозрачный*/
}
.section:nth-child(2) {
    background-color: #FCFCFC;
}
.section:nth-child(3) {
    background-image: radial-gradient(#685e69, #433944);
}