JSFiddle - React, Tailwind, and code Playground

by helgatheviking

HTML

<!-- wp:woocommerce/single-product -->
<div class="wp-block-woocommerce-single-product woocommerce">
  <!-- wp:columns -->
  <div class="wp-block-columns">
    <!-- wp:column -->
    <div class="wp-block-column">
      <!-- wp:woocommerce/product-image {"showSaleBadge":false,"isDescendentOfSingleProductBlock":true} /-->
    </div>
    <!-- /wp:column -->

    <!-- wp:column -->
    <div class="wp-block-column">
      <!-- wp:post-title {"__woocommerceNamespace":"woocommerce/product-query/product-title"} /-->

      <!-- wp:woocommerce/product-rating {"isDescendentOfSingleProductBlock":true} /-->

      <!-- wp:woocommerce/product-price {"isDescendentOfSingleProductBlock":true} /-->

      <!-- wp:post-excerpt {"excerptLength":100,"__woocommerceNamespace":"woocommerce/product-query/product-summary"} /-->

      <!-- wp:woocommerce/add-to-cart-form {"isDescendentOfSingleProductBlock":true} /-->

      <!-- wp:woocommerce/product-meta -->
      <div class="wp-block-woocommerce-product-meta">
        <!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
        <div class="wp-block-group">
          <!-- wp:woocommerce/product-sku /-->

          <!-- wp:post-terms {"term":"product_cat","prefix":"Category: "} /-->

          <!-- wp:post-terms {"term":"product_tag","prefix":"Tags: "} /-->
        </div>
        <!-- /wp:group -->
      </div>
      <!-- /wp:woocommerce/product-meta -->
    </div>
    <!-- /wp:column -->
  </div>
  <!-- /wp:columns -->
</div>
<!-- /wp:woocommerce/single-product -->