JSFiddle - React, Tailwind, and code Playground
by igalst
HTML
<section class="product-page" ng-class="{ 'quick-view': quickView }" ng-cloak>
<header
id="top"
class="header-mobile"
ng-if="galleryCtrl.deviceType === 'mobile'"
ng-include="'views/header.html'">
</header>
<div class="column">
<wix-gallery class="gallery" ng-show="productData.media.length > 0 ">
<wix-gallery-item ng-repeat="media in productData.media"></wix-gallery-item>
</wix-gallery>
<div class="missing-media" ng-if="productData.media.length === 0">
<div class="ribbon" ng-bind="productData.ribbon" ng-if="productData.ribbon !== ''"></div>
</div>
<section
class="description more-less"
ng-class="{'show-more': moreLess.showMore}"
ng-show="!quickView && productData.description">
<h3 class="title" translate="DESCRIPTION_TITLE"></h3>
<p more-less class="content" ng-bind="productData.description"></p>
<a href="#"
class="more-toggle"
ng-click="moreLess.showMore = true"
translate="SHOW_MORE">
</a>
<a href="#"
class="less-toggle"
ng-click="moreLess.showMore = false"
translate="SHOW_LESS">
</a>
</section>
</div>
<div class="column">
<section>
<header
ng-if="galleryCtrl.deviceType !== 'mobile'"
ng-include="'views/header.html'">
</header>
<form
novalidate
name="productForm"
ng-submit="getDataForCart()"
ng-if="!isProductOptionsNotVisible()">
<div ng-repeat="option in optionsSelectionModel.optionsModel.options">
<div
class="option validation is-validation-error"
ng-class="{ 'is-validation-active': formError.options }"
ng-if="option.optionType === 'DROP_DOWN'">
<label class="label newline" for="option{{$index}}" ng-bind="option.title.toLowerCase()"></label>
<div class="selections select validation-target select" ng-class="{disabled: $index > $parent.getNumOfSelectedOptions()}">
<!--[if IE 9]><i class="select-hider"><svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#"...