JSFiddle - React, Tailwind, and code Playground

by Chun

HTML

<script>
  var selected="news1";
  var disp="feedResume1";
  function show(a,b)
  {
    document.getElementById(selected).setAttribute(
      "style", "background-color:#000; color:#fff;");
    document.getElementById(disp).style.display = "none";

    document.getElementById(a).setAttribute(
      "style", "background-color:#fff; color:#808080;");

    document.getElementById(b).style.display = "block";
    selected=a;
    disp=b;
  }
</script>

<div id="noticiacolunamenu">
  <ul class="ulcoluna">
    <li id='news1' onclick="show('news1','feedResume1');">Últimas</li>
    <li id='news2' onclick="show('news2','feedResume2');">Lidas</li>
    <li id='news3' onclick="show('news3','feedResume3');">Comentadas </li>
  </ul>
</div>

<section id="feedResume1" class="resultadosFeed">
  <div class="conteudo">
    <div class="noticiacoluna">
      <span class="horacoluna">11:23</span>

      <span class="barra"> | </span>
      <span class="categoriacoluna">Fc Porto </span>
      <span class="titulo"> Ausência de oi Martins Indi no regresso do Sérgio Oliveira</span>
    </div>

    <div class="noticiacoluna margem">
      <span class="horacoluna"> 11:39</span>
      <span class="barra"> | </span>
      <span class="categoriacoluna">Selecções</span>
      <span class="titulo">Todos disponíveis antes da viagem para a Rússia</span>

    </div>
    <div class="noticiacoluna margem">
      <span class="horacoluna"> 11:11</span>
      <span class="barra"> | </span>
      <span class="categoriacoluna">RealMadrid</span>
      <span class="titulo">Carlo Ancelotti «O meu despedimento do Real Madrid não foi correcto»</span>

    </div>
    <div class="noticiacoluna margem">
      <span class="horacoluna"> 11:39</span>
      <span class="barra"> | </span>
      <span class="categoriacoluna">Internacional</span>
      <span class="titulo">FIFA: Platini critica lentidão do comité de recurso</span>


    </div>
    <div class="noticiacoluna margem">
      <span class="horacoluna">...

CSS

#feedResume2 {display: none;}
#feedResume3 {display: none;}
.resultadosFeed{
  position:relative;
  bottom:1px;
  width:100%;
  min-height:30px;
  background-color:rgb(200,200,200);
}
.ulcoluna {
  background-color: #000;
  margin: 0;
  padding: 3px;
}
ul.ulcoluna li {
  display: inline-block;
  color: #fff;
  padding: 3px 5px;
  cursor:pointer;
}
ul.ulcoluna li:first-child {
  background-color:#fff;
  color: #808080;
}