JSFiddle - React, Tailwind, and code Playground

by doctor23

HTML

<section class="basket">
    <div class="container">
        <h1 class="basket-title">
            Корзина
        </h1>
        <div class="basket-wrapper">
            <div class="basket-list">
                <div class="basket-list__inf">
                    <div class="inf-form_wrapper">
                        <form id="basket-search">
                            <input id="search-input" type="search" name="search_by_basket" placeholder="Поиск по корзине">

                            <svg class="svg-ico ico-search" width="22" height="22" viewBox="0 0 22 22" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                      d="M20.5662 20.6196C20.4458 20.7402 20.3028 20.8359 20.1454 20.9011C19.9879 20.9664 19.8192 21 19.6488 21C19.4783 21 19.3096 20.9664 19.1521 20.9011C18.9947 20.8359 18.8517 20.7402 18.7313 20.6196L14.8715 16.7598C13.2884 17.9181 11.3611 18.509 9.40089 18.4369C7.44065 18.3648 5.56194 17.634 4.06825 16.3625C2.57457 15.091 1.55312 13.3531 1.16893 11.4296C0.784734 9.50597 1.06023 7.50905 1.9509 5.76135C2.84158 4.01365 4.29541 2.61723 6.07757 1.79768C7.85973 0.978135 9.86613 0.783307 11.7727 1.24467C13.6792 1.70604 15.3746 2.79665 16.5848 4.34034C17.7951 5.88403 18.4497 7.79065 18.4427 9.75221C18.4382 11.6195 17.831 13.4354 16.7114 14.9298L20.5712 18.7896C20.8126 19.0333 20.9476 19.3627 20.9467 19.7056C20.9457 20.0486 20.8089 20.3772 20.5662 20.6196ZM9.69886 3.50659C8.46359 3.50659 7.25607 3.87289 6.22899 4.55917C5.2019 5.24544 4.40137 6.22088 3.92866 7.36211C3.45594 8.50335 3.33226 9.75914 3.57324 10.9707C3.81423 12.1822 4.40907 13.2951 5.28254 14.1685C6.156 15.042 7.26887 15.6368 8.4804 15.8778C9.69194 16.1188 10.9477 15.9951 12.089 15.5224C13.2302 15.0497 14.2056 14.2492 14.8919 13.2221C15.5782 12.195 15.9445 10.9875 15.9445 9.75221C15.9445 8.09577 15.2865 6.50717 14.1152 5.33589C12.9439 4.16461 11.3553 3.50659...

SCSS

section.basket,
section.favorite {
    padding-bottom: 68px;

    .container {
        display: flex;
        flex-wrap: wrap;
    }

    .basket-title,
    .favorite-title{
        flex-basis: 100%;
        margin-bottom: 24px;
        font-size: 29px;
        font-weight: normal;
        line-height: 33px;
    }

    .basket-wrapper,
    .favorite-wrapper{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        width: 100%;
    }

    .basket-list__inf,
    .basket-total__title,
    .favorite-list__inf,
    .favorite-total__title{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 51px;
        margin-bottom: 10px;
        padding: 0 34px 0 12px;
        color: #444;
        font-size: 14px;
        border: 1px solid #F2F2F2;
        border-radius: 3px;
        background: #F9F9F9;
    }

    .basket-list,
    .favorite-list{
        flex-basis: 75.35%;

        .basket-list__inf,
        .favorite-list__inf{
            .inf-form_wrapper {
                flex-basis: 54.74%;
            }

            #basket-search,
            #favorite-search {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 240px;
                height: 32px;
                padding: 0 15px;
                border: 1px solid #C9C8C8;
                box-sizing: border-box;
                border-radius: 3px;

                input {
                    max-width: 194px;
                    color: #444;
                    font-size: 14px;
                    border: none;
                    background: transparent;

                    &::placeholder {
                        color: #b0b0b0;
                    }

                    &[type=text]::-ms-clear {  display: none; width : 0; height: 0; }
                    &[type=text]::-ms-reveal {  display: none; width : 0; height: 0; }

          ...

JavaScript

$(function() {
      var a = $('.basket-list .basket-list__item, .favorite-list .favorite-list__item');

      function searchFilter() {
        var value = $('#search-input').val().toLowerCase();
        a.filter(function() {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
      }

      $('#search-input').on('keyup', function() {
        var searchText = $('#search-input').val();

        if (searchText !== '' || searchText === '') {
          searchFilter();
        }
      });
    });