JSFiddle - React, Tailwind, and code Playground

by Suryar Praveen

HTML

The new ePoP Portal shall have the ability to list all MET and Non-MET Articles.

CSS

$gray-color: #ECECEC;
$chevron-action-icon: url(../../../node-assets/images/up-arrow.svg) center no-repeat;

.chevronBar {
  background-color: $gray-color;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;

  .chevronDownIcon {
    background: $chevron-action-icon;
    transform: rotate(180deg);
    width: 2rem;
  }

  .chevronUpIcon {
    background: $chevron-action-icon;
    width: 2rem;
  }
}

.chevron-Container-Maximize {
  overflow: hidden;
  max-height: 9.125rem;
  transition: max-height 2000ms;

  &.chevron-Container-Minimize {
    max-height: 0;
    transition: max-height 500ms;
  }

  .chevron-transition-down {
    transition: transform 2000ms;

    &.chevron-transition-up {
      transform: transform 500ms;
    }
  }
}

.control-height {
  height: 2.4rem;
  outline: none;
}

.placeholder-style,
textarea::placeholder,
input::placeholder {
  color: #B0B0B0;
  font-size: 14px;
}

.order-now {
  vertical-align: bottom;
  margin-top: 1rem;

  button {
    padding: .5rem;
    float: right;
  }
}

.NA-button {
  padding: 0.35rem 1.25rem;
  color: #ffffff;
  background-color: #4a4a4a;
}


.checklist-table {
  thead {
    tr {
      th {
        border-bottom-width: 0;
        text-align: center;
      }
    }
  }

  tbody {
    .row-data {
      td {
        border: none;
      }
    }

    .row-actions {
      .action-buttons {
        border-radius: 0.75rem;
        border: none;
        padding: 0.25rem 1rem;
        cursor: pointer;
      }

      .done-button {
        padding: 0.25rem 1.25rem;

        &:hover,
        &:active {
          cursor: pointer;
          background-color: #2E8B57;

          .icon-check {
            color: #FFFFFF;
          }
        }
      }

      .cancel-button {
        padding: 0.25rem 1.25rem;

        &:hover,
        &:active {
          cursor: pointer;
          background-color: #ea001c;

          .icon-check {
            color: #FFFFFF;
          }
        }
      }


    }
  }
}

JavaScript

this.serviceLists = [{
  departments: 'Appliances',
  classes: [{
      name: 'Compressors and Air Tool',
      subclasses: ['01', '02', '03', '04']
    },
    {
      name: 'Door Locks',
      subclasses: ['01', '02']
    },
    {
      name: 'Circuit Protect',
      subclasses: ['03', '04']
    },
    {
      name: 'Communications',
      subclasses: ['05', '06', '07']
    },
    {
      name: 'Ceiling Fans',
      subclasses: ['08', '09', '10']
    },
  ],
}];


console.log(this.serviceLists[0].classes);