JSFiddle - React, Tailwind, and code Playground

by Ali Khaled

HTML

<div class="FlickityWrapper__carousel___1fAJ1 GreatSleep__carousel___WNOj4"><div class="GreatSleep__slide___2UVwE"><img alt="Risk-free trial" class="GreatSleep__slide-image___3ywkG" src="../assets-spa/images/mattress-comparison/sp-trial.svg"><h4 class="GreatSleep__slide-heading___3_qDq typography__heading-7___2uLOR fonts__calibre-regular___2DvWP">Risk-free trial</h4><p class="GreatSleep__slide-paragraph___3qkBK">We’re confident you’ll love your Casper, so we give you 100 nights to try it on us or we’ll pick it up and give you a full refund.</p></div><div class="GreatSleep__slide___2UVwE"><img alt="Free shipping &amp; returns" class="GreatSleep__slide-image___3ywkG" src="../assets-spa/images/mattress-comparison/sp-shipping-2.svg"><h4 class="GreatSleep__slide-heading___3_qDq typography__heading-7___2uLOR fonts__calibre-regular___2DvWP">Free shipping &amp; returns</h4><p class="GreatSleep__slide-paragraph___3qkBK">Free shipping is included with every order. Returns are free, too. And we do our best to donate every returned mattress to a local charity.</p></div><div class="GreatSleep__slide___2UVwE"><img alt="Exceptional customer service" class="GreatSleep__slide-image___3ywkG" src="../assets-spa/images/mattress-comparison/sp-customerservice.svg"><h4 class="GreatSleep__slide-heading___3_qDq typography__heading-7___2uLOR fonts__calibre-regular___2DvWP">Exceptional customer service</h4><p class="GreatSleep__slide-paragraph___3qkBK">We’ve got more than 40 snooze specialists available seven days a week to answer every question under the moon.</p></div></div>

JavaScript

<!-- Optimizely Production -->
<script type="text/javascript">
  window['optimizely'] = window['optimizely'] || [];
  window['optimizely'].push({
    "type": "cookieExpiration",
    "cookieExpirationDays": 182
  });
</script>
<script src="../assets-spa/optimizely/snippet-c5aa25c8b4a66ceea62c1ba570a76827.js"></script>

<!-- BounceX tag -->
<!-- BounceX tag -->
<script>
  var bouncexID = {
    'de-AT': '2945',
    'en-CA': '2941',
    'fr-CA': '2942',
    'fr-FR': '2944',
    'de-DE': '2943',
    'fr-CH': '2947',
    'de-CH': '2946',
    'en-GB': '2948',
    'en-US': '1115'
  };

  (function(d) {
    var e = d.createElement('script');
    e.src = d.location.protocol + '//tag.bounceexchange.com/' + bouncexID["en-US"] + '/i.js';
    e.async = true;
    d.getElementsByTagName("head")[0].appendChild(e);
  }(document));
</script>


<!-- Lux tag -->
<script>
  LUX = window.LUX || {};
  LUX.samplerate = 100;
</script>
<script src="https://cdn.speedcurve.com/js/lux.js?id=3620362" async defer></script>


<!-- Heap Production -->
<script type="text/javascript">window.heap=window.heap||[],heap.load=function(e,t){window.heap.appid=e,window.heap.config=t=t||{};var r=t.forceSSL||"https:"===document.location.protocol,a=document.createElement("script");a.type="text/javascript",a.async=!0,a.src=(r?"https:":"http:")+"//cdn.heapanalytics.com/js/heap-"+e+".js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(a,n);for(var o=function(e){return function(){heap.push([e].concat(Array.prototype.slice.call(arguments,0)))}},p=["addEventProperties","addUserProperties","clearEventProperties","identify","removeEventProperty","setEventProperties","track","unsetEventProperty"],c=0;c<p.length;c++)heap[p[c]]=o(p[c])}; heap.load("1015148927");</script>

<!-- GA Production -->
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new...