JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<div
  class="tabs" 
  :scope="{
    selected: localStorage.getItem('tab') ?? 'popular',
    select: v => localStorage.setItem('tab', selected = v),
  }"
>
  <div class="tabs_nav">
    <div
      class="tabs_item"
      :onclick="select('popular')"
    >Popular</div>
    <div
      class="tabs_item"
      :onclick="select('recent')"
    >Recent</div>
  </div>

  <div
    class="tabs__tab"
    :if="selected === 'popular'"
  >
    Popular contents...
  </div>

  <div
    class="tabs__tab"
    :if="selected === 'recent'"
  >
    Recent contents...
  </div>
</div>

<script src="//unpkg.com/sprae" data-start></script>