JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="opcoes">
  <a href="#" data-classe="op01"><li class="sel">Opção 01</li></a>
  <a href="#" data-classe="op02"><li>Opção 02</li></a>
  <a href="#" data-classe="op03"><li>Opção 03</li></a>
</ul>

<div class="conteudo">
  <ul id="listaServicos">
    <li class="op01">
        <p class="insert">Opção da Opção 01</p>
        <a href="#" >Agendar</a>
    </li>
    <li class="op01">
        <p class="insert">Opção da Opção 01</p>
        <a href="#" >Agendar</a>
    </li>
    <li class="op01">
        <p class="insert">Opção da Opção 01</p>
        <a href="#" >Agendar</a>
    </li>
    
    <li class="op02">
        <p class="insert">Opção da Opção 02</p>
        <a href="#" >Agendar</a>
    </li>
    <li class="op02">
        <p class="insert">Opção da Opção 02</p>
        <a href="#" >Agendar</a>
    </li>
    <li class="op02">
        <p class="insert">Opção da Opção 02</p>
        <a href="#" >Agendar</a>
    </li>
    
    <li class="op03">
        <p class="insert">Opção da Opção 03</p>
        <a href="#">Agendar</a>
    </li>
    <li class="op03">
        <p class="insert">Opção da Opção 03</p>
        <a href="#" >Agendar</a>
    </li>
    <li class="op03">
        <p class="insert">Opção da Opção 03</p>
        <a href="#" onclick="insertDado();">Agendar</a>
    </li>
  </ul>
</div>

<hr />
<p>Conteúdo da <b>li</b> será colocado aqui:</p>
<input type="text" name="dado" id="dado" />

CSS

body {
  font-family: Arial;
  margin: 0;
}

a, a:hover, a:active { text-decoration: none; color: #fff; }

.opcoes {
  list-style: none;
  margin: 0; padding: 0 40px;
  background: #4682B4;
  color: #FFFFFF;
}

.opcoes li {
  display: inline-block;
  padding: 10px 15px;
}

.opcoes li.sel {
  border-bottom: 4px solid #1d324a;
}

.conteudo {
  background: #ececec;
}

.conteudo ul {
  margin: 0; padding: 0;
  list-style: none;
}

.conteudo ul li {
  padding: 10px 40px;
}

.conteudo ul li:nth-child(2n+0) {
  background: #fff;
}

.conteudo p { margin:0; padding:0; }


.conteudo li a {
    color: #fff;
    float: right;
    margin: -24px 0 0 0; padding: 5px 8px;
    background: #4682B4;
    border-radius: 3px;
}

JavaScript

$(document).ready(function() {

    $('.opcoes li').click(function() {
        $('.opcoes li').removeClass('sel');
        $(this).addClass('sel');
    });
    $('#listaServicos li a').click(function() {
        var dado = $(this).parent().find('p').text();
        $('#dado').val(dado);
        alert(dado);
    });

    // Substitui filtraServico
    $(".opcoes a").click(function() {
        var classe = $(this).data("classe");
        $('#listaServicos li').hide();
        $('#listaServicos li.' + classe).show();
        return false;
    }).eq(0).click(); // Simula um clique na primeira opção
    
});