JSFiddle - React, Tailwind, and code Playground

by devangkantharia

HTML

<div class="banner-absolute-image banner--androidify"> <a class="slide1-play-link js-video-play js-analytics" data-g-action="click" data-g-event="home:hero-carousel:MacIntel" data-g-label="slide-1:play-video" data-href="TRmgMe2STL0" href="//www.youtube.com/watch?v=TRmgMe2STL0?hd=1&amp;showinfo=0&amp;rel=0&amp;modestbranding=1">
                            </a>

</div>

CSS

*, *::before, *::after {
    box-sizing: border-box;
}
a {
    color: #6ab344;
    cursor: pointer;
    text-decoration: none;
}
.banner-absolute-image {
    display: block;
    height: 550px;
    margin: 0 auto;
    width: auto;
    z-index: 4;
}
.banner--androidify .slide1-play-link::before {
    content="+";
}
.banner--androidify .slide1-play-link {
    /* background: url(../images/home/play-btn.png) no-repeat; */
    background-size: cover;
    background-color: #00c7a0;
    border-radius: 75px;
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, .15);
    box-shadow: 0 3px 6px rgba(0, 0, 0, .15);
    display: block;
    height: 75px;
    left: 50%;
    position: absolute;
    top: 30%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    /*
    transform: translateX(-50%);
  -webkit-transition: box-shadow .25s cubic-bezier(.19,1,.22,1);
  transition: box-shadow .25s cubic-bezier(.19,1,.22,1);
    */
    -webkit-transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    -webkit-user-select: none;
    width: 75px;
    z-index: 9;
}
.slide1-play-link:hover {
    /*
  -webkit-box-shadow: 0 10px 10px rgba(0,0,0,.25);
  box-shadow: 0 10px 10px rgba(0,0,0,.25);
    */
    -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.26);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.26);
}
.hoverable a:hover {
    color: #339600;
    text-decoration: none;
}
a.slide1-play-link:after {
    content:"1";
    color: #FFF;
    margin: 0 auto;
    width: 80px;
}