JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">




<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.2.0/ekko-lightbox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.2.0/ekko-lightbox.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/elevatezoom/3.0.8/jquery.elevatezoom.min.js"></script>


<div class="container">

  
  
  <div class="card">
    
    <div class="card-body">
      <p class="card-title">Rucksack aus Hanf Gelbe mit Zwei Riemen</p>
      <p class="card-preis">Preis 40 &euro;</p>
      <div class="number-input ">
        <div class="label">Stück: </div>
        <div class="input-group quantity">
          <div class="input-group-prepend">
            <button class="btn btn-default btn-minus">
              <i class="fa fa-minus"></i>
            </button> 
          </div>
          <input class="form-control quantity" min="0" name="quantity" value="1" type="number">
          <div class="input-group-append">
            <button class="btn btn-default btn-plus">
              <i class="fa fa-plus"></i>
            </button>
          </div>
        </div>
      </div>
      <button class="btn btn-primary btn-block mt-4" type="buttom"  onclick='layer_show_3(event);' ><span>Zum warenkorb...

CSS

.card {

  float: right;
    width: 45%;
    background-color: #cccccc;
    padding-right: 10%;
    padding-bottom: 0.5%;
   
    margin-left: 3%;
    margin-top: 11%;
    padding-top: 1%;
    z-index: 1;
}


.card-preis {
  font-size: 1.5rem;
  
  text-align: right;
 
}


.number-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  
}

.label {
    font-size: 1rem;
   
    font-weight: bold;
    margin-left: 9rem;
    
}

.input-group {
    width: 140px;
}
.form-control {
    text-align: left;
}


input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

    /* custom primary buttons */
    
.btn-primary {
        color: #212529;
        background-color: #7cc;
        border-color: #5bc2c2;
        
        
}
    
.btn-primary:hover {
        color: #212529;
        background-color: #52bebe;
        border-color: #8ad3d3;
}
    


/*      ***** Anfang    Fenster 1 producut **** */


/* Determina el fondo transparente cuando se muestra la previsualizacion */
#layerPreview-3	{position:absolute;z-index:1;display:none;top: 0px;left:0px;width:100%;height:100%;background-color:#fff; 
					 background-color: rgba(50, 50, 50, 0.5);
                    
                     
}




/* Determina la capa que aparecera centrada */
#layerPreviewContent-3 {position: absolute; z-index: 1; display: none; background-color: #dedee0; margin-top: 0px; left:50%;
					width: 46%;
					margin-left: -350px;
					height: 44%;
                    
                    -moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
					-webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
                    box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
}





#tittel-text {padding: 1%; text-align:left;border-bottom:1px hidden; background-color:  #d7a8a8; }

#closse-text {  color: #f2f2f2; padding: 0.6%;  cursor: pointer; float: right;}





.text-pruduct {background-color: red;  ...

JavaScript

/**
	 * Funcion que muestra las capas
	 */
function layer_show_3(event)
	{
		event.preventDefault();
            /* Ponemos los atributos de posicion a la capa transparente del fondo */
		$('#layerPreview-3').attr("style", "top:0px; height:"+$(document).height()+"px; width:"+$(window).width()+"px; display:inline;");
		
		/* Buscamos la posicion superior de la capa que aparece centrada.
		   La anchura y la posicion centrada se establece en el estilo */
		var posTop=(($(window).height()/2)-(500/2))+$(document).scrollTop();
		if(posTop<0)
			posTop=0;
		$('#layerPreviewContent-3').attr("style", "top:"+posTop+"px;");
		/* Indicamos que se muestre la capa */
		$('#layerPreviewContent-3').show(600);
}
	
	/**
	 * Funcion que esconde las capas
	 */
function layer_close_3(event)
	{
		event.preventDefault();
        $('#layerPreviewContent-3').hide(300);
		$('#layerPreview-3').hide();
}


$('.btn-plus, .btn-minus').on('click', function(e) {
	const isPlus = $(e.target).closest('.btn-plus').is('.btn-plus');
	const input = $(e.target).closest('.input-group').find('input');
  if (input.is('input')) {
  	input[0][isPlus ? 'stepUp' : 'stepDown']()
  }
})