JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://fonts.googleapis.com/css?family=Roboto"></script>
<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 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...

CSS

#lalo {width: 5%; margin-right: 10px; margin-right: 7px;}



#gallery_01{
    position: relative;
    float:left;
    display: table;
    line-height: 0;
    content: '';
    margin-top: 1%;
   background-color: #a6a6a6;
}

#zoom_03 { width: 100%; }

.kleine-beschreibung {

  background-color:  #b3b3b3;
  margin-top: 1%;
  padding: 2%;
  width: 40%;
  float: right;
  color: white;
  text-shadow: 2px 2px 4px #000000;
  box-shadow: 10px 10px 15px silver;
}

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








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


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


/* Determina el...

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