JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page-container drawer-page-content" id="PageContainer">

    <main class="main-content" id="MainContent" role="main">
      

<div id="shopify-section-product-template" class="shopify-section"><div class="product-template__container page-width" itemscope="" itemtype="http://schema.org/Product" id="ProductSection-product-template" data-section-id="product-template" data-section-type="product" data-enable-history-state="true">
  <meta itemprop="name" content="Short Sleeve T-Shirt">
  <meta itemprop="url" content="https://dogcollars-3.myshopify.com/products/short-sleeve-t-shirt">
  <meta itemprop="image" content="//cdn.shopify.com/s/files/1/1411/4856/products/blank-1886001_640_800x.png?v=1513321438">

  


  <div class="grid product-single">
    <div class="grid__item product-single__photos  product-single__photos--full">
        
        
        
        
<style>
  
  
  @media screen and (min-width: 750px) { 
    #FeaturedImage-product-template-377971245063 {
      max-width: 637px;
      max-height: 640px;
    }
    #FeaturedImageZoom-product-template-377971245063-wrapper {
      max-width: 637px;
      max-height: 640px;
    }
   } 
  
  
    
    @media screen and (max-width: 749px) {
      #FeaturedImage-product-template-377971245063 {
        max-width: 746.484375px;
        max-height: 750px;
      }
      #FeaturedImageZoom-product-template-377971245063-wrapper {
        max-width: 746.484375px;
      }
    }
  
</style>


        <div id="FeaturedImageZoom-product-template-377971245063-wrapper" class="product-single__photo-wrapper js">
          <div id="FeaturedImageZoom-product-template-377971245063" style="padding-top:100.4709576%;" class="product-single__photo" data-image-id="377971245063">
            <img id="FeaturedImage-product-template-377971245063" class="feature-row__image product-featured-img lazyautosizes lazyloaded" src="//cdn.shopify.com/s/files/1/1411/4856/products/blank-1886001_640_300x300.png?v=1513321438" data-widths="[180,...

CSS

.page-container {
  /*-ms-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0)*/
}

.order-details {
  width: 300px;
  height: auto;
  padding: 10px;
  top: 50px;
  left: 70%;
  background: rgba(255, 255, 0, 0.2);
  position: fixed
}