JSFiddle - React, Tailwind, and code Playground

by wisegorilla

HTML

<form id="gift-options-form" action="contact-info/" method="post">
  <div class="gift-option-wrap" data-product-id="1">
    <img class="gift-option" src="https://via.placeholder.com/350x250/FFF/?text=Gift+1">
    <p>Sport Armband mit integrierter Handyhülle
  </div>
  <div class="gift-option-wrap" data-product-id="2">
    <img class="gift-option" src="https://via.placeholder.com/350x250/FFF/?text=Gift+1">
    <p>Theraband</p>
  </div>
  <div class="gift-option-wrap" data-product-id="3">
    <img class="gift-option" src="https://via.placeholder.com/350x250/FFF/?text=Gift+1">
    <p>Fahrradsattelbezug</p>
  </div>

  <input type="hidden" id="product-id" name="Product-ID">
  <input type="hidden" id="marketplace" name="Marketplace">
</form>

CSS

.gift-option-wrap:hover {
  -moz-box-shadow: inset 0px 0px 0px 3px #F92C55;
  box-shadow: inset 0px 0px 0px 3px #F92C55;
  cursor: pointer;
}

.gift-option-wrap {
  background-color: #eee;
  flex: 1;
	padding: 10px;
	margin: 5px;
  border-radius: 5px;
}

.gift-option-wrap p {
    color: #6BAAD9;
    font-size: 16px;
    margin: 0;
    padding: 0;
    height: 40px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100vw;
}

#gift-options-form {
  text-align: center;
  display: flex;
}

.gift-option {
  border-radius: 5px;
  width: 100%;
}


@media only screen and (max-width: 600px) {
  #gift-options-form {
    display: block;
  }
}

JavaScript

(function($) {
    $(".gift-option-wrap").on("click", function() {
      var product_id = $(this).data('product-id');
      $('#product-id').val(product_id);
      $('#gift-options-form').submit();
    });
  })(jQuery);