JSFiddle - React, Tailwind, and code Playground

by Tiago Sousa

HTML

<div class="slider-item">
  <div class="card card--product">
    <div class="card__media">
      <a href="<?php echo get_permalink(); ?>">
        <img src="cenas" />
      </a>
    </div>
    <div class="card__info-container">
      <div class="card__info">
        <h3>
          <a href="">cenas</a>
        </h3>
      </div>
      <div class="card__quick-add">
        <!-- Quantity start -->
        <div class="product-quantity-wrap">
          <div class="quantity-selector-wrapper">
            <button class="btn-quantity-selector" tabindex="-1" type="button">
              -
            </button>
            <input
              type="number"
              class="text-input input-quantity"
              step="1"
              value="1"
            />
            <button class="btn-quantity-selector" tabindex="-1" type="button">
              +
            </button>
          </div>
        </div>
        <!-- / Quantity End -->

        <!-- Buy Now Start -->
        <div class="button-purchase button-inline">
          <button type="button" class="btn-small no-margin">
            <span class="purchase-amount"> Ajouter (€15.86) </span>
          </button>
        </div>
        <!-- /end buy now -->
      </div>
    </div>
  </div>
</div>