JSFiddle - React, Tailwind, and code Playground

by Jader Wagner

HTML

<ul class="opcoes">
  <li data-id=".op01" class="sel">Opção 01</li>
  <li data-id=".op02">Opção 02</li>
  <li data-id=".op03">Opção 03</li>
</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 02</p>
        <a href="#" >Agendar</a>
    </li>
    <li class="op01">
        <p class="insert">Opção da Opção 03</p>
        <a href="#" >Agendar</a>
    </li>
    
    <li class="op02">
        <p class="insert">Opção da Opção 04</p>
        <a href="#" >Agendar</a>
    </li>
    <li class="op02">
        <p class="insert">Opção da Opção 05</p>
        <a href="#" >Agendar</a>
    </li>
    <li class="op02">
        <p class="insert">Opção da Opção 06</p>
        <a href="#" >Agendar</a>
    </li>
    
    <li class="op03">
        <p class="insert">Opção da Opção 07</p>
        <a href="#">Agendar</a>
    </li>
    <li class="op03">
        <p class="insert">Opção da Opção 08</p>
        <a href="#" >Agendar</a>
    </li>
    <li class="op03">
        <p class="insert">Opção da Opção 09</p>
        <a href="#">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;
    cursor: pointer;
}
.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').addClass('sel').not($(this)).removeClass('sel');
        $('#listaServicos li').show().not($(this).data('id')).hide();
    });

    $('#listaServicos li a').click(function () {
        $('#dado').val( $(this).siblings('p').text() );
    });

    $('.opcoes .sel').trigger('click');
});