JSFiddle - React, Tailwind, and code Playground

by Eugene Trounev

HTML

<div class="sui-layout">
  <div class="sui-layout-header">
    <div class="sui-layout-header__inner">
      <form role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-labelledby="downshift-0-label">
        <div class="sui-search-box">
          <div class="sui-search-box__wrapper"><input aria-autocomplete="list" aria-labelledby="downshift-0-label" autocomplete="off" id="downshift-0-input" placeholder="Search" class="sui-search-box__text-input " value="pines"></div><input type="submit" class="button sui-search-box__submit" value="Search">
        </div>
      </form>
    </div>
  </div>
  <div class="sui-layout-body">
    <div class="sui-layout-body__inner"><button hidden="" type="button" class="sui-layout-sidebar-toggle">Show Filters</button>
      <div class="sui-layout-sidebar sui-layout-sidebar--toggled"><button hidden="" type="button" class="sui-layout-sidebar-toggle">Save Filters</button>
        <div>
          <div class="sui-sorting">
            <div class="sui-sorting__label">Sort by</div>
            <div class="css-1pcexqc-container sui-select">
              <div class="css-0 sui-select__control">
                <div class="css-1hwfws3 sui-select__value-container sui-select__value-container--has-value">
                  <div class="css-dvua67-singleValue sui-select__single-value">Relevance</div><input id="react-select-2-input" readonly="" tabindex="0" class="css-gj7qu5-dummyInput" value="">
                </div>
                <div class="css-1wy0on6 sui-select__indicators"><span class="css-0 sui-select__indicator-separator"></span>
                  <div aria-hidden="true" class="css-0 sui-select__indicator sui-select__dropdown-indicator"><svg height="20" width="20" viewBox="0 0 20 20" aria-hidden="true" focusable="false" class="css-19bqh2r">
                      <path d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695...

CSS

@import url(../../node_modules/rc-pagination/dist/rc-pagination.min.css);
html {
  box-sizing: border-box; }

*,
*:before,
*:after {
  box-sizing: inherit; }

.sui-layout {
  width: 100%;
  display: flex;
  flex-direction: column; }

/**
 * Header / Searchbox
 */
.sui-layout-header {
  padding: 32px 24px;
  border-bottom: 1px solid #eeeeee; }

/**
 * Body
 */
.sui-layout-body {
  background: #fcfcfc; }
  .sui-layout-body:after {
    content: "";
    height: 80px;
    width: 100%;
    display: block;
    position: relative;
    background: -moz-linear-gradient(top, #fcfcfc 0%, #ffffff 100%);
    background: -webkit-linear-gradient(top, #fcfcfc 0%, #ffffff 100%);
    background: linear-gradient(to bottom, #fcfcfc 0%, #ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ffffff',GradientType=0 ); }
    @media (max-width: 800px) {
      .sui-layout-body:after {
        display: none; } }
  .sui-layout-body__inner {
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    padding: 0 24px; }
    @media (max-width: 800px) {
      .sui-layout-body__inner {
        display: block;
        padding: 0 15px; } }

/**
 * Sidebar / Filters
 */
@keyframes fadein {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.sui-layout-sidebar {
  width: 24%;
  padding: 32px 32px 0 0; }
  @media (max-width: 975px) {
    .sui-layout-sidebar {
      padding-right: 0; } }
  @media (max-width: 800px) {
    .sui-layout-sidebar {
      z-index: 99;
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0 15px 30px 15px;
      background-color: #fcfcfc;
      overflow: auto; } }
  .sui-layout-sidebar--toggled {
    display: block;
    animation: fadein 0.2s ease-out; }

@media (max-width: 800px) {
  .sui-layout-sidebar-toggle {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 10px;
   ...