JSFiddle - React, Tailwind, and code Playground

HTML

<div class="d2">
<div class="d1">
    aqui é a div 1 com botões:<br/>
    <a href="#">botão 1</a><br/>
    <a href="#">botão 2</a><br/>
</div>
    <div class="conteudo">Cont. D2</div>
    <div class="branco"></div>
    <div class="conteudo">Cont. D2</div>
</div>

CSS

.d1 {
    position: fixed;
    float: left;
    width: 100%;
    height: 300px;
    background-color: #FF0000;
}

.d2 {
    width: 100%;
    height: auto;
}

.conteudo,
.branco {
    display: block;
    float: left;
    width: 100%;
    height: 300px;
    background-color: #ccc;
}

.branco {
    pointer-events: auto;
    background: transparent;
}
.conteudo{
    position:relative;
}
}