JSFiddle - React, Tailwind, and code Playground

FII Practic - Shopping Cart

by George-Leonard Chetreanu

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel=icon href="favicon/favicon.png" sizes="16x16" type="image/png">
<link rel=icon href="favicon/favicon.ico" sizes="32x32 48x48" type="image/vnd.microsoft.icon">
<link rel=icon href="favicon/favicon.icns" sizes="128x128 512x512 8192x8192 32768x32768">
<link rel=icon href="favicon/favicon57.png" sizes="57x57" type="image/png">
<link rel=icon href="favicon/favicon.svg" sizes="any" type="image/svg+xml">


<div id="app"></div>
<header class="header">
  <nav class="header__navigation">
  </nav>
</header>
<section class="wrapper">
  <div class="openSidebar">Open filters</div>
  <aside class="sidebar">
    <span class="closeSidebar">X</span>
    <div class="filter">
      <h3 class="filter__title">Price</h3>
      <div class="input__group">
        <input class="input input--price" id="priceFrom" type="number" placeholder="From">
        <span>-</span>
        <input class="input input--price" id="priceTo" type="number" placeholder="To">
        <button class="btn btn--transparent">
          <span class="fa fa-search" />
        </button>
      </div>
    </div>
    <div class="filter">
      <h3 class="filter__title">Categories</h3>
      <ul id="categories" class="categories"></ul>
    </div>
  </aside>
  <section id="productsSection" class="products">
    <section class="row searchBar">
      <input class="searchInput" type="text" placeholder="Search something">
      <button id="searchButton">Search</button>
    </section>
    <section id="sortSection" class="row sort">
    </section>
  </section>
</section>