JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<section>

    <div class="totall">
        <div class="barraesquerda">

            <button class="divbotao" id="showit">
                <span href="#" class="innerButton">
                    sobre o projeto
                </span>
            </button>

            <button class="divbotao" id="showit2">
                <span href="#" class="innerButton">
                    equipa e intervenientes
                </span>
            </button>

        </div>

        <div class="resto">

            <h3
                style="font-family: 'Merriweather Sans', sans-serif; font-size: 30px; margin-bottom: 20px; color:#333f50; padding-top: 60px; padding-left: 50px;">
                Sobre o projeto
            </h3>

            <h5
                style="font-family: 'Arial Narrow, sans-serif'; font-size: 17px; padding-right: 200px; color:#060633; padding-left: 50px; padding-bottom: 45px;">
                <b>duis a mollis urna. In hac habitasse platea dictumst. Vestibulum nisi nunc, elementum et vehicula
                    vel, rhoncus non metus.
                    In vel dapibus dolor. Sed at laoreet turpis. Donec nec aliquam velit. Quisque blandit nisi
                    mauris.</b>
            </h5>
        </div>

        <div class="resto2" style="display: none;">

            <h3
                style="font-family: 'Merriweather Sans', sans-serif; font-size: 30px; margin-bottom: 20px; color:#333f50; padding-top: 60px; padding-left: 50px;">
                Equipa e intervenientes
            </h3>

            <div style="font-family: 'Arial Narrow, sans-serif'; font-size: 17px; padding-right: 200px; color:#060633; padding-left: 50px;  padding-bottom: 20px;">

                <section class="product_section layout_padding">
                    <div style="padding-top: 20px;">
                        <div class="container">
                            <div...

CSS

footer {
    background: #333F50;
    padding: 90px 0 70px;
}
.totall { width:100%; height: 700px;}

.barraesquerda { background-color: #dbdee1; float: left; width: 22%; height: 100%; position: relative;}

.image { position: relative; margin-right: 1.4rem; margin-bottom: 3rem; color: white; z-index:1; display: flex; justify-content: center;}
                          
.image::after{ content:""; position:absolute; background: linear-gradient(0deg,        rgba(39,38,42,1) 0%, rgba(255,255,255,0)     60%); z-index:2; height:100%; width:100%; top:0; left:0;}