JSFiddle - React, Tailwind, and code Playground

by kalar su

HTML

<div class="content-wrapper">
<!--          <figure class="fallback feature-component feature--component-1"></figure> -->
         <div class="content-card" data-fade-offset="-0.15">
            <h3>Deep bass with <br>range you can feel.</h3>
            <p>The Apple-designed high-excursion woofer is positioned at the top of the speaker facing upwards, creating a wide range of deep bass that surpasses any traditional speaker. A six-microphone array, along with an internal bass-EQ microphone, analyses and compensates for the effect of the room on the bass response, providing rich, consistent sound. And a powerful motor drives the diaphragm a remarkable 20 millimetres, so the bass shines through even when the volume is low.</p>
         </div>
<!--          <figure class="fallback feature-component feature--component-2"></figure> -->
         <div class="content-card" data-fade-offset="0">
            <h3>Far and away <br>an incredible listener.</h3>
            <p>Six microphones positioned around HomePod allow it to pick up all the sound in a room. When you say “Hey Siri”, advanced signal processing, together with echo and noise cancellation, allows HomePod to hear you without the need to raise your voice — even if you’re across the room with loud music playing. After HomePod recognises the words “Hey Siri”, what you say is encrypted and sent anonymously to Apple servers without being tied to your Apple&nbsp;ID.</p>
         </div>
<!--          <figure class="fallback feature-component feature-component-3"></figure> -->
					<div class="content-card" data-fade-offset="0.2">
						<h3>High-fidelity audio <br>that’s all around you.</h3>
						<p>A custom-designed array of seven beamforming tweeters, each with its own amplifier, creates tremendous directional control. Placed around the base and using a folded-horn design, they send the flow of music towards the centre and then out the bottom in a 360-degree pattern, resulting in an all-encompassing sense of space....

CSS

body {
    font-size: 17px;
    line-height: 1.47059;
    font-weight: 400;
    letter-spacing: -.022em;
    font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
    color: #111;
    font-style: normal;
}

.sticky-sec-wrapper {
    display: block;
    overflow: visible;
    position: relative;
    z-index: 1;
    
}
.sticky-wrapper {
  position: relative;
}
.sticky-sec-wrapper .full-feature {
    display: block;
}

.sticky-sec-wrapper .offers-wrapper {
    height: 583px;
    position: -webkit-sticky;
    position: sticky;
    top: 100px;
    left: 0;
    width: 100%;
    z-index: 1;
    height: 825px;
}

.sticky-sec-wrapper .offers-wrapper img{
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.sticky-sec-wrapper .feature-component-1 {
    width: 462px;
    height: 583px;
    background-size: 462px 583px;
    background-repeat: no-repeat;
    /* background-image: url("https://www.apple.com/v/homepod/j/images/overview/guts_1__czrsgofraocy_medium.jpg"); */
}
    
 .sticky-sec-wrapper .feature-component-2 {
    width: 462px;
    height: 583px;
    background-size: 462px 583px;
    background-repeat: no-repeat;
    /* background-image: url("https://www.apple.com/v/homepod/j/images/overview/guts_2__b5vx4igyuknm_medium.jpg"); */
}

.sticky-sec-wrapper .feature-component-3 {
    width: 462px;
    height: 583px;
    background-size: 462px 583px;
    background-repeat: no-repeat;
    /* background-image: url("https://www.apple.com/v/homepod/j/images/overview/guts_3__3gosyadeqhea_medium.jpg"); */
}


 .sticky-sec-wrapper .content-wrapper {
    position: relative;
    z-index: 2;
    padding-bottom: 100vh;
    margin-top: 100px;
    color: white;
}

.sticky-sec-wrapper .content-card {
    padding: 68px 45px;
}
.sticky-sec-wrapper .content-card {
    z-index: 2;
    width: 492px;
    background: rgba(0,0,0,0.8);
    -webkit-box-sizing: border-box;
   ...