JSFiddle - React, Tailwind, and code Playground

by Rachel Blades

HTML

<link rel="stylesheet" href="https://assets.onestore.ms/cdnfiles/external/mwf/short/v1/latest/css/mwf-west-european-default.min.css">
<div class="hero video v2 v1 hiding">
    <div class="video-wrapper x-hidden-focus">
        <video muted preload class="bg-video" poster="http://winmr.azurewebsites.net/assets/video/acer-v8.jpg">
            <source src="http://winmr.azurewebsites.net/assets/video/acer-v8.mp4" type="video/mp4">
        </video>
        <button class="c-action-toggle c-glyph glyph-pause" data-toggled-label="pause" data-toggled-glyph="glyph-play" aria-label="Pause"></button>
        <!-- <button class="c-glyph glyph-refresh" id="replay" aria-label="Replay"></button> -->
    </div>
    <div data-grid="container">

        <div class="buybox v2">
            <div data-grid="col-3" class="slides">
                <picture class="c-image">
                    <img class="lazyloaded" alt="Acer Windows Mixed Reality Headset" src="http://winmr.azurewebsites.net/assets/video/acer-250X250.png">
                </picture>
            </div>
            <div data-grid="col-6" class="product-name">
                <div class="inner">
                    <h1 id="page-title" class="c-heading-2 m-v-xxxs p-t-n" itemprop="name">Acer Windows Mixed Reality Headset</h1>
                    <p class="by-ms slides">By <a href="" class="x-hidden-focus f-blue">Microsoft Corporation</a></p>

                    <div class="c-rating f-community-rated f-aggregate slides" itemscope="" itemtype="http://schema.org/AggregateRating" itemprop="aggregateRating" aria-label="Ratings">
                        <a href="#ratings-reviews">
                            <meta class="srv_microdata" itemprop="ratingValue" content="3.90000009536743">
                            <meta class="srv_microdata" itemprop="ratingCount" content="40">
                            <p class="x-screen-reader">Rated: 3.9 stars out of 5</p>
                            <div aria-hidden="true">
                 ...

CSS

#headerArea {
  position: absolute;
  width: 100%;
  top: 0;
  background: transparent;
  z-index: 10;
}
.c-uhfh > [class*="theme-"] .c-uhf-menu > ul > li > a:hover,
.context-uhf .theme-light,
.c-uhfh > [class*="theme-"] .c-uhf-menu > ul > li > a:focus,
.c-uhfh > [class*="theme-"] .c-uhf-menu > ul > li > button:hover,
.c-uhfh > [class*="theme-"] .c-uhf-menu > ul > li > button:focus,
.c-uhfh > [class*="theme-"] .c-uhf-menu > ul > li > [aria-expanded="true"],
.c-uhfh > [class*="theme-"] .c-uhf-menu > ul > li > ul {
  background: transparent;
}
header.context-uhf {
  position: absolute;
  z-index: 2;
  width: 100%;
  top: 0;
  background: transparent !important;
}
header .visible-v5 {
  display: none;
}
@media screen AND (min-width: 1240px) {
  header .visible-v5 {
    display: inline-block;
  }
}
header .js-global-head {
  max-width: calc(1600px + 10%);
  margin: 0 auto;
}
.search-icon {
  display: inline-block;
  width: 16px;
  position: relative;
  left: -212px;
  top: 15px;
}
.c-universal-header .c-uhf-menu > a:hover {
  cursor: pointer;
}
.c-universal-header .c-uhf-menu > a:hover:before {
  display: block;
}
.c-universal-header > div > div {
  max-width: 1600px;
}
.c-universal-header .c-uhf-menu > a::before {
  background: currentColor;
  content: "";
  display: none;
  height: 2px;
  position: absolute;
}
.c-universal-header > div:first-child .c-uhf-menu > a::before {
  border: none;
  width: calc(100% - 24px);
  bottom: 10px;
  margin-left: 16px;
}
.c-search button:before {
  content: "";
  text-indent: 0px;
  font-size: 16px;
}
@media only screen and (min-width: 1400px) {
  .exp-9514823286 #search::after {
    content: 'Search';
    float: right;
    position: relative;
    top: -2px;
    font-family: inherit;
    font-size: 15px;
  }
  .exp-9514823286 #search::after {
    font-size: 13px;
    left: -4px;
    top: 0;
  }
}
.exp-menu-pad {
  position: relative;
}
.exp-menu-pad > span {
  width: 4px;
  height: 4px;
  background-color: #000;
  display:...

JavaScript

$(window).on('load', function() {
  $.fn.notmousemove = function(time, callback) {
     return this.each(function(i,ele) {
       $(ele).on({
         mouseenter: function() {
           $(this).data('nomousetimer', setTimeout(callback, time));
         },
         mousemove: function() {
           clearTimeout($(this).data('nomousetimer'));
           $(this).data('nomousetimer', setTimeout(callback, time));
         },
         mouseleave: function() {
           clearTimeout($(this).data('nomousetimer'));
         }
       });
     });
   };
        

        

  heroVid.notmousemove(1500, function() {

    //option for collapsing buy box
    if( ended == false ){
      $('.hiding .slides').toggle('scale','',500);
      $('.hero.hiding .pricing').addClass('active');

      $('.hero.v2.v1.video.hiding [data-grid=container]').css('bottom', '50px');
      $('.hero.hiding .video-wrapper').css({"padding-bottom":"46.25%"});
      $('.hero.hiding .product-name .inner').css('float', 'left');
      $('.hero.hiding .pricing').addClass('active');
    }


  });

  //show buybox on mouse movement

  heroVid.on('mousemove', function(){

    if($('.hero').hasClass('hiding')){

      $('pricing').removeClass('active');
      $('.slides').toggle('scale','',500);
      $('.hero.hiding .video-wrapper').removeAttr('style');

      // $(document).off("mousemove", mouse);
    }else{
      $('.buybox,.hero button').removeClass('faded');
    }

  });

  //show buybox and replay button at end of video 
  heroVid.on('ended', function(){
    ended = true;
    $('.buybox,.hero button').removeClass('faded');
    $('.hero button').addClass('f-toggle glyph-play').removeClass('glyph-pause');
    heroVid.removeClass('active');
    $('.slides').slideToggle();
    heroVid.off();
  });

});