JSFiddle - React, Tailwind, and code Playground

HTML

<div class="about-btn-bar">
            <div class="about-btn-diane"><a class="diane" href="#">Diane</a></div>
            <div class="about-btn-juli"><a class="juli"  href="#">Juli</a></div>
            <div class="about-btn-stephanie"><a class="stephanie"  href="#">Stephanie</a></div>
        </div>
        <div class="bios-wrapper">
            <div class="about-diane diane">
                    <img width="160" height="180" src="images/diane.jpg">
                    <p class="bio">Diane's bio here.</p>    
            </div>
            <div class="about-juli juli">
                    <img src="images/juli.jpg">
                    <p class="bio">Juli bio here.</p>   
            </div>

            <div class="about-stephanie stephanie">
                    <img src="images/stephanie.jpg">
                    <p class="bio">Stephanie bio here.</p>
            </div>

CSS

.bios-wrapper div{
    position: absolute;
    padding-bottom: 75px;
    width:100%;
    overflow: hidden;
    display: none;
    left:0px;
    top:80px;
    background: lightgray;
}

JavaScript

$('.about-btn-bar').on('click', 'a', function (event) {
    event.preventDefault();
    var $myClass = $('.'+$(this).attr('class'));
    
    $('.bios-wrapper div').hide();
    $myClass.slideDown('fast');
});