JSFiddle - React, Tailwind, and code Playground
by kalar su
HTML
<main id="main" class="main" role="main" data-page-type="overview">
<section class="section section-design" data-analytics-section-engagement="name:design" data-component-list="ProgressiveImage StickySpeaker">
<div class="section-content">
<div class="section-heading transition-complete will-engage did-engage" data-component-list="CopyEngagement CopyParallax" style="transform: translate3d(0px, -15px, 0px);">
<h2 class="typography-headline-super transition-1 large-10 large-centered small-12">Major sound, <br>minor scale.</h2>
<p class="typography-intro-elevated transition-2 large-8 large-centered medium-10 small-12">This purposefully designed speaker creates rich, nuanced sound that defies its size. HomePod combines custom Apple-engineered audio technology and advanced software to deliver precision sound that fills the room. And at less than 18 centimetres tall, HomePod fits anywhere in your home.</p>
</div>
</div>
<div class="sticky-wrapper">
<div class="speaker-components-wrapper full-feature" style="top: 191.5px; transform: translate3d(0px, 0px, 0px);">
<figure class="homepod-speaker-side" style="opacity: 0.001;"></figure>
<figure class="homepod-speaker-guts"></figure>
<figure class="speaker-component homepod-speaker-component-1" style="opacity: 0.999;"></figure>
<figure class="speaker-component homepod-speaker-component-2" style="opacity: 0.999;"></figure>
<figure class="speaker-component homepod-speaker-component-3" style="opacity: 0.999;"></figure>
<figure class="speaker-component homepod-speaker-component-4" style="opacity: 0.999;"></figure>
<figure class="speaker-component homepod-speaker-component-5" style="opacity: 0.999;"></figure>
</div>
<div class="card-wrapper">
<figure class="fallback speaker-component homepod-speaker-component-1"></figure>
<div class="design-card" data-fade-offset=" -0.15">
<h3 class="typography-callout">Deep bass with...