JSFiddle - React, Tailwind, and code Playground

by Altemberg Andrade

HTML

<ul class="opcoes">
  <a href="#" onclick="return filtraServico('op01');"><li class="sel">Opção 01</li></a>
  <a href="#" onclick="return filtraServico('op02');"><li>Opção 02</li></a>
  <a href="#" onclick="return filtraServico('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="#" onclick="insertDado();">Agendar</a>
    </li>
    <li class="op01">
        <p class="insert">Opção da Opção 01</p>
        <a href="#" onclick="insertDado();">Agendar</a>
    </li>
    <li class="op01">
        <p class="insert">Opção da Opção 01</p>
        <a href="#" onclick="insertDado();">Agendar</a>
    </li>
    
    <li class="op02">
        <p class="insert">Opção da Opção 02</p>
        <a href="#" onclick="insertDado();">Agendar</a>
    </li>
    <li class="op02">
        <p class="insert">Opção da Opção 02</p>
        <a href="#" onclick="insertDado();">Agendar</a>
    </li>
    <li class="op02">
        <p class="insert">Opção da Opção 02</p>
        <a href="#" onclick="insertDado();">Agendar</a>
    </li>
    
    <li class="op03">
        <p class="insert">Opção da Opção 03</p>
        <a href="#" onclick="insertDado();">Agendar</a>
    </li>
    <li class="op03">
        <p class="insert">Opção da Opção 03</p>
        <a href="#" onclick="insertDado();">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() {

    filtraServico($('#listaServicos li:eq(0)').attr('class'));

    $('.opcoes li').click(function() {
        $('.opcoes li').removeClass('sel');
        $(this).addClass('sel');
    });

    function filtraServico(classe){    
        $('#listaServicos li').hide();
        $('#listaServicos li.' + classe).show();
        return false;
    }
    
    function insertDado() {
        var dado = $('.insert').text();
        //$('#dado').val(dado);
        alert(dado);
    }
    
//});