JSFiddle - React, Tailwind, and code Playground
by Ali Khaled
HTML
<div class="sc-kvZOFW ljwwIe IconCaptions-sc-2fcgdi-5 ghaHcA"><div class="Feature-sc-2fcgdi-6 eAuNay"><img class="AnimationHelper__icon-scale___2wKDs AnimationHelper__is-animated___3a3Rd FeatureIcon-sc-2fcgdi-7 gMEeob" alt="" src="/assets-spa/images/ergonomic.svg" style="animation-delay: 0ms;"><div class="AnimationHelper__fade-up___f87ir AnimationHelper__is-animated___3a3Rd FeatureContent-sc-2fcgdi-8 bnxWZf" style="transition-delay: 0ms;"><h3 class="FeatureHeading-sc-2fcgdi-9 dyaLyo"><span>Advanced support</span></h3><p class="FeatureParagraph-sc-2fcgdi-10 iMNjcq"><span>New ergonomic system actively aligns your body at 33 key points</span></p></div></div><div class="Feature-sc-2fcgdi-6 eAuNay"><img class="AnimationHelper__icon-scale___2wKDs AnimationHelper__is-animated___3a3Rd FeatureIcon-sc-2fcgdi-7 gMEeob" alt="" src="/assets-spa/images/breathable.svg" style="animation-delay: 133ms;"><div class="AnimationHelper__fade-up___f87ir AnimationHelper__is-animated___3a3Rd FeatureContent-sc-2fcgdi-8 bnxWZf" style="transition-delay: 133ms;"><h3 class="FeatureHeading-sc-2fcgdi-9 dyaLyo"><span>Temperature regulation</span></h3><p class="FeatureParagraph-sc-2fcgdi-10 iMNjcq"><span>New breathable foam for increased airflow, plus a new humidity-fighting wool cover</span></p></div></div><div class="Feature-sc-2fcgdi-6 eAuNay"><img class="AnimationHelper__icon-scale___2wKDs AnimationHelper__is-animated___3a3Rd FeatureIcon-sc-2fcgdi-7 gMEeob" alt="" src="/assets-spa/images/five-layers.svg" style="animation-delay: 266ms;"><div class="AnimationHelper__fade-up___f87ir AnimationHelper__is-animated___3a3Rd FeatureContent-sc-2fcgdi-8 bnxWZf" style="transition-delay: 266ms;"><h3 class="FeatureHeading-sc-2fcgdi-9 dyaLyo"><span>5 layers of premium foam</span></h3><p class="FeatureParagraph-sc-2fcgdi-10 iMNjcq"><span>Includes a velvety soft top layer for luxurious comfort</span></p></div></div></div>CSS
.FlickityWrapper__carousel___1fAJ1 .flickity-page-dots{bottom:-3.4rem}.FlickityWrapper__carousel___1fAJ1 .flickity-page-dots .dot{opacity:1;width:.5rem;height:.5rem;margin:.375rem;background-color:#a3a3a3}.FlickityWrapper__carousel___1fAJ1 .flickity-page-dots .dot.is-selected{background-color:#525252}.FlickityWrapper__carousel___1fAJ1 .flickity-viewport{padding:0 1.5rem;overflow:hidden}.FlickityWrapper__carousel___1fAJ1 .is-selected{opacity:1}
@media (min-width:1024px){.AnimationHelper__text-fade-up___2yPe_{opacity:0;-webkit-transform:translateY(1.5rem);transform:translateY(1.5rem);-webkit-transition:opacity .5s cubic-bezier(.33,0,.25,1),-webkit-transform .5s cubic-bezier(.33,0,.25,1);transition:opacity .5s cubic-bezier(.33,0,.25,1),-webkit-transform .5s cubic-bezier(.33,0,.25,1);transition:opacity .5s cubic-bezier(.33,0,.25,1),transform .5s cubic-bezier(.33,0,.25,1);transition:opacity .5s cubic-bezier(.33,0,.25,1),transform .5s cubic-bezier(.33,0,.25,1),-webkit-transform .5s cubic-bezier(.33,0,.25,1)}}@media (min-width:1024px){.AnimationHelper__text-fade-up--end___fW5i8{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@media (min-width:1024px){.AnimationHelper__hero-image___1utyR{opacity:.2;-webkit-transition:opacity 1s cubic-bezier(.33,0,.25,1);transition:opacity 1s cubic-bezier(.33,0,.25,1)}}@media (min-width:1024px){.AnimationHelper__hero-image--end___38vH3{opacity:1}}@media (min-width:1024px){.AnimationHelper__hero-image-scale___3cFuu{opacity:.2;-webkit-transform:scale(1.05);transform:scale(1.05);-webkit-transition:opacity 1s cubic-bezier(.33,0,.25,1),-webkit-transform 1s cubic-bezier(.33,0,.25,1);transition:opacity 1s cubic-bezier(.33,0,.25,1),-webkit-transform 1s cubic-bezier(.33,0,.25,1);transition:opacity 1s cubic-bezier(.33,0,.25,1),transform 1s cubic-bezier(.33,0,.25,1);transition:opacity 1s cubic-bezier(.33,0,.25,1),transform 1s cubic-bezier(.33,0,.25,1),-webkit-transform 1s cubic-bezier(.33,0,.25,1)}}@media...