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="stern">      
                              <span class="fa fa-star"></span>
                              <span class="fa fa-star"></span>
                              <span class="fa fa-star"></span>
                              <span class="fa fa-star"></span>
                             <span class="fa fa-star"></span> 
                  </div>
                     <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...

CSS

.stern { margin-top: 11%; }


.fenster-beschreibung { width: 52%; margin-top: 5%; }


.beschreibung-tittel {  background-color: #e6e6e6; width: 25%; padding: 3%;    border: 1px solid #b3b3b3; border-bottom: none; margin-bottom: 0.003%; font-weight: bold; box-shadow: 10px 10px 15px silver; }



.beschreibung { 	background-color: #e6e6e6; width: 100%; padding: 2%; border: 1px solid #b3b3b3; box-shadow: 10px 10px 15px silver;}




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

#closse-text {  color:  #000000; padding: 0.3%;  cursor: pointer; float: right; }

#closse-text:hover { background-color:  #d7a8a8; }

.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-title { width: 100%;  font-weight: bold;  text-align: right;}


.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;
}
    












img { max-width: 100%;}










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


/* Determina el fondo transparente cuando se muestra la previsualizacion */
#layerPreview-3 {
  visibility: hidden;
  position:fixed;
  z-index:1;
  display:flex; justify-content: center;...

JavaScript

function layer_show_3(event)
	{
		event.preventDefault();
            /* Ponemos los atributos de posicion a la capa transparente del fondo */
    let content = document.getElementById("layerPreview-3");
    content.className = "";
    let dummy = content.offsetWidth;
    content.className = "visible";
}
	
	/**
	 * Funcion que esconde las capas
	 */
function layer_close_3(event)
	{
		event.preventDefault();
    let content = document.getElementById("layerPreview-3");
    content.className = "";
    let dummy = content.offsetWidth;
    
    content.className = "hidden";
}



$('.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']()
  }
})