JSFiddle - React, Tailwind, and code Playground

by 211368e

HTML

<div class="Product_Card_Button">
  <form method="post" action="/cart/add">
    <quantity-input class="quantity" style="min-width: 50vw; min-height: 25.4px; display: inline-flex">
      <button class="quantity__button no-js-hidden" name="minus" type="button"> - </button>
      <input class="quantity__input" type="number" name="quantity" id="quantity" min="1" value="1" style="text-align: center;">
      <button class="quantity__button no-js-hidden" name="plus" type="button">+</button>
    </quantity-input>
    <br>
    <input type="submit" value="Add to cart" class="Add_To_Cart_Button" />
  </form>
</div>

CSS

input.Add_To_Cart_Button {
  background-color: #000;
  color: #fff;
  border: none;
  font: inherit;
  cursor: pointer;
  font-size: 13px;
  margin-bottom: 40px;
  width: 120px;
  -webkit-appearance: none;
  border-radius: 0;
}

form{text-align: center;}
quantity-input.quantity {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}