JSFiddle - React, Tailwind, and code Playground

by Alexandr Zawgorodniy

HTML

<div><table class="option">
  <tr>
    <td class="empty"></td>
  </tr>
    <tr>
    <td>Розовый фильтр</td>
  </tr>
    <tr>
    <td>Смайлики</td>
  </tr>
  <tr>
    <td>Комментарии</td>
  </tr>
</table>
</div><div>
<div><table>
  <tr>
    <td>База</td>
  </tr>
  <tr>
    <td><span>Розовый фильтр</span>+</td>
  </tr>
    <tr>
    <td><span>Смайлики</span>-</td>
  </tr>
    <tr>
    <td><span>Комментарии</span>-</td>
  </tr>
</table>
</div><div>
<table>
  <tr>
    <td>Стандарт</td>
  </tr>
  <tr>
    <td><span>Розовый фильтр</span>+</td>
  </tr>
  <tr>
    <td><span>Смайлики</span>+</td>
  </tr>
    <tr>
    <td><span>Комментарии</span>-</td>
  </tr>
</table>
</div><div>
<table>
  <tr>
    <td>Анлим</td>
  </tr>
  <tr>
    <td><span>Розовый фильтр</span>+</td>
  </tr>
  <tr>
    <td><span>Смайлики</span>+</td>
  </tr>
    <tr>
    <td><span>Комментарии</span>+</td>
  </tr>
</table>
</div>

CSS

div{display: inline-block}
.empty{display:none}
table{border-collapse:collapse;
}
td{border:1px solid grey;min-width: 100px;}
span{display:none}

@media screen and (max-width:550px) {
span{display:inline-block}
.option{display:none}
div{display:block;margin-bottom: 20px;}

}