JSFiddle - React, Tailwind, and code Playground

by yoshidamimi

HTML

<!DOCTYPE html>
<body>

<ul class="filters clearfix"><!--filters-->
<li class="ui-group boxs08 clearfix"><!--ui-group-->
<a href="#" class="cate">Color</a>
<ul class="button-group js-radio-button-group clearfix" data-filter-group="color">
<!--button-group-->
      <li class="button is-checked" data-filter="">Any</li>
      <li class="button" data-filter=".color">カラー</li>
      <li class="button" data-filter=".font">フォント</li>
      <li class="button" data-filter=".layout">レイアウト</li>
	  <li class="button" data-filter=".info">情報</li>
	  <li class="button" data-filter=".sozai">素材</li>
	  <li class="button" data-filter=".design">デザイン</li>
      <li class="button" data-filter=".etc">その他</li>

</ul><!--button-group〆-->
</li><!--ui-group〆-->
</ul><!--filters〆-->

<ul class="filters clearfix"><!--filters-->
<li class="ui-group boxs08 clearfix"><!--ui-group-->
<a href="#" class="cate">Color</a>
<ul class="button-group js-radio-button-group clearfix" data-filter-group="color">
<!--button-group-->
      <li class="button is-checked" data-filter="">Any</li>
      <li class="button" data-filter=".color">カラー</li>
      <li class="button" data-filter=".font">フォント</li>
      <li class="button" data-filter=".layout">レイアウト</li>
	  <li class="button" data-filter=".info">情報</li>
	  <li class="button" data-filter=".sozai">素材</li>
	  <li class="button" data-filter=".design">デザイン</li>
      <li class="button" data-filter=".etc">その他</li>

</ul><!--button-group〆-->
</li><!--ui-group〆-->
</ul><!--filters〆-->

<ul class="filters clearfix"><!--filters-->
<li class="ui-group boxs08 clearfix"><!--ui-group-->
<a href="#" class="cate">Color</a>
<ul class="button-group js-radio-button-group clearfix" data-filter-group="color">
<!--button-group-->
      <li class="button is-checked" data-filter="">Any</li>
      <li class="button" data-filter=".color">カラー</li>
      <li class="button" data-filter=".font">フォント</li>
      <li class="button" data-filter=".layout">レイアウト</li>
	  <li class="button"...

CSS

body{ background: lightgray;width: 80%;}

li {list-style: none;}
a{text-decoration: none;}

.filters {
  margin: 0% 0% 1rem 0%;
  height:2rem;
  margin-bottom: 0.5rem}

.filters .ui-group {
  width: 100%;
  height:100%;
  text-align: center;
  margin-bottom: 0.5rem;
}

.filters .ui-group a.cate{
  float: none;
  display: block;
  position: relative;
  width: 20%;
  background: #8a8a8a;
  border-radius: 0.3rem 0 0 0.3rem;
  font-size: 0.85rem;
  height: 100%;
  margin: 0 0.5%;
  line-height: 2rem;
  color: white;}

.filters .ui-group .button-group {
    width: 80%;
    margin-top: -2rem;
    cursor: pointer;
display: block;
float: right;
height: 100%;}

.filters .ui-group .button-group .button.is-checked {
    background-color: #00b3c8;
  color: white;}

.button-group li.button {
  position: relative;
  border-bottom: 1px solid gray;
  color: #4c4c4c;
  text-align: center;
  text-decoration: none;
  height: 2rem;
  border-radius: 0;
  font-size: 0.8rem;
  margin: 0 0.5%;
  line-height: 2rem;
  background-color: white;}

.button-group li.button:last-child {
    border-bottom: none;}
  .grid{text-align:center}

JavaScript

$(function() {
$("li.button:not(.is-checked)").hide();
$("ul.button-group").click(function() {$("li",this).show();});
});

// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
  var $buttonGroup = $( buttonGroup );
  $buttonGroup.on( 'click', 'li', function() {
    $buttonGroup.find('.is-checked').removeClass('is-checked');
    $( this ).addClass('is-checked');
  });
});