E-Commerce (Orders) Components in Yofte library

<section class="py-20 bg-gray-100">
  <div class="container mx-auto px-4">
    <div class="p-8 lg:p-20 bg-white">
      <h2 class="mb-20 text-5xl font-bold font-heading">Your cart</h2>
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full xl:w-8/12 mb-8 xl:mb-0 px-4">
          <div class="hidden lg:flex w-full">
            <div class="w-full lg:w-3/6">
              <h4 class="mb-6 font-bold font-heading text-gray-500">Description</h4>
            </div>
            <div class="w-full lg:w-1/6">
              <h4 class="mb-6 font-bold font-heading text-gray-500">Price</h4>
            </div>
            <div class="w-full lg:w-1/6 text-center">
              <h4 class="mb-6 font-bold font-heading text-gray-500">Quantity</h4>
            </div>
            <div class="w-full lg:w-1/6 text-right">
              <h4 class="mb-6 font-bold font-heading text-gray-500">Subtotal</h4>
            </div>
          </div>
          <div class="mb-12 py-6 border-t border-b border-gray-200">
            <div class="flex flex-wrap items-center -mx-4 mb-6 md:mb-3">
              <div class="w-full md:w-4/6 lg:w-6/12 px-4 mb-6 md:mb-0">
                <div class="flex -mx-4 flex-wrap items-center">
                  <div class="w-full md:w-1/3 px-4 mb-3">
                    <div class="flex items-center justify-center w-full md:w-24 h-32 bg-gray-100">
                      <img class="h-full object-contain" src="yofte-assets/images/waterbottle.png" alt="">
                    </div>
                  </div>
                  <div class="w-2/3 px-4">
                    <h3 class="mb-2 text-xl font-bold font-heading">BRILE water filter carafe</h3>
                    <p class="text-gray-500">Maecenas 0.7 commodo sit</p>
                  </div>
                </div>
              </div>
              <div class="hidden lg:block lg:w-2/12 px-4">
                <p class="text-lg text-blue-500 font-bold font-heading">$29.89</p>
                <span class="text-xs text-gray-500 line-through">$33.69</span>
              </div>
              <div class="w-auto md:w-1/6 lg:w-2/12 px-4">
                <div class="inline-flex items-center px-4 font-semibold font-heading text-gray-500 border border-gray-200 focus:ring-blue-300 focus:border-blue-300 rounded-md" x-data="{ quantity: 1 }">
                  <button x-on:click="quantity > 1 ? quantity-- : quantity" class="py-2 hover:text-gray-700">
                    <svg width="12" height="2" viewBox="0 0 12 2" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.35"><rect x="12" width="2" height="12" transform="rotate(90 12 0)" fill="currentColor"></rect></g></svg>
                  </button>
                  <input class="w-12 m-0 px-2 py-4 text-center md:text-right border-0 focus:ring-transparent focus:outline-none rounded-md" type="number" x-model="quantity" placeholder="1">
                  <button x-on:click="quantity++" class="py-2 hover:text-gray-700">
                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.35"><rect x="5" width="2" height="12" fill="currentColor"></rect><rect x="12" y="5" width="2" height="12" transform="rotate(90 12 5)" fill="currentColor"></rect></g></svg>
                  </button>
                </div>
              </div>
              <div class="w-auto md:w-1/6 lg:w-2/12 px-4 text-right">
                <p class="text-lg text-blue-500 font-bold font-heading">$29.89</p>
              </div>
            </div>
            <div class="flex flex-wrap items-center -mx-4">
              <div class="w-full md:w-4/6 lg:w-6/12 px-4 mb-6 md:mb-0">
                <div class="flex -mx-4 flex-wrap items-center">
                  <div class="w-full md:w-1/3 px-4 mb-3">
                    <div class="flex items-center justify-center w-full md:w-24 h-32 bg-gray-100">
                      <img class="h-full object-contain" src="yofte-assets/images/basketball.png" alt="">
                    </div>
                  </div>
                  <div class="w-full md:w-2/3 px-4">
                    <h3 class="mb-2 text-xl font-bold font-heading">Nike basketball ball</h3>
                    <p class="text-gray-500">Lorem ipsum dolor L</p>
                  </div>
                </div>
              </div>
              <div class="hidden lg:block lg:w-2/12 px-4">
                <p class="text-lg text-blue-500 font-bold font-heading">$29.89</p>
                <span class="text-xs text-gray-500 line-through">$33.69</span>
              </div>
              <div class="w-auto md:w-1/6 lg:w-2/12 px-4">
                <div class="inline-flex items-center px-4 font-semibold font-heading text-gray-500 border border-gray-200 focus:ring-blue-300 focus:border-blue-300 rounded-md" x-data="{ quantity: 1 }">
                    <button x-on:click="quantity > 1 ? quantity-- : quantity" class="py-2 hover:text-gray-700">
                      <svg width="12" height="2" viewBox="0 0 12 2" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.35"><rect x="12" width="2" height="12" transform="rotate(90 12 0)" fill="currentColor"></rect></g></svg>
                    </button>
                    <input class="w-12 m-0 px-2 py-4 text-center md:text-right border-0 focus:ring-transparent focus:outline-none rounded-md" type="number" x-model="quantity" placeholder="1">
                    <button x-on:click="quantity++" class="py-2 hover:text-gray-700">
                      <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.35"><rect x="5" width="2" height="12" fill="currentColor"></rect><rect x="12" y="5" width="2" height="12" transform="rotate(90 12 5)" fill="currentColor"></rect></g></svg>
                    </button>
                </div>
              </div>
              <div class="w-auto md:w-1/6 lg:w-2/12 px-4 text-right">
                <p class="text-lg text-blue-500 font-bold font-heading">$29.89</p>
              </div>
            </div>
          </div>
          <div class="flex flex-wrap items-center lg:-mb-4">
            <span class="mr-12 mb-4 font-medium">Apply discount code:</span>
            <input class="flex-1 md:flex-none mr-6 sm:mr-0 md:mr-6 mb-4 px-8 py-4 placeholder-gray-800 font-bold font-heading border rounded-md" type="text" placeholder="SUMMER30X">
            <a class="flex-1 md:flex-none inline-block mb-4 px-8 py-4 text-center text-white font-bold font-heading uppercase bg-gray-800 hover:bg-gray-700 rounded-md" href="#">Apply</a>
          </div>
        </div>
        <div class="w-full xl:w-4/12 px-4">
          <div class="p-6 md:p-12 bg-blue-300">
            <h2 class="mb-6 text-4xl font-bold font-heading text-white">Cart totals</h2>
            <div class="flex mb-8 items-center justify-between pb-5 border-b border-blue-100">
              <span class="text-blue-50">Subtotal</span>
              <span class="text-xl font-bold font-heading text-white">$89.67</span>
            </div>
            <h4 class="mb-2 text-xl font-bold font-heading text-white">Shipping</h4>
            <div class="flex mb-2 justify-between items-center">
              <span class="text-blue-50">Next day</span>
              <span class="text-xl font-bold font-heading text-white">$11.00</span>
            </div>
            <div class="flex mb-10 justify-between items-center">
              <span class="text-blue-50">Shipping to United States</span>
              <span class="text-xl font-bold font-heading text-white">-</span>
            </div>
            <div class="flex mb-10 justify-between items-center">
              <span class="text-xl font-bold font-heading text-white">Order total</span>
              <span class="text-xl font-bold font-heading text-white">$100.67</span>
            </div>
            <a class="block w-full py-4 bg-orange-300 hover:bg-orange-400 text-center text-white font-bold font-heading uppercase rounded-md transition duration-200" href="#">Go to Checkout</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section has-background-light is-clipped">
  <div class="container">
    <div class="has-background-white p-8 p-20-desktop">
      <h2 class="title mb-8 mb-20-tablet">Your cart</h2>
      <div class="columns is-multiline is-vcentered">
        <div class="column is-12 is-8-widescreen mb-8 mb-0-widescreen">
          <div class="is-hidden-touch columns is-multiline" style="border-bottom: 1px solid grey;">
            <div class="column is-6">
              <h4 class="has-text-grey has-text-weight-bold mb-6" style="font-size: 16px;">Description</h4>
            </div>
            <div class="column is-2">
              <h4 class="has-text-grey has-text-weight-bold mb-6" style="font-size: 16px;">Price</h4>
            </div>
            <div class="column is-2 has-text-centered">
              <h4 class="has-text-grey has-text-weight-bold mb-6" style="font-size: 16px;">Quantity</h4>
            </div>
            <div class="column is-2">
              <h4 class="has-text-grey has-text-weight-bold mb-6" style="font-size: 16px;">Subtotal</h4>
            </div>
          </div>
          <div class="mb-12 py-6">
            <div class="mb-6 mb-3-tablet columns is-vcentered is-multiline">
              <div class="column is-6-desktop is-7-tablet mb-6 mb-0-tablet">
                <div class="columns is-vcentered is-multiline">
                  <div class="column is-4 mb-3">
                    <div class="is-flex has-background-light is-justify-content-center is-align-items-center" style="width: 96px; height: 128px;">
                      <img class="image is-fullwidth" style="object-fit: contain;" src="yofte-assets/images/waterbottle.png" alt="">
                    </div>
                  </div>
                  <div class="column is-8">
                    <h3 class="subtitle mb-2 has-text-weight-bold">BRILE water filter carafe</h3>
                    <p class="mb-0 has-text-grey">Maecenas 0.7 commodo sit</p>
                  </div>
                </div>
              </div>
              <div class="column is-2 is-hidden-touch">
                <p class="subtitle has-text-info mb-0 has-text-weight-bold">$29.89</p>
                <span class="has-text-grey" style="text-decoration: line-through;">$33.69</span>
              </div>
              <div class="column is-2-desktop is-3-tablet">
                <div class="px-4 is-inline-flex is-align-items-center has-text-weight-bold" style="border: 1px solid #DBDDE1; border-radius: 8px;">
                  <button class="button is-ghost has-text-grey p-0">
                    <svg width="12" height="2" viewbox="0 0 12 2" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.35"><rect x="12" width="2" height="12" transform="rotate(90 12 0)" fill="currentColor"></rect></g></svg>
                  </button>
                  <input class="input px-2 py-4 has-text-centered" style="width: 48px; border: none; box-shadow: none;" type="number" placeholder="1">
                  <button class="button is-ghost has-text-grey p-0">
                    <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.35"><rect x="5" width="2" height="12" fill="currentColor"></rect><rect x="12" y="5" width="2" height="12" transform="rotate(90 12 5)" fill="currentColor"></rect></g></svg>
                  </button>
                </div>
              </div>
              <div class="column is-2">
                <p class="subtitle has-text-info has-text-weight-bold">$29.89</p>
              </div>
            </div>
            <div class="columns is-vcentered is-multiline">
              <div class="column is-6-desktop is-7-tablet mb-6 mb-0-tablet">
                <div class="columns is-vcentered is-multiline">
                  <div class="column is-4-tablet mb-3">
                    <div class="is-flex has-background-light is-justify-content-center is-align-items-center" style="width: 96px; height: 128px;">
                      <img class="image is-fullwidth" style="object-fit: contain;" src="yofte-assets/images/basketball.png" alt="">
                    </div>
                  </div>
                  <div class="column is-8">
                    <h3 class="subtitle mb-2 has-text-weight-bold">Nike basketball ball</h3>
                    <p class="mb-0 has-text-grey">Maecenas 0.7 commodo sit</p>
                  </div>
                </div>
              </div>
              <div class="column is-2 is-hidden-touch">
                <p class="subtitle has-text-info mb-0 has-text-weight-bold">$29.89</p>
                <span class="has-text-grey" style="text-decoration: line-through;">$33.69</span>
              </div>
              <div class="column is-2-desktop is-3-tablet">
                <div class="px-4 is-inline-flex is-align-items-center has-text-weight-bold" style="border: 1px solid #DBDDE1; border-radius: 8px;">
                  <button class="button is-ghost has-text-grey p-0">
                    <svg width="12" height="2" viewbox="0 0 12 2" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.35"><rect x="12" width="2" height="12" transform="rotate(90 12 0)" fill="currentColor"></rect></g></svg>
                  </button>
                  <input class="input px-2 py-4 has-text-centered" style="width: 48px; border: none; box-shadow: none;" type="number" placeholder="1">
                  <button class="button is-ghost has-text-grey p-0">
                    <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.35"><rect x="5" width="2" height="12" fill="currentColor"></rect><rect x="12" y="5" width="2" height="12" transform="rotate(90 12 5)" fill="currentColor"></rect></g></svg>
                  </button>
                </div>
              </div>
              <div class="column is-2">
                <p class="subtitle has-text-info has-text-weight-bold">$29.89</p>
              </div>
            </div>
          </div>
          <div class="columns is-vcentered">
            <div class="column is-4">
              <span class="is-flex-shrink-0 has-text-weight-bold">Apply discount code:</span>
            </div>
            <div class="column is-5">
              <input class="ms-12 input has-text-weight-bold" type="text" placeholder="SUMMER30X">
            </div>
            <div class="column is-3"><a class="ms-6 button is-dark is-flex-shrink-0" href="#">Apply</a></div>
          </div>
        </div>
        <div class="column is-12 is-4-widescreen">
          <div class="has-background-info p-6 p-16-desktop">
            <h3 class="title is-size-3 has-text-white mb-6">Cart totals</h3>
            <div class="mb-8 pb-5 is-flex is-justify-content-space-between is-align-items-center" style="border-bottom: 1px solid rgba(255, 255, 255, 0.3);">
              <span class="has-text-light">Subtotal</span>
              <span class="subtitle has-text-white has-text-weight-bold">$89.67</span>
            </div>
            <h4 class="title is-size-5 has-text-white mb-2">Shipping</h4>
            <div class="mb-2 is-flex is-justify-content-space-between is-align-items-center">
              <span class="has-text-light">Next day</span>
              <span class="subtitle has-text-white has-text-weight-bold">$11.00</span>
            </div>
            <div class="mb-10 is-flex is-justify-content-space-between is-align-items-center">
              <span class="has-text-light">Shipping to United States</span>
              <span class="subtitle has-text-white has-text-weight-bold">-</span>
            </div>
            <div class="mb-10 is-flex is-justify-content-space-between is-align-items-center">
              <span class="title is-size-5 mb-0 has-text-white has-text-weight-bold">Order total</span>
              <span class="title is-size-5 mb-0 has-text-white has-text-weight-bold">$100.67</span>
            </div>
            <a class="button is-primary is-fullwidth" href="#">Go to Checkout</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-20 bg-light overflow-hidden">
  <div class="container">
    <div class="p-8 p-lg-20 bg-white">
      <h2 class="mb-8 mb-md-20" >Your cart</h2>
      <div class="row align-items-center">
        <div class="col-12 col-xl-8 mb-8 mb-xl-0">
          <div class="d-none d-lg-flex row">
            <div class="col-12 col-lg-6">
              <h4 class="mb-6 text-secondary" style="font-size: 16px;" >Description</h4>
            </div>
            <div class="col-12 col-lg-2">
              <h4 class="mb-6 text-secondary" style="font-size: 16px;" >Price</h4>
            </div>
            <div class="col-12 col-lg-2 text-center">
              <h4 class="mb-6 text-secondary" style="font-size: 16px;" >Quantity</h4>
            </div>
            <div class="col-12 col-lg-2 text-end">
              <h4 class="mb-6 text-secondary" style="font-size: 16px;" >Subtotal</h4>
            </div>
          </div>
          <div class="mb-12 py-6 border-top border-bottom">
            <div class="row align-items-center mb-6 mb-md-3">
              <div class="col-12 col-md-8 col-lg-6 mb-6 mb-md-0">
                <div class="row align-items-center">
                  <div class="col-12 col-md-4 mb-3">
                    <div class="d-flex align-items-center justify-content-center bg-light" style="width: 96px; height: 128px;"><img class="img-fluid" style="object-fit: contain;" src="yofte-assets/images/waterbottle.png" alt=""/></div>
                  </div>
                  <div class="col-8">
                    <h3 class="mb-2 lead fw-bold" >BRILE water filter carafe</h3>
                    <p class="mb-0 text-secondary" >Maecenas 0.7 commodo sit</p>
                  </div>
                </div>
              </div>
              <div class="d-none d-lg-block col-lg-2">
                <p class="mb-0 lead fw-bold text-info" >$29.89</p><span class="small text-secondary text-decoration-line-through" >$33.69</span>
              </div>
              <div class="col-auto col-md-2">
                <div class="d-inline-flex align-items-center px-4 fw-bold text-secondary border rounded-2">
                  <button class="btn px-0 py-2">
                    <svg width="12" height="2" viewbox="0 0 12 2" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <g opacity="0.35">
                        <rect x="12" width="2" height="12" transform="rotate(90 12 0)" fill="currentColor"></rect>
                      </g>
                    </svg>
                  </button>
                  <input class="form-control px-2 py-4 text-center text-md-end border-0" style="width: 48px;" type="number" placeholder="1"/>
                  <button class="btn px-0 py-2">
                    <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <g opacity="0.35">
                        <rect x="5" width="2" height="12" fill="currentColor"></rect>
                        <rect x="12" y="5" width="2" height="12" transform="rotate(90 12 5)" fill="currentColor"></rect>
                      </g>
                    </svg>
                  </button>
                </div>
              </div>
              <div class="col-auto col-md-2 text-end">
                <p class="lead fw-bold text-info" >$29.89</p>
              </div>
            </div>
            <div class="row align-items-center">
              <div class="col-12 col-md-8 col-lg-6 mb-6 mb-md-0">
                <div class="row align-items-center">
                  <div class="col-12 col-md-4 mb-3">
                    <div class="d-flex align-items-center justify-content-center bg-light" style="width: 96px; height: 128px;"><img class="img-fluid" style="object-fit: contain;" src="yofte-assets/images/basketball.png" alt=""/></div>
                  </div>
                  <div class="col-8">
                    <h3 class="mb-2 lead fw-bold" >Nike basketball ball</h3>
                    <p class="mb-0 text-secondary" >Maecenas 0.7 commodo sit</p>
                  </div>
                </div>
              </div>
              <div class="d-none d-lg-block col-lg-2">
                <p class="mb-0 lead fw-bold text-info" >$29.89</p><span class="small text-secondary text-decoration-line-through" >$33.69</span>
              </div>
              <div class="col-auto col-md-2">
                <div class="d-inline-flex align-items-center px-4 fw-bold text-secondary border rounded-2">
                  <button class="btn px-0 py-2">
                    <svg width="12" height="2" viewbox="0 0 12 2" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <g opacity="0.35">
                        <rect x="12" width="2" height="12" transform="rotate(90 12 0)" fill="currentColor"></rect>
                      </g>
                    </svg>
                  </button>
                  <input class="form-control px-2 py-4 text-center text-md-end border-0" style="width: 48px;" type="number" placeholder="1"/>
                  <button class="btn px-0 py-2">
                    <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <g opacity="0.35">
                        <rect x="5" width="2" height="12" fill="currentColor"></rect>
                        <rect x="12" y="5" width="2" height="12" transform="rotate(90 12 5)" fill="currentColor"></rect>
                      </g>
                    </svg>
                  </button>
                </div>
              </div>
              <div class="col-auto col-md-2 text-end">
                <p class="lead fw-bold text-info" >$29.89</p>
              </div>
            </div>
          </div>
          <div class="d-flex flex-wrap flex-md-nowrap align-items-center mb-lg-n4"><span class="flex-shrink-0 me-12 mb-4 mb-lg-0 fw-bold" >Apply discount code:</span>
            <input class="form-control me-6 mb-4 mb-lg-0 px-8 py-4 fw-bold border" type="text" placeholder="SUMMER30X"/><a class="flex-shrink-0 btn btn-sm btn-dark" href="#" >Apply</a>
          </div>
        </div>
        <div class="col-12 col-xl-4">
          <div class="p-6 p-md-12 bg-info">
            <h3 class="mb-6 text-white" >Cart totals</h3>
            <div class="d-flex mb-8 align-items-center justify-content-between pb-5 border-bottom border-info-light"><span class="text-light" >Subtotal</span><span class="lead fw-bold text-white" >$89.67</span></div>
            <h4 class="mb-2 lead fw-bold text-white" >Shipping</h4>
            <div class="d-flex mb-2 justify-content-between align-items-center"><span class="text-light" >Next day</span><span class="lead fw-bold text-white" >$11.00</span></div>
            <div class="d-flex mb-10 justify-content-between align-items-center"><span class="text-light" >Shipping to United States</span><span class="lead fw-bold text-white" >-</span></div>
            <div class="d-flex mb-10 justify-content-between align-items-center"><span class="lead fw-bold text-white" >Order total</span><span class="lead fw-bold text-white" >$100.67</span></div><a class="btn btn-primary w-100 text-uppercase" href="#" >Go to Checkout</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>