DEV Community: Cruip

Create a Carousel with Progress Indicators using Tailwind and Vue

Cruip — Tue, 09 Jan 2024 11:36:39 +0000

Live Demo / Download

Welcome to the third and final part of this series. In the previous articles, we covered creating a carousel with progress indicators using HTML and React. Now, it's time to dive into Vue. At the end of the tutorial, we will also see how to make our component reusable. That way, we can use it multiple times in the same project. Let's get started!

Create a file for the component

Let's create a file named ProgressSlider.vue in the components folder of our app. In this file, we'll define a Single-File Component (SFC) using the Composition API and TypeScript.

<script setup lang="ts">
import SilderImg01 from '../assets/ps-image-01.png'
import SilderImg02 from '../assets/ps-image-02.png'
import SilderImg03 from '../assets/ps-image-03.png'
import SilderImg04 from '../assets/ps-image-04.png'
import SilderIcon01 from '../assets/ps-icon-01.svg'
import SilderIcon02 from '../assets/ps-icon-02.svg'
import SilderIcon03 from '../assets/ps-icon-03.svg'
import SilderIcon04 from '../assets/ps-icon-04.svg'

const items = [
  {
    img: SilderImg01,
    desc: 'Omnichannel',
    buttonIcon: SilderIcon01,
  },
  {
    img: SilderImg02,
    desc: 'Multilingual',
    buttonIcon: SilderIcon02,
  },
  {
    img: SilderImg03,
    desc: 'Interpolate',
    buttonIcon: SilderIcon03,
  },
  {
    img: SilderImg04,
    desc: 'Enriched',
    buttonIcon: SilderIcon04,
  },
]
</script>

<template>
  <div class="w-full max-w-5xl mx-auto text-center">
    <!-- Item image -->
    <div class="transition-all duration-150 delay-300 ease-in-out">
      <div class="relative flex flex-col">

        <template :key="index" v-for="item in items">
          <img class="rounded-xl" :src="item.img" width="1024" height="576" :alt="item.desc">
        </template>

      </div>
    </div>
    <!-- Buttons -->
    <div class="max-w-xs sm:max-w-sm md:max-w-3xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-4 mt-8">
      <template :key="index" v-for="item in items">
        <button class="p-2 rounded focus:outline-none focus-visible:ring focus-visible:ring-indigo-300 group">
          <span class="text-center flex flex-col items-center">
            <span class="flex items-center justify-center relative w-9 h-9 rounded-full bg-indigo-100 mb-2">
              <img :src="item.buttonIcon" :alt="item.desc">
            </span>
            <span class="block text-sm font-medium text-slate-900 mb-2">{{ item.desc }}</span>
            <span class="block relative w-full bg-slate-200 h-1 rounded-full" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
              <span class="absolute inset-0 bg-indigo-500 rounded-[inherit]" style="width: 0%"></span>
            </span>
          </span>          
        </button>
      </template>
    </div>
  </div>
</template>

This structure mirrors the React component we crafted earlier in this series. While in React we used the map function to iterate over the array of objects, for Vue we leveraged the native v-for directive. The above code returns four images stacked on top of each other, along with buttons displaying their respective names and progress bars at the page's bottom.

Add transitions and define the active element

Now that we've set up the component structure, we can add transitions and define the active element. Once again, we'll use the Headless UI library for transitions:

import { ref } from 'vue'
<script setup lang="ts">
import { TransitionRoot } from '@headlessui/vue'

import SilderImg01 from '../assets/ps-image-01.png'
// ... other image imports

const active = ref<number>(0)

const items = [
  // ... items array
]
</script>

<template>
  <div class="w-full max-w-5xl mx-auto text-center">
    <!-- Item image -->
    <div class="transition-all duration-150 delay-300 ease-in-out">
      <div class="relative flex flex-col">

          <template :key="index" v-for="(item, index) in items">
            <TransitionRoot
              :show="active === index"
              enter="transition ease-in-out duration-500 delay-200 order-first"
              enterFrom="opacity-0 scale-105"
              enterTo="opacity-100 scale-100"
              leave="transition ease-in-out duration-300 absolute"
              leaveFrom="opacity-100 scale-100"
              leaveTo="opacity-0 scale-95"
            >
              <img class="rounded-xl" :src="item.img" width="1024" height="576" :alt="item.desc">
            </TransitionRoot>          
          </template>

      </div>
    </div>
    <!-- Buttons -->
    <div class="max-w-xs sm:max-w-sm md:max-w-3xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-4 mt-8">
      <template :key="index" v-for="(item, index) in items">
          <button
            class="p-2 rounded focus:outline-none focus-visible:ring focus-visible:ring-indigo-300 group"
            @click="active = index"
          >
          <span class="text-center flex flex-col items-center">
            <span class="flex items-center justify-center relative w-9 h-9 rounded-full bg-indigo-100 mb-2">
              <img :src="item.buttonIcon" :alt="item.desc">
            </span>
            <span class="block text-sm font-medium text-slate-900 mb-2">{{ item.desc }}</span>
            <span class="block relative w-full bg-slate-200 h-1 rounded-full" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
              <span class="absolute inset-0 bg-indigo-500 rounded-[inherit]" style="width: 0%"></span>
            </span>
          </span>          
        </button>
      </template>
    </div>
  </div>
</template>

In the code above, we first imported the TransitionRoot component from Headless UI. After that, we declared a ref variable named active and set its initial value to 0. This variable will determine which element is active. Next, we wrapped the img element with the TransitionRoot component and used the v-show directive to display the element only when active is equal to the index of that element. Lastly, we attached a click event to the button, which updates the active variable to the index of the clicked element.

Add automatic rotation functionality

Now we need to add an autoplay function that will make the carousel start spinning on its own as soon as the page loads. It should rotate at regular intervals of 5 seconds. We'll reuse the logic from the previously created component with Alpine.js:

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue'
import { TransitionRoot } from '@headlessui/vue'

import SilderImg01 from '../assets/ps-image-01.png'
// ... other image imports

const duration: number = 5000
const frame = ref<number>(0)
const firstFrameTime = ref(performance.now())
const active = ref<number>(0)

const items = [
// ... items array
]

const startAnimation = () => {
  firstFrameTime.value = performance.now()
  frame.value = requestAnimationFrame(animate)
}

const animate = (now: number) => {
  let timeDifference = now - firstFrameTime.value
  let timeFraction = Math.max(0, timeDifference) / duration
  if (timeFraction <= 1) {
    frame.value = requestAnimationFrame(animate)
  } else {
    timeFraction = 1
    active.value = (active.value + 1) % items.length
  }
}

onMounted(() => startAnimation())

onUnmounted(() => cancelAnimationFrame(frame.value))

watch(active, () => {
  cancelAnimationFrame(frame.value)
  startAnimation()
})
</script>

<template>
  <div class="w-full max-w-5xl mx-auto text-center">
    <!-- Item image -->
    <div class="transition-all duration-150 delay-300 ease-in-out">
      <div class="relative flex flex-col">

          <template :key="index" v-for="(item, index) in items">
            <TransitionRoot
              :show="active === index"
              enter="transition ease-in-out duration-500 delay-200 order-first"
              enterFrom="opacity-0 scale-105"
              enterTo="opacity-100 scale-100"
              leave="transition ease-in-out duration-300 absolute"
              leaveFrom="opacity-100 scale-100"
              leaveTo="opacity-0 scale-95"
            >
              <img class="rounded-xl" :src="item.img" width="1024" height="576" :alt="item.desc">
            </TransitionRoot>          
          </template>

      </div>
    </div>
    <!-- Buttons -->
    <div class="max-w-xs sm:max-w-sm md:max-w-3xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-4 mt-8">
      <template :key="index" v-for="(item, index) in items">
          <button
            class="p-2 rounded focus:outline-none focus-visible:ring focus-visible:ring-indigo-300 group"
            @click="active = index"
          >
          <span class="text-center flex flex-col items-center">
            <span class="flex items-center justify-center relative w-9 h-9 rounded-full bg-indigo-100 mb-2">
              <img :src="item.buttonIcon" :alt="item.desc">
            </span>
            <span class="block text-sm font-medium text-slate-900 mb-2">{{ item.desc }}</span>
            <span class="block relative w-full bg-slate-200 h-1 rounded-full" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
              <span class="absolute inset-0 bg-indigo-500 rounded-[inherit]" style="width: 0%"></span>
            </span>
          </span>          
        </button>
      </template>
    </div>
  </div>
</template>

We included a variable called duration to determine how long each slide will be displayed. Then, we aadded a frame variable and set it to 0. This variable will keep track of the current frame. Additionally, we created another variable called firstFrameTime and set it to the current time using performance.now(). This variable will help us calculate the time passed since the first frame. To start the animation, we used the onMounted lifecycle hook to call the startAnimation method. This method will also be triggered whenever the active variable changes using the watch method. As a result, we have a carousel that automatically switches images every 5 seconds, while still allowing manual navigation between slides.

Provide buttons with progress indicators

The last step is to provide buttons that show the progress. To save time, we have already taken care of the integration:

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue'
import { TransitionRoot } from '@headlessui/vue'

import SilderImg01 from '../assets/ps-image-01.png'
// ... other image imports

const duration: number = 5000
const frame = ref<number>(0)
const firstFrameTime = ref(performance.now())
const active = ref<number>(0)
const progress = ref<number>(0)

const items = [
  // ... items array
]

const startAnimation = () => {
  firstFrameTime.value = performance.now()
  frame.value = requestAnimationFrame(animate)
}

const animate = (now: number) => {
  let timeDifference = now - firstFrameTime.value
  let timeFraction = Math.max(0, timeDifference) / duration
  if (timeFraction <= 1) {
    progress.value = timeFraction * 100
    frame.value = requestAnimationFrame(animate)
  } else {
    timeFraction = 1
    progress.value = 0
    active.value = (active.value + 1) % items.length
  }
}

onMounted(() => startAnimation())

onUnmounted(() => cancelAnimationFrame(frame.value))

watch(active, () => {
  cancelAnimationFrame(frame.value)
  startAnimation()
})
</script>

<template>
  <div class="w-full max-w-5xl mx-auto text-center">
    <!-- Item image -->
    <div class="transition-all duration-150 delay-300 ease-in-out">
      <div class="relative flex flex-col">

          <template :key="index" v-for="(item, index) in items">
            <TransitionRoot
              :show="active === index"
              enter="transition ease-in-out duration-500 delay-200 order-first"
              enterFrom="opacity-0 scale-105"
              enterTo="opacity-100 scale-100"
              leave="transition ease-in-out duration-300 absolute"
              leaveFrom="opacity-100 scale-100"
              leaveTo="opacity-0 scale-95"
            >
              <img class="rounded-xl" :src="item.img" width="1024" height="576" :alt="item.desc">
            </TransitionRoot>          
          </template>

      </div>
    </div>
    <!-- Buttons -->
    <div class="max-w-xs sm:max-w-sm md:max-w-3xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-4 mt-8">
      <template :key="index" v-for="(item, index) in items">
        <button
          class="p-2 rounded focus:outline-none focus-visible:ring focus-visible:ring-indigo-300 group"
          @click="active = index"
        >
          <span class="text-center flex flex-col items-center" :class="active === index ? '' : 'opacity-50 group-hover:opacity-100 group-focus:opacity-100 transition-opacity'">
            <span class="flex items-center justify-center relative w-9 h-9 rounded-full bg-indigo-100 mb-2">
              <img :src="item.buttonIcon" :alt="item.desc">
            </span>
            <span class="block text-sm font-medium text-slate-900 mb-2">{{ item.desc }}</span>
            <span class="block relative w-full bg-slate-200 h-1 rounded-full" role="progressbar" :aria-valuenow="active === index ? progress : 0" aria-valuemin="0" aria-valuemax="100">
              <span class="absolute inset-0 bg-indigo-500 rounded-[inherit]" :style="`${active === index ? `width: ${progress}%` : 'width: 0%'}`"></span>
            </span>
          </span>          
        </button>
      </template>
    </div>
  </div>
</template>

We defined a ref variable named progress and set it to 0. This variable will determine the progress of each slide on a scale from 0 to 100. This variable is needed for determining both the width of the progress bar and the dynamic value of the aria-valuenow attribute of every progress bar. With this final integration, the component is now complete and can be utilized in any Vue project based on Tailwind CSS. However, if you wish to use it multiple times within the same app, it may make sense to transform it into a reusable component.

Make the component reusable

Right now, we have the array of objects defined within the component itself. In order to make the component reusable, we should transfer the array to the parent component and pass it as props to the component. As a result, the component we've been working on will be modified as follows:

<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
import { TransitionRoot } from '@headlessui/vue'

const duration: number = 5000
const itemsRef = ref<HTMLCanvasElement | null>(null)
const frame = ref<number>(0)
const firstFrameTime = ref(performance.now())
const active = ref<number>(0)
const progress = ref<number>(0)

interface Item {
  img: string
  desc: string
  buttonIcon: string
}

const props = defineProps<{
  items: Item[]
}>()

const items = props.items

const startAnimation = () => {
  firstFrameTime.value = performance.now()
  frame.value = requestAnimationFrame(animate)
}

const animate = (now: number) => {
  let timeDifference = now - firstFrameTime.value
  let timeFraction = Math.max(0, timeDifference) / duration
  if (timeFraction <= 1) {    
    progress.value = timeFraction * 100
    frame.value = requestAnimationFrame(animate)
  } else {    
    timeFraction = 1
    progress.value = 0
    active.value = (active.value + 1) % items.length
  }
}

const heightFix = async () => {
  await nextTick()
  if (itemsRef.value && itemsRef.value.parentElement) itemsRef.value.parentElement.style.height = `${itemsRef.value.clientHeight}px`
}

onMounted(() => startAnimation())

onUnmounted(() => cancelAnimationFrame(frame.value))

watch(active, () => {
  cancelAnimationFrame(frame.value)
  startAnimation()
})
</script>

<template>
  <div class="w-full max-w-5xl mx-auto text-center">
    <!-- Item image -->
    <div class="transition-all duration-150 delay-300 ease-in-out">
      <div class="relative flex flex-col" ref="itemsRef">

        <template :key="index" v-for="(item, index) in items">
          <TransitionRoot
            :show="active === index"
            enter="transition ease-in-out duration-500 delay-200 order-first"
            enterFrom="opacity-0 scale-105"
            enterTo="opacity-100 scale-100"
            leave="transition ease-in-out duration-300 absolute"
            leaveFrom="opacity-100 scale-100"
            leaveTo="opacity-0 scale-95"
            @before-enter="heightFix()"
          >
            <img class="rounded-xl" :src="item.img" width="1024" height="576" :alt="item.desc">
          </TransitionRoot>          
        </template>

      </div>
    </div>
    <!-- Buttons -->
    <div class="max-w-xs sm:max-w-sm md:max-w-3xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-4 mt-8">
      <template :key="index" v-for="(item, index) in items">
        <button
          class="p-2 rounded focus:outline-none focus-visible:ring focus-visible:ring-indigo-300 group"
          @click="active = index"
        >
          <span class="text-center flex flex-col items-center" :class="active === index ? '' : 'opacity-50 group-hover:opacity-100 group-focus:opacity-100 transition-opacity'">
            <span class="flex items-center justify-center relative w-9 h-9 rounded-full bg-indigo-100 mb-2">
              <img :src="item.buttonIcon" :alt="item.desc">
            </span>
            <span class="block text-sm font-medium text-slate-900 mb-2">{{ item.desc }}</span>
            <span class="block relative w-full bg-slate-200 h-1 rounded-full" role="progressbar" :aria-valuenow="active === index ? progress : 0" aria-valuemin="0" aria-valuemax="100">
              <span class="absolute inset-0 bg-indigo-500 rounded-[inherit]" :style="`${active === index ? `width: ${progress}%` : 'width: 0%'}`"></span>
            </span>
          </span>          
        </button>
      </template>
    </div>
  </div>
</template>

We created a props variable with the type defineProps that takes an object containing a items property. We also declared the Item TypeScript interface to define the structure of each object in the array. Now, we can define the array of objects in the parent component and pass it as props to the component:

<script setup lang="ts">
import SilderImg01 from '../assets/ps-image-01.png'
import SilderImg02 from '../assets/ps-image-02.png'
import SilderImg03 from '../assets/ps-image-03.png'
import SilderImg04 from '../assets/ps-image-04.png'
import SilderIcon01 from '../assets/ps-icon-01.svg'
import SilderIcon02 from '../assets/ps-icon-02.svg'
import SilderIcon03 from '../assets/ps-icon-03.svg'
import SilderIcon04 from '../assets/ps-icon-04.svg'
import ProgressSlider from '../components/ProgressSlider.vue'

const items = [
  {
    img: SilderImg01,
    desc: 'Omnichannel',
    buttonIcon: SilderIcon01,
  },
  {
    img: SilderImg02,
    desc: 'Multilingual',
    buttonIcon: SilderIcon02,
  },
  {
    img: SilderImg03,
    desc: 'Interpolate',
    buttonIcon: SilderIcon03,
  },
  {
    img: SilderImg04,
    desc: 'Enriched',
    buttonIcon: SilderIcon04,
  },
]
</script>

<template>
  <main class="relative min-h-screen flex flex-col justify-center bg-slate-50 overflow-hidden">
    <div class="w-full max-w-6xl mx-auto px-4 md:px-6 py-24">
      <div class="flex justify-center">
        <ProgressSlider :items="items" />
      </div>
    </div>
  </main>
</template>

Conclusions

We've reached the end of this tutorial in three parts. If you want to learn how to build this component with Alpine.js or Next.js, check out the first and second parts:

Create a Carousel with Progress Indicators using Tailwind and Next.js

Cruip — Tue, 09 Jan 2024 11:25:32 +0000

Live Demo / Download

In the first part of this tutorial, we showed you how to build a modular carousel component with progress indicators using Alpine.js. Now, we're going to do something very similar but with React. We'll create a Next.js component with full TypeScript support using the new App Router introduced in version 13. Let's start by importing the images we'll be using into the public directory of our app. Then, we need to create a file named progress-slider.tsx. In this file, we'll define an array called items containing the data required to populate our carousel. We'll be reusing the HTML structure from the Alpine.js component created previously. Here's our starting point:

import Image from 'next/image'
import SilderImg01 from '@/public/ps-image-01.png'
import SilderImg02 from '@/public/ps-image-02.png'
import SilderImg03 from '@/public/ps-image-03.png'
import SilderImg04 from '@/public/ps-image-04.png'
import SilderIcon01 from '@/public/ps-icon-01.svg'
import SilderIcon02 from '@/public/ps-icon-02.svg'
import SilderIcon03 from '@/public/ps-icon-03.svg'
import SilderIcon04 from '@/public/ps-icon-04.svg'

export default function ProgressSlider() {

  const items = [
    {
      img: SilderImg01,
      desc: 'Omnichannel',
      buttonIcon: SilderIcon01,
    },
    {
      img: SilderImg02,
      desc: 'Multilingual',
      buttonIcon: SilderIcon02,
    },
    {
      img: SilderImg03,
      desc: 'Interpolate',
      buttonIcon: SilderIcon03,
    },
    {
      img: SilderImg04,
      desc: 'Enriched',
      buttonIcon: SilderIcon04,
    },
  ]  

  return (
    <div className="w-full max-w-5xl mx-auto text-center">
      {/* Item image */}
      <div className="transition-all duration-150 delay-300 ease-in-out">
        <div className="relative flex flex-col">

          {items.map((item, index) => (
            <Image className="rounded-xl" src={item.img} width={1024} height={576} alt={item.desc} />
          ))}

        </div>
      </div>
      {/* Buttons */}
      <div className="max-w-xs sm:max-w-sm md:max-w-3xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-4 mt-8">

        {items.map((item, index) => (
          <button
            key={index}
            className="p-2 rounded focus:outline-none focus-visible:ring focus-visible:ring-indigo-300 group"
          >
            <span className="text-center flex flex-col items-center">
              <span className="flex items-center justify-center relative w-9 h-9 rounded-full bg-indigo-100 mb-2">
                <Image src={item.buttonIcon} alt={item.desc} />
              </span>
              <span className="block text-sm font-medium text-slate-900 mb-2">{item.desc}</span>
              <span className="block relative w-full bg-slate-200 h-1 rounded-full" role="progressbar" aria-valuenow={0}>
                <span className="absolute inset-0 bg-indigo-500 rounded-[inherit]" style={{ width: '0%' }}></span>
              </span>
            </span>
          </button>
        ))}

      </div>
    </div>
  )
}

In the code above, we used the map function to loop through the items array and render an Image component along with a corresponding button for each item. The results is a stack of images placed one above the other, with a set of buttons at the bottom.

Define the active element and add transitions

The next step is to add transitions, which we'll integrate using the Transition component from the Headless UI library created by the makers of Tailwind CSS.

'use client'

import { useState } from 'react'
import { Transition } from '@headlessui/react'
import Image from 'next/image'
{/* ... image imports ... */}

export default function ProgressSlider() {

  const [active, setActive] = useState<number>(0)

  const items = [ {/* ... items ... */} ]  

  return (
    <div className="w-full max-w-5xl mx-auto text-center">
      {/* Item image */}
      <div className="transition-all duration-150 delay-300 ease-in-out">
        <div className="relative flex flex-col">

          {items.map((item, index) => (
            <Transition
              key={index}
              show={active === index}
              enter="transition ease-in-out duration-500 delay-200 order-first"
              enterFrom="opacity-0 scale-105"
              enterTo="opacity-100 scale-100"
              leave="transition ease-in-out duration-300 absolute"
              leaveFrom="opacity-100 scale-100"
              leaveTo="opacity-0 scale-95"
            >
              <Image className="rounded-xl" src={item.img} width={1024} height={576} alt={item.desc} />
            </Transition>
          ))}

        </div>
      </div>
      {/* Buttons */}
      <div className="max-w-xs sm:max-w-sm md:max-w-3xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-4 mt-8">

        {items.map((item, index) => (
          <button
            key={index}
            className="p-2 rounded focus:outline-none focus-visible:ring focus-visible:ring-indigo-300 group"
            onClick={() => { setActive(index) }}
          >
            <span className={`text-center flex flex-col items-center ${active === index ? '' : 'opacity-50 group-hover:opacity-100 group-focus:opacity-100 transition-opacity'}`}>
              <span className="flex items-center justify-center relative w-9 h-9 rounded-full bg-indigo-100 mb-2">
                <Image src={item.buttonIcon} alt={item.desc} />
              </span>
              <span className="block text-sm font-medium text-slate-900 mb-2">{item.desc}</span>
              <span className="block relative w-full bg-slate-200 h-1 rounded-full" role="progressbar" aria-valuenow={0}>
                <span className="absolute inset-0 bg-indigo-500 rounded-[inherit]" style={{ width: '0%' }}></span>
              </span>
            </span>
          </button>
        ))}

      </div>
    </div>
  )
}

We added a new state called active to determine which element is currently active. Additionally, we included an onClick event for the button. So, when the button is clicked, the index of the corresponding element becomes the value of the active state. Finally, we enclosed the Image element within the Transition component and used the show property to define which element should be displayed. The properties enter, enterFrom, enterTo, leave, leaveFrom, and leaveTo define the transitions to be applied when an element is shown or hidden. Transitions work but, due to the absolute positioning of the leaving image, the animation produces an annoying flickering effect. Let's fix this by adding a new method:

'use client'

import { useState, useRef, useEffect } from 'react'
import { Transition } from '@headlessui/react'
import Image from 'next/image'
{/* ... image imports ... */}

export default function ProgressSlider() {

  const itemsRef = useRef<HTMLDivElement>(null)
  const [active, setActive] = useState<number>(0)

  const items = [ {/* ... items ... */} ]

  const heightFix = () => {
    if (itemsRef.current && itemsRef.current.parentElement) itemsRef.current.parentElement.style.height = `${itemsRef.current.clientHeight}px`
  }

  useEffect(() => {
    heightFix()
  }, [])  

  return (
    <div className="w-full max-w-5xl mx-auto text-center">
      {/* Item image */}
      <div className="transition-all duration-150 delay-300 ease-in-out">
        <div className="relative flex flex-col" ref={itemsRef}>

          {items.map((item, index) => (
            <Transition
              key={index}
              show={active === index}
              enter="transition ease-in-out duration-500 delay-200 order-first"
              enterFrom="opacity-0 scale-105"
              enterTo="opacity-100 scale-100"
              leave="transition ease-in-out duration-300 absolute"
              leaveFrom="opacity-100 scale-100"
              leaveTo="opacity-0 scale-95"
              beforeEnter={() => heightFix()}
            >
              <Image className="rounded-xl" src={item.img} width={1024} height={576} alt={item.desc} />
            </Transition>
          ))}

        </div>
      </div>
      {/* Buttons */}
      <div className="max-w-xs sm:max-w-sm md:max-w-3xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-4 mt-8">

        {items.map((item, index) => (
          <button
            key={index}
            className="p-2 rounded focus:outline-none focus-visible:ring focus-visible:ring-indigo-300 group"
            onClick={() => { setActive(index) }}
          >
            <span className={`text-center flex flex-col items-center ${active === index ? '' : 'opacity-50 group-hover:opacity-100 group-focus:opacity-100 transition-opacity'}`}>
              <span className="flex items-center justify-center relative w-9 h-9 rounded-full bg-indigo-100 mb-2">
                <Image src={item.buttonIcon} alt={item.desc} />
              </span>
              <span className="block text-sm font-medium text-slate-900 mb-2">{item.desc}</span>
              <span className="block relative w-full bg-slate-200 h-1 rounded-full" role="progressbar" aria-valuenow={0}>
                <span className="absolute inset-0 bg-indigo-500 rounded-[inherit]" style={{ width: '0%' }}></span>
              </span>
            </span>
          </button>
        ))}

      </div>
    </div>
  )
}

The heightFix method is invoked not only when the component is mounted, but also whenever the transition occurs, using the beforeEnter callback provided by the Transition component. This method calculates the height of the element that contains the image and applies it to its parent element, effectively resolving the annoying flickering effect.

Make the carousel autorotate

So far, we've created a carousel that allows navigating through images by clicking buttons. Now, let's add an autorotate feature that will automatically switch the image every 5 seconds. For that, we can reuse a portion of the code we wrote for the previous tutorial:

'use client'

import { useState, useRef, useEffect } from 'react'
import { Transition } from '@headlessui/react'
import Image from 'next/image'
{/* ... image imports ... */}

export default function ProgressSlider() {

  const duration: number = 5000
  const itemsRef = useRef<HTMLDivElement>(null)
  const frame = useRef<number>(0)
  const firstFrameTime = useRef(performance.now())  
  const [active, setActive] = useState<number>(0)

  const items = [ {/* ... items ... */} ]

  useEffect(() => {
    firstFrameTime.current = performance.now()
    frame.current = requestAnimationFrame(animate)
    return () => {
      cancelAnimationFrame(frame.current)
    }
  }, [active])

  const animate = (now: number) => {
    let timeFraction = (now - firstFrameTime.current) / duration
    if (timeFraction <= 1) {
      frame.current = requestAnimationFrame(animate)
    } else {
      timeFraction = 1
      setActive((active + 1) % items.length)
    }
  }  

  const heightFix = () => {
    if (itemsRef.current && itemsRef.current.parentElement) itemsRef.current.parentElement.style.height = `${itemsRef.current.clientHeight}px`
  }

  useEffect(() => {
    heightFix()
  }, [])  

  return (
    <div className="w-full max-w-5xl mx-auto text-center">
      {/* Item image */}
      <div className="transition-all duration-150 delay-300 ease-in-out">
        <div className="relative flex flex-col" ref={itemsRef}>

          {items.map((item, index) => (
            <Transition
              key={index}
              show={active === index}
              enter="transition ease-in-out duration-500 delay-200 order-first"
              enterFrom="opacity-0 scale-105"
              enterTo="opacity-100 scale-100"
              leave="transition ease-in-out duration-300 absolute"
              leaveFrom="opacity-100 scale-100"
              leaveTo="opacity-0 scale-95"
              beforeEnter={() => heightFix()}
            >
              <Image className="rounded-xl" src={item.img} width={1024} height={576} alt={item.desc} />
            </Transition>
          ))}

        </div>
      </div>
      {/* Buttons */}
      <div className="max-w-xs sm:max-w-sm md:max-w-3xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-4 mt-8">

        {items.map((item, index) => (
          <button
            key={index}
            className="p-2 rounded focus:outline-none focus-visible:ring focus-visible:ring-indigo-300 group"
            onClick={() => { setActive(index) }}
          >
            <span className={`text-center flex flex-col items-center ${active === index ? '' : 'opacity-50 group-hover:opacity-100 group-focus:opacity-100 transition-opacity'}`}>
              <span className="flex items-center justify-center relative w-9 h-9 rounded-full bg-indigo-100 mb-2">
                <Image src={item.buttonIcon} alt={item.desc} />
              </span>
              <span className="block text-sm font-medium text-slate-900 mb-2">{item.desc}</span>
              <span className="block relative w-full bg-slate-200 h-1 rounded-full" role="progressbar" aria-valuenow={0}>
                <span className="absolute inset-0 bg-indigo-500 rounded-[inherit]" style={{ width: '0%' }}></span>
              </span>
            </span>
          </button>
        ))}

      </div>
    </div>
  )
}

In the code above:

duration is the time in milliseconds that each image will be displayed before switching to the next one.
frame is a reference to the animation frame that we will use to animate the images.
firstFrameTime is a reference to the time when the animation started.
useEffect is used to start the animation when the component is mounted and when the active state changes.
animate is the function that will be called on each animation frame. It calculates the time fraction and, when it reaches 1, it updates the active state.

Integrate the progress indicator

The last step to complete our component is adding a progress indicator to each button. Let's see how to integrate it:

'use client'

import { useState, useRef, useEffect } from 'react'
import { Transition } from '@headlessui/react'
import Image from 'next/image'
{/* ... image imports ... */}

export default function ProgressSlider() {

  const duration: number = 5000
  const itemsRef = useRef<HTMLDivElement>(null)
  const frame = useRef<number>(0)
  const firstFrameTime = useRef(performance.now())  
  const [active, setActive] = useState<number>(0)
  const [progress, setProgress] = useState<number>(0)

  const items = [ {/* ... items ... */} ]

  useEffect(() => {
    firstFrameTime.current = performance.now()
    frame.current = requestAnimationFrame(animate)
    return () => {
      cancelAnimationFrame(frame.current)
    }
  }, [active])

  const animate = (now: number) => {
    let timeFraction = (now - firstFrameTime.current) / duration
    if (timeFraction <= 1) {
      setProgress(timeFraction * 100)
      frame.current = requestAnimationFrame(animate)
    } else {
      timeFraction = 1
      setProgress(0)
      setActive((active + 1) % items.length)
    }
  } 

  const heightFix = () => {
    if (itemsRef.current && itemsRef.current.parentElement) itemsRef.current.parentElement.style.height = `${itemsRef.current.clientHeight}px`
  }

  useEffect(() => {
    heightFix()
  }, [])  

  return (
    <div className="w-full max-w-5xl mx-auto text-center">
      {/* Item image */}
      <div className="transition-all duration-150 delay-300 ease-in-out">
        <div className="relative flex flex-col" ref={itemsRef}>

          {items.map((item, index) => (
            <Transition
              key={index}
              show={active === index}
              enter="transition ease-in-out duration-500 delay-200 order-first"
              enterFrom="opacity-0 scale-105"
              enterTo="opacity-100 scale-100"
              leave="transition ease-in-out duration-300 absolute"
              leaveFrom="opacity-100 scale-100"
              leaveTo="opacity-0 scale-95"
              beforeEnter={() => heightFix()}
            >
              <Image className="rounded-xl" src={item.img} width={1024} height={576} alt={item.desc} />
            </Transition>
          ))}

        </div>
      </div>
      {/* Buttons */}
      <div className="max-w-xs sm:max-w-sm md:max-w-3xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-4 mt-8">

        {items.map((item, index) => (
          <button
            key={index}
            className="p-2 rounded focus:outline-none focus-visible:ring focus-visible:ring-indigo-300 group"
            onClick={() => { setActive(index); setProgress(0) }}
          >
            <span className={`text-center flex flex-col items-center ${active === index ? '' : 'opacity-50 group-hover:opacity-100 group-focus:opacity-100 transition-opacity'}`}>
              <span className="flex items-center justify-center relative w-9 h-9 rounded-full bg-indigo-100 mb-2">
                <Image src={item.buttonIcon} alt={item.desc} />
              </span>
              <span className="block text-sm font-medium text-slate-900 mb-2">{item.desc}</span>
              <span className="block relative w-full bg-slate-200 h-1 rounded-full" role="progressbar" aria-valuenow={active === index ? progress : 0}>
                <span className="absolute inset-0 bg-indigo-500 rounded-[inherit]" style={{ width: active === index ? `${progress}%` : '0%' }}></span>
              </span>
            </span>
          </button>
        ))}

      </div>
    </div>
  )
}

We added a new state, progress, that gets updated every time the animate function is called. With this value, we can determine the width of the progress bar and set the value of the aria-valuenow property of the containing element. With this, the carousel component is now fully functional. It works perfectly if you only plan to use it once in your app. However, if you want to make it reusable and pass data to be displayed as props, we will need to make a small modification.

Make a reusable component

To make the component reusable, we need to define an interface for the data we want to pass as props, and include the items object within the parentheses of the functional component:

'use client'

import { useState, useRef, useEffect } from 'react'
import Image, { StaticImageData } from 'next/image'
import { Transition } from '@headlessui/react'

interface Item {
  img: StaticImageData
  desc: string
  buttonIcon: StaticImageData
}

export default function ProgressSlider({ items }: { items: Item[] }) {
  const duration: number = 5000
  const itemsRef = useRef<HTMLDivElement>(null)
  const frame = useRef<number>(0)
  const firstFrameTime = useRef(performance.now())
  const [active, setActive] = useState<number>(0)
  const [progress, setProgress] = useState<number>(0)

  useEffect(() => {
    firstFrameTime.current = performance.now()
    frame.current = requestAnimationFrame(animate)
    return () => {
      cancelAnimationFrame(frame.current)
    }
  }, [active])

  const animate = (now: number) => {
    let timeFraction = (now - firstFrameTime.current) / duration
    if (timeFraction <= 1) {
      setProgress(timeFraction * 100)
      frame.current = requestAnimationFrame(animate)
    } else {
      timeFraction = 1
      setProgress(0)
      setActive((active + 1) % items.length)
    }
  }

  const heightFix = () => {
    if (itemsRef.current && itemsRef.current.parentElement) itemsRef.current.parentElement.style.height = `${itemsRef.current.clientHeight}px`
  }

  useEffect(() => {
    heightFix()
  }, [])

  return (
    <div className="w-full max-w-5xl mx-auto text-center">
      {/* Item image */}
      <div className="transition-all duration-150 delay-300 ease-in-out">
        <div className="relative flex flex-col" ref={itemsRef}>

          {items.map((item, index) => (
            <Transition
              key={index}
              show={active === index}
              enter="transition ease-in-out duration-500 delay-200 order-first"
              enterFrom="opacity-0 scale-105"
              enterTo="opacity-100 scale-100"
              leave="transition ease-in-out duration-300 absolute"
              leaveFrom="opacity-100 scale-100"
              leaveTo="opacity-0 scale-95"
              beforeEnter={() => heightFix()}
            >
              <Image className="rounded-xl" src={item.img} width={1024} height={576} alt={item.desc} />
            </Transition>
          ))}

        </div>
      </div>
      {/* Buttons */}
      <div className="max-w-xs sm:max-w-sm md:max-w-3xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-4 mt-8">

        {items.map((item, index) => (
          <button
            key={index}
            className="p-2 rounded focus:outline-none focus-visible:ring focus-visible:ring-indigo-300 group"
            onClick={() => { setActive(index); setProgress(0) }}
          >
            <span className={`text-center flex flex-col items-center ${active === index ? '' : 'opacity-50 group-hover:opacity-100 group-focus:opacity-100 transition-opacity'}`}>
              <span className="flex items-center justify-center relative w-9 h-9 rounded-full bg-indigo-100 mb-2">
                <Image src={item.buttonIcon} alt={item.desc} />
              </span>
              <span className="block text-sm font-medium text-slate-900 mb-2">{item.desc}</span>
              <span className="block relative w-full bg-slate-200 h-1 rounded-full" role="progressbar" aria-valuenow={active === index ? progress : 0}>
                <span className="absolute inset-0 bg-indigo-500 rounded-[inherit]" style={{ width: active === index ? `${progress}%` : '0%' }}></span>
              </span>
            </span>
          </button>
        ))}

      </div>
    </div>
  )
}

Now, we can pass the items array as props to our component from the parent component, which in our case is in the page.tsx file:

export const metadata = {
  title: 'Slider with Progress Indicator - Cruip Tutorials',
  description: 'Page description',
}

import SilderImg01 from '@/public/ps-image-01.png'
import SilderImg02 from '@/public/ps-image-02.png'
import SilderImg03 from '@/public/ps-image-03.png'
import SilderImg04 from '@/public/ps-image-04.png'
import SilderIcon01 from '@/public/ps-icon-01.svg'
import SilderIcon02 from '@/public/ps-icon-02.svg'
import SilderIcon03 from '@/public/ps-icon-03.svg'
import SilderIcon04 from '@/public/ps-icon-04.svg'
import ProgressSlider from '@/components/progress-slider'

export default function ProgressSliderPage() {

  const items = [
    {
      img: SilderImg01,
      desc: 'Omnichannel',
      buttonIcon: SilderIcon01,
    },
    {
      img: SilderImg02,
      desc: 'Multilingual',
      buttonIcon: SilderIcon02,
    },
    {
      img: SilderImg03,
      desc: 'Interpolate',
      buttonIcon: SilderIcon03,
    },
    {
      img: SilderImg04,
      desc: 'Enriched',
      buttonIcon: SilderIcon04,
    },
  ]

  return (
    <main className="relative min-h-screen flex flex-col justify-center bg-slate-50 overflow-hidden">
      <div className="w-full max-w-6xl mx-auto px-4 md:px-6 py-24">
        <div className="flex justify-center">

          <ProgressSlider items={items} />

        </div>
      </div>
    </main>
  )
}

Conclusions

In the second part of this tutorial, we've created a carousel with progress indicators using Tailwind CSS and Next.js. We've also learned how to make the component reusable across our entire application. If you want to see how to build a similar component with Alpine.js or Next.js, I recommend checking out the links below. We also recommend checking out our Tailwind templates if you're looking for similar high-quality components, pre-built, and professionally crafted by us.

Create a Carousel with Progress Indicators using Tailwind and Alpine.js

Cruip — Tue, 19 Dec 2023 09:23:58 +0000

Live Demo / Download

A landing page that lives up to its name must condense information in a clear and effective way. When it comes to show a product's features using images, there's a risk of overwhelming the user with a pletohora of visual content. That's why a carousel of images is often the go-to solution in such cases. The carousel is basically a picture slideshow with some buttons that allow users to navigate between images. In this tutorial, we will see how to create such a component paired with a set of buttons, each of which includes a progress indicator showing the elapsed time for each image. For this example, we took inspiration from the impressive design of Homerun and built our version using Tailwind CSS and Alpine.js. Let's get started!

Creating the structure

As we always do, we've prepared a basic HTML structure using Tailwind classes to get you started:

<div class="w-full max-w-5xl mx-auto text-center">
    <!-- Item image -->
    <div class="transition-all duration-150 delay-300 ease-in-out">
        <div class="relative flex flex-col">
            <div>
                <img class="rounded-xl" src="./ps-image-01.png" width="1024" height="576" alt="Omnichannerl">
            </div>
            <!-- ... more images ... -->
        </div>
    </div>
    <!-- Buttons -->
    <div class="max-w-xs sm:max-w-sm md:max-w-3xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-4 mt-8">
        <button class="p-2 rounded focus:outline-none focus-visible:ring focus-visible:ring-indigo-300 group">
            <span class="text-center flex flex-col items-center">
                <span class="flex items-center justify-center relative w-9 h-9 rounded-full bg-indigo-100 mb-2">
                    <img src="./ps-icon-01.svg" alt="Omnichannel">
                </span>
                <span class="block text-sm font-medium text-slate-900 mb-2">Omnichannel</span>
                <span class="block relative w-full bg-slate-200 h-1 rounded-full" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                    <span class="absolute inset-0 bg-indigo-500 rounded-[inherit]"></span>
                </span>
            </span>
        </button>
        <!-- ... more buttons ... -->
    </div>
</div>

For simplicity, we've included a single image with its corresponding button for now. This draft will be our canvas for dynamically defining the carousel elements using an object.

Defining a JS object with items

In this step, we'll componentize our carousel. Instead of replicating HTML code for each image and button, we'll define an object containing the elements. Then, we'll use an x-for loop to iterate over each element and render it. This way, we can add or remove elements from the carousel by simply modifying the JS object without touching the HTML. Additionally, we'll have code that is easier to read and maintain. Let's start by inserting a <script> tag immediately after the HTML we showed you in the previous paragraph:

<div class="w-full max-w-5xl mx-auto text-center" x-data="carousel">

    <!-- ... component code ... -->

</div>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('carousel', () => ({
            items: [
                {
                    img: 'ps-image-01.png',
                    desc: 'Omnichannel',
                    buttonIcon: 'ps-icon-01.svg',
                },
                {
                    img: 'ps-image-02.png',
                    desc: 'Multilingual',
                    buttonIcon: 'ps-icon-02.svg',
                },
                {
                    img: 'ps-image-03.png',
                    desc: 'Interpolate',
                    buttonIcon: 'ps-icon-03.svg',
                },
                {
                    img: 'ps-image-04.png',
                    desc: 'Enriched',
                    buttonIcon: 'ps-icon-04.svg',
                },                                
            ],                         
        }))
    })
</script>

Here, we've initialized Alpine.js and used Alpine.data(...) to define a carousel object with an array of items. Each item contains information about every carousel elements. Using the x-data="carousel" directive, HTML gains access to this information. Now, let's see how to iterate over each element of the items array and render them in the DOM using the x-for directive:

<div class="w-full max-w-5xl mx-auto text-center" x-data="carousel">
    <!-- Item image -->
    <div class="transition-all duration-150 delay-300 ease-in-out">
        <div class="relative flex flex-col">
            <template x-for="(item, index) in items" :key="index">
                <div>
                    <img class="rounded-xl" :src="item.img" width="1024" height="576" :alt="item.desc">
                </div>
            </template>
        </div>
    </div>
    <!-- Buttons -->
    <div class="max-w-xs sm:max-w-sm md:max-w-3xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-4 mt-8">
        <template x-for="(item, index) in items" :key="index">
            <button class="p-2 rounded focus:outline-none focus-visible:ring focus-visible:ring-indigo-300 group">
                <span class="text-center flex flex-col items-center">
                    <span class="flex items-center justify-center relative w-9 h-9 rounded-full bg-indigo-100 mb-2">
                        <img :src="item.buttonIcon" :alt="item.desc">
                    </span>
                    <span class="block text-sm font-medium text-slate-900 mb-2" x-text="item.desc"></span>
                    <span class="block relative w-full bg-slate-200 h-1 rounded-full" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                        <span class="absolute inset-0 bg-indigo-500 rounded-[inherit]"></span>
                    </span>
                </span>
            </button>
        </template>
    </div>
</div>

Defining the active element

So far, we have created a component with four images stacked on top of each other, each with its corresponding button. Next, let's define the currently active element:

<div class="w-full max-w-5xl mx-auto text-center" x-data="carousel">
    <!-- Item image -->
    <div class="transition-all duration-150 delay-300 ease-in-out">
        <div class="relative flex flex-col">
            <template x-for="(item, index) in items" :key="index">
                <div x-show="active === index">
                    <img class="rounded-xl" :src="item.img" width="1024" height="576" :alt="item.desc">
                </div>
            </template>
        </div>
    </div>
    <!-- Buttons -->
    <div class="max-w-xs sm:max-w-sm md:max-w-3xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-4 mt-8">
        <template x-for="(item, index) in items" :key="index">
            <button class="p-2 rounded focus:outline-none focus-visible:ring focus-visible:ring-indigo-300 group" @click="active = index">
                <span class="text-center flex flex-col items-center" :class="active === index ? '' : 'opacity-50 group-hover:opacity-100 group-focus:opacity-100 transition-opacity'">
                    <span class="flex items-center justify-center relative w-9 h-9 rounded-full bg-indigo-100 mb-2">
                        <img :src="item.buttonIcon" :alt="item.desc">
                    </span>
                    <span class="block text-sm font-medium text-slate-900 mb-2" x-text="item.desc"></span>
                    <span class="block relative w-full bg-slate-200 h-1 rounded-full" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                        <span class="absolute inset-0 bg-indigo-500 rounded-[inherit]"></span>
                    </span>
                </span>
            </button>
        </template>
    </div>
</div>
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('carousel', () => ({
            active: 0,
            items: [
                {
                    img: 'ps-image-01.png',
                    desc: 'Omnichannel',
                    buttonIcon: 'ps-icon-01.svg',
                },
                {
                    img: 'ps-image-02.png',
                    desc: 'Multilingual',
                    buttonIcon: 'ps-icon-02.svg',
                },
                {
                    img: 'ps-image-03.png',
                    desc: 'Interpolate',
                    buttonIcon: 'ps-icon-03.svg',
                },
                {
                    img: 'ps-image-04.png',
                    desc: 'Enriched',
                    buttonIcon: 'ps-icon-04.svg',
                },                                
            ],                         
        }))
    })
</script>

In the code above, we have defined an active property containing the index of the active element - set to 0 by default. Futhermore, we've added an x-show on the div that holds the image. This ensures that only the image with the same index as the active element is shown. Next, we have added a @click handler on the button, updating the active element's index setting. By doing this, when the user clicks on a button, the corresponding image is displayed. Finally, we have used :class directives to dynamically change the button styles based on their current status. The result is a functional carousel enabling users to navigate between images through button clicks. However, transitions between images and the progress indicator are yet to be implemented.

Adding transitions

At this point, let's implement transitions between images. To do this, we'll use the x-transition directives from Alpine.js directly on the HTML element:

<div class="transition-all duration-150 delay-300 ease-in-out">
    <div class="relative flex flex-col">
        <template x-for="(item, index) in items" :key="index">
            <div
                x-show="active === index"
                x-transition:enter="transition ease-in-out duration-500 delay-200 order-first"
                x-transition:enter-start="opacity-0 scale-105"
                x-transition:enter-end="opacity-100 scale-100"
                x-transition:leave="transition ease-in-out duration-300 absolute"
                x-transition:leave-start="opacity-100 scale-100"
                x-transition:leave-end="opacity-0 scale-95"
            >
                <img class="rounded-xl" :src="item.img" width="1024" height="576" :alt="item.desc">
            </div>
        </template>
    </div>
</div>

With these directives and the use of Tailwind classes, both entering and leaving images appear with a subtle scale-down effect. Feel free to customize the transition effect by using different Tailwind classes. You can take inspiration from other components like the testimonials carousel or animated tabs covered in our previous tutorials.

Integrating autoplay

Now that all the transitions are done, let's proceed to the next phase: making the slides automatically progress every 5 seconds. Instead of using the usual techniques like setTimeout or setInterval, we'll opt for requestAnimationFrame. This method is more efficient than the others because it automatically synchronizes with the browser's rendering cycle, ensuring optimal performance. To save time, we'll directly show you the integration of requestAnimationFrame into our component:

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('carousel', () => ({
            duration: 5000,
            active: 0,
            progress: 0,
            firstFrameTime: 0,
            items: [
                {
                    img: 'ps-image-01.png',
                    desc: 'Omnichannel',
                    buttonIcon: 'ps-icon-01.svg',
                },
                {
                    img: 'ps-image-02.png',
                    desc: 'Multilingual',
                    buttonIcon: 'ps-icon-02.svg',
                },
                {
                    img: 'ps-image-03.png',
                    desc: 'Interpolate',
                    buttonIcon: 'ps-icon-03.svg',
                },
                {
                    img: 'ps-image-04.png',
                    desc: 'Enriched',
                    buttonIcon: 'ps-icon-04.svg',
                },                                
            ],
            init() {
                this.startAnimation()
                this.$watch('active', callback => {
                    cancelAnimationFrame(this.frame)
                    this.startAnimation()
                })
            },
            startAnimation() {
                this.progress = 0
                this.$nextTick(() => {
                    this.firstFrameTime = performance.now()
                    this.frame = requestAnimationFrame(this.animate.bind(this))
                })
            },
            animate(now) {
                let timeFraction = (now - this.firstFrameTime) / this.duration
                if (timeFraction <= 1) {
                    this.progress = timeFraction * 100
                    this.frame = requestAnimationFrame(this.animate.bind(this))
                } else {
                    timeFraction = 1
                    this.active = (this.active + 1) % this.items.length
                }
            },            
        }))
    })
</script>

In the code above, we have defined additional properties such as duration, progress, and firstFrameTime. The init method runs when the component is initialised, and calls startAnimation that commences the animation on page load and whenever the active property changes. Finally, the animate method, invoked by startAnimation, calculates the animation progress and updates the active property upon completion.

Integrating progress indicators

With the latest integration, we now have a progress variable storing the animation progress as a value from 0 to 100. This variable will allow us to animate the progress bar of each button, indicating the time each image remains on-screen. Let's see how to integrate it into HTML:

<button class="p-2 rounded focus:outline-none focus-visible:ring focus-visible:ring-indigo-300 group" @click="active = index">
    <span class="text-center flex flex-col items-center" :class="active === index ? '' : 'opacity-50 group-hover:opacity-100 group-focus:opacity-100 transition-opacity'">
        <span class="flex items-center justify-center relative w-9 h-9 rounded-full bg-indigo-100 mb-2">
            <img :src="item.buttonIcon" :alt="item.desc">
        </span>
        <span class="block text-sm font-medium text-slate-900 mb-2" x-text="item.desc"></span>
        <span class="block relative w-full bg-slate-200 h-1 rounded-full" role="progressbar" :aria-valuenow="active === index ? progress : 0" aria-valuemin="0" aria-valuemax="100">
            <span class="absolute inset-0 bg-indigo-500 rounded-[inherit]" :style="`${active === index ? `width: ${progress}%` : 'width: 0%'}`"></span>
        </span>
    </span>
</button>

Great! The component is now fully functional. As a final integration, let's add a heightFix method to ensure the carousel maintains the correct height, especially useful when dealing with images of varying sizes. Here is the final code:

<div class="w-full max-w-5xl mx-auto text-center" x-data="slider">
    <!-- Item image -->
    <div class="transition-all duration-150 delay-300 ease-in-out">
        <div class="relative flex flex-col" x-ref="items">
            <!-- Alpine.js template for items: https://github.com/alpinejs/alpine#x-for -->
            <template x-for="(item, index) in items" :key="index">
                <div
                    x-show="active === index"
                    x-transition:enter="transition ease-in-out duration-500 delay-200 order-first"
                    x-transition:enter-start="opacity-0 scale-105"
                    x-transition:enter-end="opacity-100 scale-100"
                    x-transition:leave="transition ease-in-out duration-300 absolute"
                    x-transition:leave-start="opacity-100 scale-100"
                    x-transition:leave-end="opacity-0 scale-95"
                >
                    <img class="rounded-xl" :src="item.img" width="1024" height="576" :alt="item.desc">
                </div>
            </template>
        </div>
    </div>
    <!-- Buttons -->
    <div class="max-w-xs sm:max-w-sm md:max-w-3xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-4 mt-8">
        <!-- Alpine.js template for buttons: https://github.com/alpinejs/alpine#x-for -->
        <template x-for="(item, index) in items" :key="index">
            <button class="p-2 rounded focus:outline-none focus-visible:ring focus-visible:ring-indigo-300 group" @click="active = index">
                <span class="text-center flex flex-col items-center" :class="active === index ? '' : 'opacity-50 group-hover:opacity-100 group-focus:opacity-100 transition-opacity'">
                    <span class="flex items-center justify-center relative w-9 h-9 rounded-full bg-indigo-100 mb-2">
                        <img :src="item.buttonIcon" :alt="item.desc">
                    </span>
                    <span class="block text-sm font-medium text-slate-900 mb-2" x-text="item.desc"></span>
                    <span class="block relative w-full bg-slate-200 h-1 rounded-full" role="progressbar" :aria-valuenow="active === index ? progress : 0" aria-valuemin="0" aria-valuemax="100">
                        <span class="absolute inset-0 bg-indigo-500 rounded-[inherit]" :style="`${active === index ? `width: ${progress}%` : 'width: 0%'}`"></span>
                    </span>
                </span>
            </button>
        </template>
    </div>
</div>
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('slider', () => ({
            duration: 5000,
            active: 0,
            progress: 0,
            firstFrameTime: 0,
            items: [
                {
                    img: 'ps-image-01.png',
                    desc: 'Omnichannel',
                    buttonIcon: 'ps-icon-01.svg',
                },
                {
                    img: 'ps-image-02.png',
                    desc: 'Multilingual',
                    buttonIcon: 'ps-icon-02.svg',
                },
                {
                    img: 'ps-image-03.png',
                    desc: 'Interpolate',
                    buttonIcon: 'ps-icon-03.svg',
                },
                {
                    img: 'ps-image-04.png',
                    desc: 'Enriched',
                    buttonIcon: 'ps-icon-04.svg',
                },                                
            ],
            init() {
                this.startAnimation()
                this.$watch('active', callback => {
                    cancelAnimationFrame(this.frame)
                    this.startAnimation()
                })
            },
            startAnimation() {
                this.progress = 0
                this.$nextTick(() => {
                    this.heightFix()
                    this.firstFrameTime = performance.now()
                    this.frame = requestAnimationFrame(this.animate.bind(this))
                })
            },
            animate(now) {
                let timeFraction = (now - this.firstFrameTime) / this.duration
                if (timeFraction <= 1) {
                    this.progress = timeFraction * 100
                    this.frame = requestAnimationFrame(this.animate.bind(this))
                } else {
                    timeFraction = 1
                    this.active = (this.active + 1) % this.items.length
                }
            },
            heightFix() {
                this.$nextTick(() => {
                    this.$refs.items.parentElement.style.height = this.$refs.items.children[this.active + 1].clientHeight + 'px'
                })
            }                            
        }))
    })
</script>

Conclusions

In this tutorial, we've seen how to make the most of Alpine.js to create an image carousel with progress indicators. Alpine.js's logic allowed us to build a modular carousel element, just like we would with React or Vue. If you found this tutorial helpful, make sure to take a look at our Tailwind HTML templates. They are all crafted using this incredible framework!

Creating a Tooltip-like Testimonial with Tailwind and Alpine.js

Cruip — Tue, 12 Dec 2023 09:58:38 +0000

Live Demo / Download

Testimonials play a crucial role in digital marketing as they serve as social proof of product quality and customer satisfaction. However, a common issue with testimonials is that they often lack visual appeal. In a previous tutorial, we showed how to build a fancy testimonial slider using Tailwind CSS; now, we are doubling down, drawing inspiration from the cool shot by the Significa team. Breaking away from the ordinary, we will build an unconventional testimonial component that looks original while ensuring a good user experience.

Creating the HTML structure

We are going to create a section made of text and images of clients. On hovering over the image, a tooltip will appear with the endorsement message. To create this component, we will use Tailwind CSS and Alpine.js. Alternating text with images may seem simple, but it's trickier than one may think, especially when it comes to align the elements vertically without affecting the line-height of the text. To save time and focus on the functionality, we've prepared the basic HTML structure with the Tailwind CSS utility classes:

<section class="text-center">
    <div class="font-nycd text-xl text-indigo-500 mb-4">
        <span class="relative inline-flex">
            <span>Our promise</span>
            <svg class="fill-indigo-500 absolute bottom-0" xmlns="http://www.w3.org/2000/svg" width="132" height="4">
                <path fill-opacity=".4" fill-rule="evenodd" d="M131.014 2.344s-39.52 1.318-64.973 1.593c-25.456.24-65.013-.282-65.013-.282C-.34 3.623-.332 1.732.987 1.656c0 0 39.52-1.32 64.973-1.593 25.455-.24 65.012.282 65.012.282 1.356.184 1.37 1.86.042 1.999" />
            </svg>
        </span>
    </div>
    <div class="text-5xl leading-tight font-bold text-slate-900">
        <span>We'll help you boost your revenues</span>
        <div class="relative inline-flex justify-center w-[52px] h-[52px] align-middle -translate-y-1">
            <button class="h-full w-full focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 rounded-[20px] rotate-[4deg] transition duration-200 ease-[cubic-bezier(.5,.85,.25,1.8)] delay-100">
                <img class="absolute top-1/2 -translate-y-1/2 rounded-[inherit]" src="./testimonial-01.jpg" width="52" height="52" alt="Testimonial 01">
            </button>
        </div>
        <span>manage payrolls</span>
        <div class="relative inline-flex justify-center w-[52px] h-[52px] align-middle -translate-y-1">
            <button class="h-full w-full focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 rounded-[20px] -rotate-[4deg] transition duration-200 ease-[cubic-bezier(.5,.85,.25,1.8)] delay-100">
                <img class="absolute top-1/2 -translate-y-1/2 rounded-[inherit]" src="./testimonial-02.jpg" width="52" height="52" alt="Testimonial 02">
            </button>
        </div>
        <span>and save up to 50+ hours in duties every month</span>
        <div class="relative inline-flex justify-center w-[52px] h-[52px] align-middle -translate-y-1">
            <button class="h-full w-full focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 rounded-[20px] rotate-[4deg] transition duration-200 ease-[cubic-bezier(.5,.85,.25,1.8)] delay-100">
                <img class="absolute top-1/2 -translate-y-1/2 rounded-[inherit]" src="./testimonial-03.jpg" width="52" height="52" alt="Testimonial 03">
            </button>
        </div>
    </div>
</section>

Now, let's add the tooltips:

<section class="text-center">
    <div class="font-nycd text-xl text-indigo-500 mb-4">
        <span class="relative inline-flex">
            <span>Our promise</span>
            <svg class="fill-indigo-500 absolute bottom-0" xmlns="http://www.w3.org/2000/svg" width="132" height="4">
                <path fill-opacity=".4" fill-rule="evenodd" d="M131.014 2.344s-39.52 1.318-64.973 1.593c-25.456.24-65.013-.282-65.013-.282C-.34 3.623-.332 1.732.987 1.656c0 0 39.52-1.32 64.973-1.593 25.455-.24 65.012.282 65.012.282 1.356.184 1.37 1.86.042 1.999" />
            </svg>
        </span>
    </div>
    <div class="text-5xl leading-tight font-bold text-slate-900">
        <span>We'll help you boost your revenues</span>
        <div class="relative inline-flex justify-center w-[52px] h-[52px] align-middle -translate-y-1 z-50">
            <button class="h-full w-full focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 rounded-[20px] rotate-[4deg] transition duration-200 ease-[cubic-bezier(.5,.85,.25,1.8)] delay-100">
                <img class="absolute top-1/2 -translate-y-1/2 rounded-[inherit]" src="./testimonial-01.jpg" width="52" height="52" alt="Testimonial 01">
            </button>
            <div id="testimonial-01" role="tooltip" class="absolute top-full pt-5">
                <div class="relative w-80 after:absolute after:-top-1.5 after:left-1/2 after:-translate-x-1/2 after:h-3 after:w-3 after:rounded-tl-sm after:rotate-45 after:bg-slate-900">
                    <div class="relative bg-slate-900 p-5 rounded-3xl shadow-xl text-left text-sm text-slate-200 font-medium space-y-3">
                        <svg class="fill-indigo-500" xmlns="http://www.w3.org/2000/svg" width="17" height="14" aria-hidden="true">
                            <path fill-rule="nonzero" d="M2.014 3.68c.276-1.267.82-2.198 1.629-2.79C4.453.295 5.627 0 7.167 0c.514 0 .908.02 1.185.061L5.035 10.49c-.75 2.494-2.429 3.66-5.035 3.496L2.014 3.68Zm8.648 0c.237-1.227.77-2.147 1.6-2.76C13.09.307 14.274 0 15.814 0c.514 0 .909.02 1.185.061L13.683 10.49c-.79 2.494-2.468 3.66-5.035 3.496L10.662 3.68Z" />
                        </svg>
                        <p>
                            This component is AWESOME. The hover feature is well-thought-out. Even the smaller details, like using colors, really helps everything stay organized. Cruip is amazing and I really enjoy using it.
                        </p>
                        <p>
                            Mary Smith <span class="text-slate-600">-</span> <span class="text-slate-400">Software Engineer</span> 
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <span>manage payrolls</span>
        <div class="relative inline-flex justify-center w-[52px] h-[52px] align-middle -translate-y-1 z-40">
            <button class="h-full w-full focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 rounded-[20px] -rotate-[4deg] transition duration-200 ease-[cubic-bezier(.5,.85,.25,1.8)] delay-100">
                <img class="absolute top-1/2 -translate-y-1/2 rounded-[inherit]" src="./testimonial-02.jpg" width="52" height="52" alt="Testimonial 02">
            </button>
            <div id="testimonial-02" role="tooltip" class="absolute top-full pt-5">
                <div class="relative w-80 after:absolute after:-top-1.5 after:left-1/2 after:-translate-x-1/2 after:h-3 after:w-3 after:rounded-tl-sm after:rotate-45 after:bg-slate-900">
                    <div
                        class="relative bg-slate-900 p-5 rounded-3xl shadow-xl text-left text-sm text-slate-200 font-medium space-y-3">
                        <svg class="fill-indigo-500" xmlns="http://www.w3.org/2000/svg" width="17" height="14" aria-hidden="true">
                            <path fill-rule="nonzero" d="M2.014 3.68c.276-1.267.82-2.198 1.629-2.79C4.453.295 5.627 0 7.167 0c.514 0 .908.02 1.185.061L5.035 10.49c-.75 2.494-2.429 3.66-5.035 3.496L2.014 3.68Zm8.648 0c.237-1.227.77-2.147 1.6-2.76C13.09.307 14.274 0 15.814 0c.514 0 .909.02 1.185.061L13.683 10.49c-.79 2.494-2.468 3.66-5.035 3.496L10.662 3.68Z" />
                        </svg>
                        <p>
                            This component is AWESOME. The hover feature is well-thought-out. Even the smaller details, like using colors, really helps everything stay organized. Cruip is amazing and I really enjoy using it.
                        </p>
                        <p>
                            Mary Smith <span class="text-slate-600">-</span> <span class="text-slate-400">Software Engineer</span> 
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <span>and save up to 50+ hours in duties every month</span>
        <div class="relative inline-flex justify-center w-[52px] h-[52px] align-middle -translate-y-1 z-30">
            <button class="h-full w-full focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 rounded-[20px] rotate-[4deg] transition duration-200 ease-[cubic-bezier(.5,.85,.25,1.8)] delay-100">
                <img class="absolute top-1/2 -translate-y-1/2 rounded-[inherit]" src="./testimonial-03.jpg" width="52" height="52" alt="Testimonial 03">
            </button>
            <div id="testimonial-03" role="tooltip" class="absolute top-full pt-5 [&[x-cloak]]:hidden">
                <div class="relative w-80 after:absolute after:-top-1.5 after:left-1/2 after:-translate-x-1/2 after:h-3 after:w-3 after:rounded-tl-sm after:rotate-45 after:bg-slate-900">
                    <div class="relative bg-slate-900 p-5 rounded-3xl shadow-xl text-left text-sm text-slate-200 font-medium space-y-3">
                        <svg class="fill-indigo-500" xmlns="http://www.w3.org/2000/svg" width="17" height="14" aria-hidden="true">
                            <path fill-rule="nonzero" d="M2.014 3.68c.276-1.267.82-2.198 1.629-2.79C4.453.295 5.627 0 7.167 0c.514 0 .908.02 1.185.061L5.035 10.49c-.75 2.494-2.429 3.66-5.035 3.496L2.014 3.68Zm8.648 0c.237-1.227.77-2.147 1.6-2.76C13.09.307 14.274 0 15.814 0c.514 0 .909.02 1.185.061L13.683 10.49c-.79 2.494-2.468 3.66-5.035 3.496L10.662 3.68Z" />
                        </svg>
                        <p>
                            This component is AWESOME. The hover feature is well-thought-out. Even the smaller details, like using colors, really helps everything stay organized. Cruip is amazing and I really enjoy using it.
                        </p>
                        <p>
                            Mary Smith <span class="text-slate-600">-</span> <span class="text-slate-400">Software Engineer</span> 
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Currently, these tooltips are all visible - we will see later how to hide them with Alpine.js. Notice the strategic use of z-50, z-40, and z-30 classes to control the stacking order and prevent tooltips from being covered by underlying images.

Toggling tooltip visibility

Now, we need to integrate some JavaScript logic to handle tooltip visibility, so add an x-data attribute to the element containing the image:

<div class="relative inline-flex justify-center w-[52px] h-[52px] align-middle -translate-y-1 z-40" x-data="{ open: false }">

Within this directive, we have defined a open property initially set to false, indicating that the tooltip is initially hidden. Next, we want open to become true on hovering over the button, and false when the cursor exits the parent element. To do this, we'll add a @mouseover event to the button and @mouseover.outside to its wrapper:

<div class="relative inline-flex justify-center w-[52px] h-[52px] align-middle -translate-y-1 z-50" x-data="{ open: false }" @mouseover.outside="open = false">
    <button class="h-full w-full focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 rounded-[20px] rotate-[4deg] transition duration-200 ease-[cubic-bezier(.5,.85,.25,1.8)] delay-100" @mouseover="open = true">
        <img class="absolute top-1/2 -translate-y-1/2 rounded-[inherit]" src="./testimonial-01.jpg" width="52" height="52" alt="Testimonial 01">
    </button> ...

Lastly, we'll apply Alpine.js transition utilities for the fade-in/fade-out effect:

<div
    id="testimonial-01"
    role="tooltip"
    class="absolute top-full pt-5 [&[x-cloak]]:hidden"
    x-cloak
>
    <div
        class="relative w-80 after:absolute after:-top-1.5 after:left-1/2 after:-translate-x-1/2 after:h-3 after:w-3 after:rounded-tl-sm after:rotate-45 after:bg-slate-900"
        x-show="open"
        x-transition:enter="transition ease-[cubic-bezier(.5,.85,.25,1.8)] duration-200 delay-100"
        x-transition:enter-start="opacity-0 translate-y-2"
        x-transition:enter-end="opacity-100 translate-y-0"
        x-transition:leave="transition ease-[cubic-bezier(.5,.85,.25,1.8)] duration-100 delay-100"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"                               
    >
        <div class="relative bg-slate-900 p-5 rounded-3xl shadow-xl text-left text-sm text-slate-200 font-medium space-y-3">
            <svg class="fill-indigo-500" xmlns="http://www.w3.org/2000/svg" width="17" height="14" aria-hidden="true">
                <path fill-rule="nonzero" d="M2.014 3.68c.276-1.267.82-2.198 1.629-2.79C4.453.295 5.627 0 7.167 0c.514 0 .908.02 1.185.061L5.035 10.49c-.75 2.494-2.429 3.66-5.035 3.496L2.014 3.68Zm8.648 0c.237-1.227.77-2.147 1.6-2.76C13.09.307 14.274 0 15.814 0c.514 0 .909.02 1.185.061L13.683 10.49c-.79 2.494-2.468 3.66-5.035 3.496L10.662 3.68Z" />
            </svg>
            <p>
                This component is AWESOME. The hover feature is well-thought-out. Even the smaller details, like using colors, really helps everything stay organized. Cruip is amazing and I really enjoy using it.
            </p>
            <p>
                Mary Smith <span class="text-slate-600">-</span> <span class="text-slate-400">Software Engineer</span> 
            </p>
        </div>
    </div>
</div>

Great! Now, the tooltip is hidden by default and fades in - with a subtle vertical translation - when you hover over the image. Also, notice that we have used the x-cloak attribute to prevent the tooltip from briefly appearing before Alpine.js is fully loaded.

Handling keyboard navigation

If you've been following our previous tutorials, you know how important accessibility is to us. That's why, when it comes to implementing this component, we'll make sure that the content can be easily navigated using the keyboard by simply pressing the Tab key. So, let's complete the integration of the button with the addition of a focus event:

<button
    class="h-full w-full focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 rounded-[20px] rotate-[4deg] transition duration-200 ease-[cubic-bezier(.5,.85,.25,1.8)] delay-100"
    @mouseover="open = true"
    @focus="open = true"
>
    <img class="absolute top-1/2 -translate-y-1/2 rounded-[inherit]" src="./testimonial-01.jpg" width="52" height="52" alt="Testimonial 01">
</button>

Now, the tooltip becomes visible when the button receives focus too. However, we still need to close the tooltip when the container element loses focus:

<div
    class="relative inline-flex justify-center w-[52px] h-[52px] align-middle -translate-y-1 z-50"
    x-data="{ open: false }"
    @mouseover.outside="open = false"
    @focusout="await $nextTick();!$el.contains($focus.focused()) && (open = false)"
>
    <button
        class="h-full w-full focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 rounded-[20px] rotate-[4deg] transition duration-200 ease-[cubic-bezier(.5,.85,.25,1.8)] delay-100"
        @mouseover="open = true"
        @focus="open = true"
    > ...

At this point, you might be wondering why we didn't just use the expression open = false for the @mouseover event . Well, if there are links or other focusable elements inside the tooltip, we shouldn't close it! That's why we utilized the focus plugin of Alpine.js to determine if the focused element is within the tooltip. If it's not, then we can close the tooltip.

Prevent tooltip overflow

Now, let's ensure the tooltip doesn't overflow the viewport, especially on varying screen sizes. In cases where the tooltip goes outside the screen, particularly on smaller displays, we'll use a few lines of JavaScript to dynamically adjust its positioning. To start, assign an x-ref="tooltip" to the tooltip's container and add an x-init directive to the element defining the background color:

<div
    id="testimonial-01"
    role="tooltip"
    class="absolute top-full pt-5 [&[x-cloak]]:hidden"
    x-ref="tooltip"
    x-cloak
>
    <div
        class="relative w-80 after:absolute after:-top-1.5 after:left-1/2 after:-translate-x-1/2 after:h-3 after:w-3 after:rounded-tl-sm after:rotate-45 after:bg-slate-900"
        x-show="open"
        x-transition:enter="transition ease-[cubic-bezier(.5,.85,.25,1.8)] duration-200 delay-100"
        x-transition:enter-start="opacity-0 translate-y-2"
        x-transition:enter-end="opacity-100 translate-y-0"
        x-transition:leave="transition ease-[cubic-bezier(.5,.85,.25,1.8)] duration-100 delay-100"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"                               
    >
        <div
            class="relative bg-slate-900 p-5 rounded-3xl shadow-xl text-left text-sm text-slate-200 font-medium space-y-3"
            x-init="$watch('open', value => { $nextTick(() => {
                $refs.tooltip.getBoundingClientRect().left < 0 ? $el.style.left = Math.abs($refs.tooltip.getBoundingClientRect().left) + $root.getBoundingClientRect().left - 4 + 'px' : $el.style.left = null;
                $refs.tooltip.getBoundingClientRect().right > document.documentElement.offsetWidth ? $el.style.right = Math.abs($refs.tooltip.getBoundingClientRect().right) - $root.getBoundingClientRect().right - 4 + 'px' : $el.style.right = null;
            } )} )"                                     
        >
            <svg class="fill-indigo-500" xmlns="http://www.w3.org/2000/svg" width="17" height="14" aria-hidden="true">
                <path fill-rule="nonzero" d="M2.014 3.68c.276-1.267.82-2.198 1.629-2.79C4.453.295 5.627 0 7.167 0c.514 0 .908.02 1.185.061L5.035 10.49c-.75 2.494-2.429 3.66-5.035 3.496L2.014 3.68Zm8.648 0c.237-1.227.77-2.147 1.6-2.76C13.09.307 14.274 0 15.814 0c.514 0 .909.02 1.185.061L13.683 10.49c-.79 2.494-2.468 3.66-5.035 3.496L10.662 3.68Z" />
            </svg>
            <p>
                This component is AWESOME. The hover feature is well-thought-out. Even the smaller details, like using colors, really helps everything stay organized. Cruip is amazing and I really enjoy using it.
            </p>
            <p>
                Mary Smith <span class="text-slate-600">-</span> <span class="text-slate-400">Software Engineer</span> 
            </p>
        </div>
    </div>
</div>

In the code above, the $watch method from Alpine.js monitors changes in the open property. When it detects a change, it triggers a function that adjusts the tooltip's position:

If the toolptip overflows the screen to the left, it moves the tooltip right.
If the toolptip overflows the screen to the right, it moves the tooltip left.

This addition ensures the tooltip remains within the screen boundaries.

Lower sibling opacity on interaction

So far, the component is perfectly functional and accessible, but let's add a subtle enhancement. When a user hovers over an image, we want to decrease the opacity of all other elements. To do this, we'll assign a class bound to the open property:

<div
    class="relative inline-flex justify-center w-[52px] h-[52px] align-middle -translate-y-1 z-50"
    x-data="{ open: false }"
    :class="{ 'active': open }"
    @mouseover.outside="open = false"
    @focusout="await $nextTick();!$el.contains($focus.focused()) && (open = false)"
> ...

In essence, when open is true, the active class is added to the container element. Now, we can use this class to lower the opacity of sibling elements. For those unfamiliar with CSS, the subsequent-sibling combinator (~) can select elements that are siblings occurring after a specific element. So, to lower the opacity of subsequent-sibling elements, we can use the custom class [&.active~*]:opacity-25 on all elements containing text and images. Now, to address the challenge of lowering opacity for preceding elements, we can use the ~ combinator in conjunction with the :has() pseudo-class. This ensures all preceding elements are selected, as explained by Tobias Ahlin Bjerrome. The resulting class is [&:has(~.active)]:opacity-25. Finally, add the transition-opacity and duration-200 classes for a smooth opacity transition effect. With the changes just made, our component is now complete:

<section class="text-center">
    <div class="font-nycd text-xl text-indigo-500 mb-4">
        <span class="relative inline-flex">
            <span>Our promise</span>
            <svg class="fill-indigo-500 absolute bottom-0" xmlns="http://www.w3.org/2000/svg" width="132" height="4">
                <path fill-opacity=".4" fill-rule="evenodd" d="M131.014 2.344s-39.52 1.318-64.973 1.593c-25.456.24-65.013-.282-65.013-.282C-.34 3.623-.332 1.732.987 1.656c0 0 39.52-1.32 64.973-1.593 25.455-.24 65.012.282 65.012.282 1.356.184 1.37 1.86.042 1.999" />
            </svg>
        </span>
    </div>
    <div class="text-5xl leading-tight font-bold text-slate-900">
        <span class="[&:has(~.active)]:opacity-25 [&.active~*]:opacity-25 transition-opacity duration-200">We'll help you boost your revenues</span>
        <div
            class="[&:has(~.active)]:opacity-25 [&.active~*]:opacity-25 transition-opacity duration-200 relative inline-flex justify-center w-[52px] h-[52px] align-middle -translate-y-1 z-50"
            x-data="{ open: false }"
            :class="{ 'active': open }"
            @mouseover.outside="open = false"
            @focusout="await $nextTick();!$el.contains($focus.focused()) && (open = false)"
        >
            <button
                class="h-full w-full focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 rounded-[20px] rotate-[4deg] transition duration-200 ease-[cubic-bezier(.5,.85,.25,1.8)] delay-100"
                :class="{ 'rotate-0': open }"
                aria-labelledby="testimonial-01"
                @mouseover="open = true"
                @focus="open = true"
            >
                <img class="absolute top-1/2 -translate-y-1/2 rounded-[inherit]" src="./testimonial-01.jpg" width="52" height="52" alt="Testimonial 01">
            </button>
            <div
                id="testimonial-01"
                role="tooltip"
                class="absolute top-full pt-5 [&[x-cloak]]:hidden"
                x-ref="tooltip"
                x-cloak
            >
                <div
                    class="relative w-80 after:absolute after:-top-1.5 after:left-1/2 after:-translate-x-1/2 after:h-3 after:w-3 after:rounded-tl-sm after:rotate-45 after:bg-slate-900"
                    x-show="open"
                    x-transition:enter="transition ease-[cubic-bezier(.5,.85,.25,1.8)] duration-200 delay-100"
                    x-transition:enter-start="opacity-0 translate-y-2"
                    x-transition:enter-end="opacity-100 translate-y-0"
                    x-transition:leave="transition ease-[cubic-bezier(.5,.85,.25,1.8)] duration-100 delay-100"
                    x-transition:leave-start="opacity-100"
                    x-transition:leave-end="opacity-0"                               
                >
                    <div
                        class="relative bg-slate-900 p-5 rounded-3xl shadow-xl text-left text-sm text-slate-200 font-medium space-y-3"
                        x-init="$watch('open', value => { $nextTick(() => {
                            $refs.tooltip.getBoundingClientRect().left < 0 ? $el.style.left = Math.abs($refs.tooltip.getBoundingClientRect().left) + $root.getBoundingClientRect().left - 4 + 'px' : $el.style.left = null;
                            $refs.tooltip.getBoundingClientRect().right > document.documentElement.offsetWidth ? $el.style.right = Math.abs($refs.tooltip.getBoundingClientRect().right) - $root.getBoundingClientRect().right - 4 + 'px' : $el.style.right = null;
                        } )} )"                                     
                    >
                        <svg class="fill-indigo-500" xmlns="http://www.w3.org/2000/svg" width="17" height="14" aria-hidden="true">
                            <path fill-rule="nonzero" d="M2.014 3.68c.276-1.267.82-2.198 1.629-2.79C4.453.295 5.627 0 7.167 0c.514 0 .908.02 1.185.061L5.035 10.49c-.75 2.494-2.429 3.66-5.035 3.496L2.014 3.68Zm8.648 0c.237-1.227.77-2.147 1.6-2.76C13.09.307 14.274 0 15.814 0c.514 0 .909.02 1.185.061L13.683 10.49c-.79 2.494-2.468 3.66-5.035 3.496L10.662 3.68Z" />
                        </svg>
                        <p>
                            This component is AWESOME. The hover feature is well-thought-out. Even the smaller details, like using colors, really helps everything stay organized. Cruip is amazing and I really enjoy using it.
                        </p>
                        <p>
                            Mary Smith <span class="text-slate-600">-</span> <span class="text-slate-400">Software Engineer</span> 
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <span class="[&:has(~.active)]:opacity-25 [&.active~*]:opacity-25 transition-opacity duration-200">manage payrolls</span>
        <div
            class="[&:has(~.active)]:opacity-25 [&.active~*]:opacity-25 transition-opacity duration-200 relative inline-flex justify-center w-[52px] h-[52px] align-middle -translate-y-1 z-40"
            x-data="{ open: false }"
            :class="{ 'active': open }"
            @mouseover.outside="open = false"
            @focusout="await $nextTick();!$el.contains($focus.focused()) && (open = false)"
        >
            <button
                class="h-full w-full focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 rounded-[20px] -rotate-[4deg] transition duration-200 ease-[cubic-bezier(.5,.85,.25,1.8)] delay-100"
                :class="{ 'rotate-0': open }"
                aria-labelledby="testimonial-02"
                @mouseover="open = true"
                @focus="open = true"
            >
                <img class="absolute top-1/2 -translate-y-1/2 rounded-[inherit]" src="./testimonial-02.jpg" width="52" height="52" alt="Testimonial 02">
            </button>
            <div
                id="testimonial-02"
                role="tooltip"
                class="absolute top-full pt-5 [&[x-cloak]]:hidden"
                x-ref="tooltip"
                x-cloak
            >
                <div
                    class="relative w-80 after:absolute after:-top-1.5 after:left-1/2 after:-translate-x-1/2 after:h-3 after:w-3 after:rounded-tl-sm after:rotate-45 after:bg-slate-900"
                    x-show="open"
                    x-transition:enter="transition ease-[cubic-bezier(.5,.85,.25,1.8)] duration-200 delay-100"
                    x-transition:enter-start="opacity-0 translate-y-2"
                    x-transition:enter-end="opacity-100 translate-y-0"
                    x-transition:leave="transition ease-[cubic-bezier(.5,.85,.25,1.8)] duration-100 delay-100"
                    x-transition:leave-start="opacity-100"
                    x-transition:leave-end="opacity-0"                               
                >
                    <div
                        class="relative bg-slate-900 p-5 rounded-3xl shadow-xl text-left text-sm text-slate-200 font-medium space-y-3"
                        x-init="$watch('open', value => { $nextTick(() => {
                            $refs.tooltip.getBoundingClientRect().left < 0 ? $el.style.left = Math.abs($refs.tooltip.getBoundingClientRect().left) + $root.getBoundingClientRect().left - 4 + 'px' : $el.style.left = null;
                            $refs.tooltip.getBoundingClientRect().right > document.documentElement.offsetWidth ? $el.style.right = Math.abs($refs.tooltip.getBoundingClientRect().right) - $root.getBoundingClientRect().right - 4 + 'px' : $el.style.right = null;
                        } )} )"                                     
                    >
                        <svg class="fill-indigo-500" xmlns="http://www.w3.org/2000/svg" width="17" height="14" aria-hidden="true">
                            <path fill-rule="nonzero" d="M2.014 3.68c.276-1.267.82-2.198 1.629-2.79C4.453.295 5.627 0 7.167 0c.514 0 .908.02 1.185.061L5.035 10.49c-.75 2.494-2.429 3.66-5.035 3.496L2.014 3.68Zm8.648 0c.237-1.227.77-2.147 1.6-2.76C13.09.307 14.274 0 15.814 0c.514 0 .909.02 1.185.061L13.683 10.49c-.79 2.494-2.468 3.66-5.035 3.496L10.662 3.68Z" />
                        </svg>
                        <p>
                            This component is AWESOME. The hover feature is well-thought-out. Even the smaller details, like using colors, really helps everything stay organized. Cruip is amazing and I really enjoy using it.
                        </p>
                        <p>
                            Mary Smith <span class="text-slate-600">-</span> <span class="text-slate-400">Software Engineer</span> 
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <span class="[&:has(~.active)]:opacity-25 [&.active~*]:opacity-25 transition-opacity duration-200">and save up to 50+ hours in duties every month</span>
        <div
            class="[&:has(~.active)]:opacity-25 [&.active~*]:opacity-25 transition-opacity duration-200 relative inline-flex justify-center w-[52px] h-[52px] align-middle -translate-y-1 z-30"
            x-data="{ open: false }"
            :class="{ 'active': open }"
            @mouseover.outside="open = false"
            @focusout="await $nextTick();!$el.contains($focus.focused()) && (open = false)"
        >
            <button
                class="h-full w-full focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 rounded-[20px] rotate-[4deg] transition duration-200 ease-[cubic-bezier(.5,.85,.25,1.8)] delay-100"
                :class="{ 'rotate-0': open }"
                aria-labelledby="testimonial-03"
                @mouseover="open = true"
                @focus="open = true"
            >
                <img class="absolute top-1/2 -translate-y-1/2 rounded-[inherit]" src="./testimonial-03.jpg" width="52" height="52" alt="Testimonial 03">
            </button>
            <div
                id="testimonial-03"
                role="tooltip"
                class="absolute top-full pt-5 [&[x-cloak]]:hidden"
                x-ref="tooltip"
                x-cloak
            >
                <div
                    class="relative w-80 after:absolute after:-top-1.5 after:left-1/2 after:-translate-x-1/2 after:h-3 after:w-3 after:rounded-tl-sm after:rotate-45 after:bg-slate-900"
                    x-show="open"
                    x-transition:enter="transition ease-[cubic-bezier(.5,.85,.25,1.8)] duration-200 delay-100"
                    x-transition:enter-start="opacity-0 translate-y-2"
                    x-transition:enter-end="opacity-100 translate-y-0"
                    x-transition:leave="transition ease-[cubic-bezier(.5,.85,.25,1.8)] duration-100 delay-100"
                    x-transition:leave-start="opacity-100"
                    x-transition:leave-end="opacity-0"                               
                >
                    <div
                        class="relative bg-slate-900 p-5 rounded-3xl shadow-xl text-left text-sm text-slate-200 font-medium space-y-3"
                        x-init="$watch('open', value => { $nextTick(() => {
                            $refs.tooltip.getBoundingClientRect().left < 0 ? $el.style.left = Math.abs($refs.tooltip.getBoundingClientRect().left) + $root.getBoundingClientRect().left - 4 + 'px' : $el.style.left = null;
                            $refs.tooltip.getBoundingClientRect().right > document.documentElement.offsetWidth ? $el.style.right = Math.abs($refs.tooltip.getBoundingClientRect().right) - $root.getBoundingClientRect().right - 4 + 'px' : $el.style.right = null;
                        } )} )"                                     
                    >
                        <svg class="fill-indigo-500" xmlns="http://www.w3.org/2000/svg" width="17" height="14" aria-hidden="true">
                            <path fill-rule="nonzero" d="M2.014 3.68c.276-1.267.82-2.198 1.629-2.79C4.453.295 5.627 0 7.167 0c.514 0 .908.02 1.185.061L5.035 10.49c-.75 2.494-2.429 3.66-5.035 3.496L2.014 3.68Zm8.648 0c.237-1.227.77-2.147 1.6-2.76C13.09.307 14.274 0 15.814 0c.514 0 .909.02 1.185.061L13.683 10.49c-.79 2.494-2.468 3.66-5.035 3.496L10.662 3.68Z" />
                        </svg>
                        <p>
                            This component is AWESOME. The hover feature is well-thought-out. Even the smaller details, like using colors, really helps everything stay organized. Cruip is amazing and I really enjoy using it.
                        </p>
                        <p>
                            Mary Smith <span class="text-slate-600">-</span> <span class="text-slate-400">Software Engineer</span> 
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Conclusions

This tutorial is yet another demonstration of how powerful and versatile the Tailwind CSS + Alpine.js combo is. With just a few lines of code - all within the HTML document! - we have created an interactive, accessible, and responsive component. If you've found this tutorial useful, we recommend checking out our HTML templates built with Tailwind, all designed with Alpine.js. Feel free to experiment further, customize the component to suit your needs, and explore additional features that Tailwind CSS and Alpine.js have to offer. Happy coding!

Creating a Pricing Table with Range Slider using Tailwind CSS and Alpine.js

Cruip — Tue, 05 Dec 2023 09:34:04 +0000

Live Demo / Download

In the SaaS world, products or services are often offered at a set price, along with a discount for yearly subscriptions. This conventional approach is widely used and demonstrated in this gallery of the best pricing page examples. However, there are situations where the cost depends on quantity. This is known as "tiered pricing" and is commonly used in hosting, storage, APIs, SMS, and other services. Brevo is an example of this, where the pricing plans change depending on the number of emails sent each month. Such pricing structures are typically presented using a range slider, allowing users to adjust the quantity and see the corresponding price. The goal of this tutorial is to create some pricing tables with a range slider, inspired by the example of Brevo and using Tailwind CSS and Alpine.js. As always, we'll pay maximum attention to accessibility requirements, ensuring that our price table is user-friendly for everyone.

Creating the HTML

To structure our component, we'll reuse the pricing tables built in a previous tutorial. This way, we can focus on developing the range slider and its interaction with the prices to be displayed.

<div>

    <!-- Pricing slider -->

    <div class="max-w-sm mx-auto grid gap-6 lg:grid-cols-2 items-start lg:max-w-[728px]">

        <!-- Pricing tab 1 -->
        <div class="h-full">                                
            <div class="relative flex flex-col h-full p-6 pb-10">
                <div class="h-8" aria-hidden="true"></div>
                <div class="mb-5">
                    <div class="text-slate-900 font-semibold mb-1">Starter</div>
                    <div class="inline-flex items-baseline mb-2">
                        <span class="text-slate-900 font-bold text-3xl">$</span>
                        <span class="text-slate-900 font-bold text-4xl">29</span>
                        <span class="text-slate-500 font-medium">/mo</span>
                    </div>
                    <div class="text-sm text-slate-500 mb-5">There are many variations available, but the majority have suffered.</div>
                    <a class="w-full inline-flex justify-center whitespace-nowrap rounded-lg bg-indigo-500 px-3.5 py-2.5 text-sm font-medium text-white shadow-sm shadow-indigo-950/10 hover:bg-indigo-600 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition-colors duration-150" href="#0">
                        Purchase Plan
                    </a>
                </div>
                <div class="text-slate-900 text-sm font-medium mb-4">Includes:</div>
                <ul class="text-slate-600 text-sm space-y-3 grow">
                    <li class="flex items-center">
                        <svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
                            <path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
                        </svg>
                        <span>Unlimited placeholder texts</span>
                    </li>
                    <li class="flex items-center">
                        <svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
                            <path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
                        </svg>
                        <span>Consectetur adipiscing elit</span>
                    </li>
                    <li class="flex items-center">
                        <svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
                            <path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
                        </svg>
                        <span>Excepteur sint occaecat cupidatat</span>
                    </li>
                    <li class="flex items-center">
                        <svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
                            <path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
                        </svg>
                        <span>Officia deserunt mollit anim</span>
                    </li>
                </ul>
            </div>
        </div>

        <!-- Pricing tab 2 -->
        <div class="h-full">
            <div class="relative flex flex-col h-full p-6 pb-10 rounded-2xl bg-slate-900 border border-slate-900 shadow shadow-slate-950/5">
                <div class="absolute top-0 right-0 mr-6 -mt-4">
                    <div class="inline-flex items-center text-xs font-semibold py-1.5 px-3 bg-emerald-500 text-white rounded-full shadow-sm shadow-slate-950/5">Most Popular</div>
                </div>
                <div class="h-8" aria-hidden="true">
                    <svg class="drop-shadow-[0_0_8px_rgba(224,154,19,0.7)]" xmlns="http://www.w3.org/2000/svg" width="24" height="26">
                        <defs>
                            <linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="100%">
                                <stop offset="0%" stop-color="#FBBF24" />
                                <stop offset="100%" stop-color="#F59E0B" />
                            </linearGradient>
                        </defs>
                        <path fill="url(#a)" fill-rule="evenodd" d="M15 0 0 16h11L9 26l15-16H13z" />
                    </svg>
                </div>
                <div class="mb-5">
                    <div class="text-slate-200 font-semibold mb-1">Business</div>
                    <div class="inline-flex items-baseline mb-2">
                        <span class="text-slate-200 font-bold text-3xl">$</span>
                        <span class="text-slate-200 font-bold text-4xl">49</span>
                        <span class="text-slate-500 font-medium">/mo</span>
                    </div>
                    <div class="text-sm text-slate-500 mb-5">There are many variations available, but the majority have suffered.</div>
                    <a class="w-full inline-flex justify-center whitespace-nowrap rounded-lg bg-indigo-500 px-3.5 py-2.5 text-sm font-medium text-white shadow-sm shadow-indigo-950/10 hover:bg-indigo-600 focus-visible:outline-none focus-visible:ring focus-visible:ring-slate-600 transition-colors duration-150" href="#0">
                        Purchase Plan
                    </a>
                </div>
                <div class="text-slate-200 text-sm font-medium mb-4">Everything in Starter, plus:</div>
                <ul class="text-slate-400 text-sm space-y-3 grow">
                    <li class="flex items-center">
                        <svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
                            <path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
                        </svg>
                        <span>Unlimited placeholder texts</span>
                    </li>
                    <li class="flex items-center">
                        <svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
                            <path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
                        </svg>
                        <span>Consectetur adipiscing elit</span>
                    </li>
                    <li class="flex items-center">
                        <svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
                            <path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
                        </svg>
                        <span>Excepteur sint occaecat cupidatat</span>
                    </li>
                    <li class="flex items-center">
                        <svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
                            <path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
                        </svg>
                        <span>Officia deserunt mollit anim</span>
                    </li>
                    <li class="flex items-center">
                        <svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
                            <path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
                        </svg>
                        <span>Predefined chunks as necessary</span>
                    </li>
                </ul>
            </div>
        </div>

    </div>

</div>

In the above code, we've have two pricing tables, one for the "Starter" plan and a visually distinct one in dark theme for the "Business" plan. To save time, we've pre-styled these components for you. Now let's see how to integrate the range slider and make it functional.

Creating the range slider

Before building this component, I took some time to think about whether to use a native range input or a custom slider with ARIA attributes. In the end, I chose first option. Although styling a range input can be tricky, it's easier than building a slider from scratch, especially when it comes to making it fully functional with JavaScript. Futhermore, we decided to use Alpine.js because we prefer quick solutions rather than diving into JavaScript complexities. By the end of this tutorial, you'll see that handling the whole logic was easier than styling the slider! Let's start by adding an input element to the page:

<div class="max-w-sm mx-auto lg:max-w-3xl space-y-3 mb-12 lg:mb-16">
    <div class="text-center text-sm text-slate-700 font-medium">10K contacts/month</div>
    <div class="relative flex items-center">
        <input type="range" min="0" max="4" aria-valuetext="10K contacts/month" aria-label="Pricing Slider">
    </div>
</div>

Currently, the slider doesn't have any styles. It looks differently in various browsers as it is a native HTML element. The purpose of this tutorial is to give the slider a custom and consistent style across all browsers.

Styling the slider thumb

Before continuing, let's carefully examine the slider design and strategize our approach: The slider thumb is essentially a white circle with a subtle shadow, measuring 20x20 pixels. We'll apply the appropriate style to the pseudo-element that represents it - ::-webkit-slider-thumb in Webkit-based browsers (Chrome, Safari, Edge, etc.) and ::-moz-range-thumb in Firefox. Let's outline the Tailwind classes to be added to the input element:

<div class="max-w-sm mx-auto lg:max-w-3xl space-y-3 mb-12 lg:mb-16">
    <div class="text-center text-sm text-slate-700 font-medium">10K contacts/month</div>
    <div class="relative flex items-center">
        <input class="
            relative appearance-none cursor-pointer w-full bg-transparent focus:outline-none
            [&::-webkit-slider-thumb]:appearance-none
            [&::-webkit-slider-thumb]:h-5
            [&::-webkit-slider-thumb]:w-5
            [&::-webkit-slider-thumb]:rounded-full
            [&::-webkit-slider-thumb]:bg-white
            [&::-webkit-slider-thumb]:shadow
            [&::-webkit-slider-thumb]:focus-visible:ring
            [&::-webkit-slider-thumb]:focus-visible:ring-indigo-300
            [&::-moz-range-thumb]:h-5
            [&::-moz-range-thumb]:w-5                            
            [&::-moz-range-thumb]:rounded-full
            [&::-moz-range-thumb]:bg-white
            [&::-moz-range-thumb]:border-none
            [&::-moz-range-thumb]:shadow
            [&::-moz-range-thumb]:focus-visible:ring
            [&::-moz-range-thumb]:focus-visible:ring-indigo-300                            
        " type="range" min="0" max="4" aria-valuetext="10K contacts/month" aria-label="Pricing Slider">
    </div>
</div>

For those who prefer the traditional "semantic CSS" approach, the code may seem somewhat extensive at this point. This is a consequence of employing utility classes. If the multitude of classes within a single element feels overwhelming, you can always create a custom class and apply it to the input element. Note that we've also already styled the focus. So, when you use the Tab key, you can easily navigate to the slider and adjust the value using the right and left arrows. When the element is in focus, you'll see a nice indigo-colored focus ring that matches the slider's background color.

Styling the slider track

Let's go back to our original design and focus on the slider track now: it's a horizontal bar with rounded edges, measuring 6 pixels in height and having a very light gray color. There are two main complexities with this element:

The area to the left of the thumb is a linear gradient, starting with a light indigo and ending with a slightly darker indigo.
The entire track is marked with a tick at each step.

It's a real CSS challenge. We cannot use the pseudo-elements ::-webkit-slider-runnable-track and ::-moz-range-track because a single element doesn't allow us to incorporate all the details from the design. So, let's make native track transparent and add a new HTML element as a replacement:

<div class="max-w-sm mx-auto lg:max-w-3xl space-y-3 mb-12 lg:mb-16">
    <div class="text-center text-sm text-slate-700 font-medium">10K contacts/month</div>
    <div class="relative flex items-center">
        <div class="
            absolute left-2.5 right-2.5 h-1.5 bg-slate-200 rounded-full overflow-hidden
        " aria-hidden="true"></div>            
        <input class="
            relative appearance-none cursor-pointer w-full bg-transparent focus:outline-none
            [&::-webkit-slider-thumb]:appearance-none
            [&::-webkit-slider-thumb]:h-5
            [&::-webkit-slider-thumb]:w-5
            [&::-webkit-slider-thumb]:rounded-full
            [&::-webkit-slider-thumb]:bg-white
            [&::-webkit-slider-thumb]:shadow
            [&::-webkit-slider-thumb]:focus-visible:ring
            [&::-webkit-slider-thumb]:focus-visible:ring-indigo-300
            [&::-moz-range-thumb]:h-5
            [&::-moz-range-thumb]:w-5                            
            [&::-moz-range-thumb]:rounded-full
            [&::-moz-range-thumb]:bg-white
            [&::-moz-range-thumb]:border-none
            [&::-moz-range-thumb]:shadow
            [&::-moz-range-thumb]:focus-visible:ring
            [&::-moz-range-thumb]:focus-visible:ring-indigo-300                            
        " type="range" min="0" max="4" aria-valuetext="10K contacts/month" aria-label="Pricing Slider">
    </div>
</div>

As you can see, we've added a <div< with the aria-hidden="true" attribute that hides it to screen readers. Next, we'll use the ::before pseudo-element to create the linear gradient and the ::after pseudo-element for the ticks. Let's start with the linear gradient:

<div class="
    absolute left-2.5 right-2.5 h-1.5 bg-slate-200 rounded-full overflow-hidden
    before:absolute
    before:inset-0
    before:bg-gradient-to-r
    before:from-indigo-300
    before:to-indigo-500
    before:[mask-image:_linear-gradient(to_right,theme(colors.white),theme(colors.white)_50%,transparent_50%)]                
" aria-hidden="true"></div>

The fill bar spans the entire bar and is perfectly clipped in half using a mask - we'll see how to dinalically adjust the mask position based on the slider value later. Now, let's use the ::after pseudo-element to show the ticks:

<div class="
    absolute left-2.5 right-2.5 h-1.5 bg-slate-200 rounded-full overflow-hidden
    before:absolute
    before:inset-0
    before:bg-gradient-to-r
    before:from-indigo-300
    before:to-indigo-500
    before:[mask-image:_linear-gradient(to_right,theme(colors.white),theme(colors.white)_50%,transparent_50%)]
    after:absolute
    after:inset-0
    after:bg-[repeating-linear-gradient(to_right,transparent,transparent_calc(25%-1px),theme(colors.white/.7)_calc(25%-1px),theme(colors.white/.7)_calc(25%+1px))]
" aria-hidden="true"></div>

We are using a repeating linear gradient for the ticks. The slider steps are 5, so the bar consists of 4 segments, each occupying 25% of the total length. To create the repeating gradient pattern for the ticks with a total width of 2 pixels, we'll follow this approach:

From 0% to 25% - 1, the color remains transparent.
From 25% - 1 to 25% + 1, the color is white with 70% opacity.

This way, we'll have 3 ticks at 25%, 50%, and 75% of the bar's length. Cool, isn't it? As obvious, the value 25% works as long as we have a range of 5 steps. We'll see later how to make this value dynamic.

Adding Alpine.js logic

So far, we've styled out range slider. Now, let's add Alpine.js to add interactivity. First, include the library in the document head:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

The next step is to add an x-data attribute to the element that contains both the range input and the pricing tables:

<div x-data="pricingSlider">

    <!-- Pricing slider -->
    <div class="max-w-sm mx-auto lg:max-w-3xl space-y-3 mb-12 lg:mb-16">
        <div class="text-center text-sm text-slate-700 font-medium">10K contacts/month</div>
            ...

Now, immediately after the x-data="pricingSlider"> element, we'll add a <script> tag containing the JavaScript object with the logic:

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('pricingSlider', () => ({
            value: 2,
            prices: [
                {
                    contacts: '1K',
                    plans: {
                        starter: '5',
                        business: '9',
                    }
                },
                {
                    contacts: '5K',
                    plans: {
                        starter: '19',
                        business: '29',
                    }
                },
                {
                    contacts: '10K',
                    plans: {
                        starter: '29',
                        business: '49',
                    }
                },
                {
                    contacts: '15K',
                    plans: {
                        starter: '39',
                        business: '59',
                    }
                },
                {
                    contacts: '1M',
                    plans: {
                        starter: '1,490',
                        business: '2,490',
                    }
                },
            ],
            segmentsWidth: '100%',
            progress: '0%',
            segments: 1,
            calculateProgress() {
                this.segmentsWidth = 100 / this.segments + '%'
                this.progress = 100 / this.segments * this.value + '%'
            },
            init() {
                this.segments = this.prices.length - 1
                this.calculateProgress()
                this.$watch('value', () => this.calculateProgress())
            },
        }))
    })
</script>

A few things are going on in this code, so let's break it down:

The value property represents the current slider value, initialized to 2.
The prices property contains an array of objects, each representing a segment of the slider, with corresponding contact numbers and prices for "Starter" and "Business" plans.
The segmentsWidth property denotes the width of each slider, initialized to 100%.
The progress property represents the width of the fill bar, initialized to 0%.
The calculateProgress() method calculates the width of each segment (segmentsWidth) and the width of the fill bar (progress).
The init() method, executed at startup, invokes the calculateProgress() method. Additionally, it adds a watcher to the value property so that every time the slider value changes, the calculateProgress() method is called again.

Completing the slider functionality

Now we have everything we need to make the slider functional. Let's bind the slider value:

<input class="
    relative appearance-none cursor-pointer w-full bg-transparent focus:outline-none
    [&::-webkit-slider-thumb]:appearance-none
    [&::-webkit-slider-thumb]:h-5
    [&::-webkit-slider-thumb]:w-5
    [&::-webkit-slider-thumb]:rounded-full
    [&::-webkit-slider-thumb]:bg-white
    [&::-webkit-slider-thumb]:shadow
    [&::-webkit-slider-thumb]:focus-visible:ring
    [&::-webkit-slider-thumb]:focus-visible:ring-indigo-300
    [&::-moz-range-thumb]:h-5
    [&::-moz-range-thumb]:w-5                            
    [&::-moz-range-thumb]:rounded-full
    [&::-moz-range-thumb]:bg-white
    [&::-moz-range-thumb]:border-none
    [&::-moz-range-thumb]:shadow
    [&::-moz-range-thumb]:focus-visible:ring
    [&::-moz-range-thumb]:focus-visible:ring-indigo-300                            
" type="range" min="0" :max="prices.length - 1" :aria-valuetext="`${prices[value].contacts} contacts/month`" aria-label="Pricing Slider" x-model="value">

Using the x-model directive, we've bound the slider value to the value property of the JavaScript object. This way, we can update the value property every time the slider is moved. Additionally, we've used :max to dynamically set the maximum value of the slider to prices.length - 1. Finally, we've used the :aria-valuetext directive to update the value of the aria-valuetext attribute every time the slider is moved. This way, the screen reader will read the the right number of contacts. Similarly, the paragraph above the slider will reflect the current value:

<div class="text-center text-sm text-slate-700 font-medium" x-text="`${prices[value].contacts} contacts/month`"></div>

Next, to display the correct number of ticks and adjust the fill bar during slider interaction, we need to bring the values of the segmentsWidth and progress properties into the HTML as CSS variables. To do this, we'll use the :style directive:

<div class="max-w-sm mx-auto lg:max-w-3xl space-y-3 mb-12 lg:mb-16">
    <div class="text-center text-sm text-slate-700 font-medium" x-text="`${prices[value].contacts} contacts/month`"></div>
    <div class="relative flex items-center" :style="`--progress:${progress};--segments-width:${segmentsWidth}`">
        ...

Now that we have set these two CSS variables, we can replace the hardcoded values in the previously defined custom classes:

<div class="
    absolute left-2.5 right-2.5 h-1.5 bg-slate-200 rounded-full overflow-hidden
    before:absolute
    before:inset-0
    before:bg-gradient-to-r
    before:from-indigo-300
    before:to-indigo-500
    before:[mask-image:_linear-gradient(to_right,theme(colors.white),theme(colors.white)_var(--progress),transparent_var(--progress))]
    after:absolute
    after:inset-0
    after:bg-[repeating-linear-gradient(to_right,transparent,transparent_calc(var(--segments-width)-1px),theme(colors.white/.7)_calc(var(--segments-width)-1px),theme(colors.white/.7)_calc(var(--segments-width)+1px))]
    [&[x-cloak]]:hidden
" aria-hidden="true" x-cloak></div>

Finally, to complete the design, we need to show the value of each tick below the slider. To do this, we'll use a <ul> element and populate it with an x-for loop:

        ...
        <input class="
            relative appearance-none cursor-pointer w-full bg-transparent focus:outline-none
            [&::-webkit-slider-thumb]:appearance-none
            [&::-webkit-slider-thumb]:h-5
            [&::-webkit-slider-thumb]:w-5
            [&::-webkit-slider-thumb]:rounded-full
            [&::-webkit-slider-thumb]:bg-white
            [&::-webkit-slider-thumb]:shadow
            [&::-webkit-slider-thumb]:focus-visible:ring
            [&::-webkit-slider-thumb]:focus-visible:ring-indigo-300
            [&::-moz-range-thumb]:h-5
            [&::-moz-range-thumb]:w-5                            
            [&::-moz-range-thumb]:rounded-full
            [&::-moz-range-thumb]:bg-white
            [&::-moz-range-thumb]:border-none
            [&::-moz-range-thumb]:shadow
            [&::-moz-range-thumb]:focus-visible:ring
            [&::-moz-range-thumb]:focus-visible:ring-indigo-300                            
        " type="range" min="0" :max="prices.length - 1" :aria-valuetext="`${prices[value].contacts} contacts/month`" aria-label="Pricing Slider" x-model="value">
    </div>
    <div>
        <ul class="flex justify-between text-xs font-medium text-slate-500 px-2.5">
            <template x-for="(price, index) in prices" :key="index">
                <li class="relative"><span class="absolute -translate-x-1/2" x-text="price.contacts"></span></li>
            </template>
        </ul>
    </div>
</div>

Updating prices on slider move

To complete our slider, we just need to update the prices based on the current slider value. All we have to do is add an x-text binding to the pricing tables element. Our component is ready to go! Here's the final code:

<div x-data="pricingSlider">

    <!-- Pricing slider -->
    <div class="max-w-sm mx-auto lg:max-w-3xl space-y-3 mb-12 lg:mb-16">
        <div class="text-center text-sm text-slate-700 font-medium" x-text="`${prices[value].contacts} contacts/month`"></div>
        <div class="relative flex items-center" :style="`--progress:${progress};--segments-width:${segmentsWidth}`">
            <div class="
                absolute left-2.5 right-2.5 h-1.5 bg-slate-200 rounded-full overflow-hidden
                before:absolute
                before:inset-0
                before:bg-gradient-to-r
                before:from-indigo-300
                before:to-indigo-500
                before:[mask-image:_linear-gradient(to_right,theme(colors.white),theme(colors.white)_var(--progress),transparent_var(--progress))]
                after:absolute
                after:inset-0
                after:bg-[repeating-linear-gradient(to_right,transparent,transparent_calc(var(--segments-width)-1px),theme(colors.white/.7)_calc(var(--segments-width)-1px),theme(colors.white/.7)_calc(var(--segments-width)+1px))]
                [&[x-cloak]]:hidden
            " aria-hidden="true" x-cloak></div>
            <input class="
                relative appearance-none cursor-pointer w-full bg-transparent focus:outline-none
                [&::-webkit-slider-thumb]:appearance-none
                [&::-webkit-slider-thumb]:h-5
                [&::-webkit-slider-thumb]:w-5
                [&::-webkit-slider-thumb]:rounded-full
                [&::-webkit-slider-thumb]:bg-white
                [&::-webkit-slider-thumb]:shadow
                [&::-webkit-slider-thumb]:focus-visible:ring
                [&::-webkit-slider-thumb]:focus-visible:ring-indigo-300
                [&::-moz-range-thumb]:h-5
                [&::-moz-range-thumb]:w-5                            
                [&::-moz-range-thumb]:rounded-full
                [&::-moz-range-thumb]:bg-white
                [&::-moz-range-thumb]:border-none
                [&::-moz-range-thumb]:shadow
                [&::-moz-range-thumb]:focus-visible:ring
                [&::-moz-range-thumb]:focus-visible:ring-indigo-300                            
            " type="range" min="0" :max="prices.length - 1" :aria-valuetext="`${prices[value].contacts} contacts/month`" aria-label="Pricing Slider" x-model="value">
        </div>
        <div>
            <ul class="flex justify-between text-xs font-medium text-slate-500 px-2.5">
                <template x-for="(price, index) in prices" :key="index">
                    <li class="relative"><span class="absolute -translate-x-1/2" x-text="price.contacts"></span></li>
                </template>
            </ul>
        </div>
    </div>

    <div class="max-w-sm mx-auto grid gap-6 lg:grid-cols-2 items-start lg:max-w-[728px]">

        <!-- Pricing tab 1 -->
        <div class="h-full">                                
            <div class="relative flex flex-col h-full p-6 pb-10">
                <div class="h-8" aria-hidden="true"></div>
                <div class="mb-5">
                    <div class="text-slate-900 font-semibold mb-1">Starter</div>
                    <div class="inline-flex items-baseline mb-2">
                        <span class="text-slate-900 font-bold text-3xl">$</span>
                        <span class="text-slate-900 font-bold text-4xl" x-text="prices[value].plans.starter"></span>
                        <span class="text-slate-500 font-medium">/mo</span>
                    </div>
                    <div class="text-sm text-slate-500 mb-5">There are many variations available, but the majority have suffered.</div>
                    <a class="w-full inline-flex justify-center whitespace-nowrap rounded-lg bg-indigo-500 px-3.5 py-2.5 text-sm font-medium text-white shadow-sm shadow-indigo-950/10 hover:bg-indigo-600 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition-colors duration-150" href="#0">
                        Purchase Plan
                    </a>
                </div>
                <div class="text-slate-900 text-sm font-medium mb-4">Includes:</div>
                <ul class="text-slate-600 text-sm space-y-3 grow">
                    <li class="flex items-center">
                        <svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
                            <path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
                        </svg>
                        <span>Unlimited placeholder texts</span>
                    </li>
                    <li class="flex items-center">
                        <svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
                            <path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
                        </svg>
                        <span>Consectetur adipiscing elit</span>
                    </li>
                    <li class="flex items-center">
                        <svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
                            <path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
                        </svg>
                        <span>Excepteur sint occaecat cupidatat</span>
                    </li>
                    <li class="flex items-center">
                        <svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
                            <path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
                        </svg>
                        <span>Officia deserunt mollit anim</span>
                    </li>
                </ul>
            </div>
        </div>

        <!-- Pricing tab 2 -->
        <div class="h-full">
            <div class="relative flex flex-col h-full p-6 pb-10 rounded-2xl bg-slate-900 border border-slate-900 shadow shadow-slate-950/5">
                <div class="absolute top-0 right-0 mr-6 -mt-4">
                    <div class="inline-flex items-center text-xs font-semibold py-1.5 px-3 bg-emerald-500 text-white rounded-full shadow-sm shadow-slate-950/5">Most Popular</div>
                </div>
                <div class="h-8" aria-hidden="true">
                    <svg class="drop-shadow-[0_0_8px_rgba(224,154,19,0.7)]" xmlns="http://www.w3.org/2000/svg" width="24" height="26">
                        <defs>
                            <linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="100%">
                                <stop offset="0%" stop-color="#FBBF24" />
                                <stop offset="100%" stop-color="#F59E0B" />
                            </linearGradient>
                        </defs>
                        <path fill="url(#a)" fill-rule="evenodd" d="M15 0 0 16h11L9 26l15-16H13z" />
                    </svg>
                </div>
                <div class="mb-5">
                    <div class="text-slate-200 font-semibold mb-1">Business</div>
                    <div class="inline-flex items-baseline mb-2">
                        <span class="text-slate-200 font-bold text-3xl">$</span>
                        <span class="text-slate-200 font-bold text-4xl" x-text="prices[value].plans.business"></span>
                        <span class="text-slate-500 font-medium">/mo</span>
                    </div>
                    <div class="text-sm text-slate-500 mb-5">There are many variations available, but the majority have suffered.</div>
                    <a class="w-full inline-flex justify-center whitespace-nowrap rounded-lg bg-indigo-500 px-3.5 py-2.5 text-sm font-medium text-white shadow-sm shadow-indigo-950/10 hover:bg-indigo-600 focus-visible:outline-none focus-visible:ring focus-visible:ring-slate-600 transition-colors duration-150" href="#0">
                        Purchase Plan
                    </a>
                </div>
                <div class="text-slate-200 text-sm font-medium mb-4">Everything in Starter, plus:</div>
                <ul class="text-slate-400 text-sm space-y-3 grow">
                    <li class="flex items-center">
                        <svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
                            <path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
                        </svg>
                        <span>Unlimited placeholder texts</span>
                    </li>
                    <li class="flex items-center">
                        <svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
                            <path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
                        </svg>
                        <span>Consectetur adipiscing elit</span>
                    </li>
                    <li class="flex items-center">
                        <svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
                            <path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
                        </svg>
                        <span>Excepteur sint occaecat cupidatat</span>
                    </li>
                    <li class="flex items-center">
                        <svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
                            <path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
                        </svg>
                        <span>Officia deserunt mollit anim</span>
                    </li>
                    <li class="flex items-center">
                        <svg class="w-3 h-3 fill-emerald-500 mr-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
                            <path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
                        </svg>
                        <span>Predefined chunks as necessary</span>
                    </li>
                </ul>
            </div>
        </div>

    </div>

</div>
<!-- Slider data and functionality: https://github.com/alpinejs/alpine -->
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('pricingSlider', () => ({
            value: 2,
            prices: [
                {
                    contacts: '1K',
                    plans: {
                        starter: '5',
                        business: '9',
                    }
                },
                {
                    contacts: '5K',
                    plans: {
                        starter: '19',
                        business: '29',
                    }
                },
                {
                    contacts: '10K',
                    plans: {
                        starter: '29',
                        business: '49',
                    }
                },
                {
                    contacts: '15K',
                    plans: {
                        starter: '39',
                        business: '59',
                    }
                },
                {
                    contacts: '1M',
                    plans: {
                        starter: '1,490',
                        business: '2,490',
                    }
                },
            ],
            segmentsWidth: '100%',
            progress: '0%',
            segments: 1,
            calculateProgress() {
                this.segmentsWidth = 100 / this.segments + '%'
                this.progress = 100 / this.segments * this.value + '%'
            },
            init() {
                this.segments = this.prices.length - 1
                this.calculateProgress()
                this.$watch('value', () => this.calculateProgress())
            },
        }))
    })
</script>

Conclusions

The component we've just created has a simple yet effective logic and, as you've seen, it performs really well. It's easy to customize and is designed to automatically adapt to a different number of steps. You can easily define your price tiers by adding or removing elements from the prices array. If you're wondering how to create a similar component with Next.js or Vue, we recommend taking a look at Gray - our Tailwind template specifically designed for startup landing pages.

Making a Text Scramble Animation with JavaScript

Cruip — Tue, 28 Nov 2023 09:51:28 +0000

Live Demo / Download

The text scramble effect is a cool animation that rapidly unveils text by randomly changing characters - just like those scenes in movies where hackers decode strings of text! Inspired by Evervault's blog, we'll make a navigation menu with that kind of effect when you click on links. Plus, we'll give you both light and dark versions of the menu, so you can integrate this example into any of our Tailwind templates.

Getting started with the HTML

To get started, we can define the structure of our navigation menu in HTML. We'll create a <nav> element that contains a list of links. And for styling, we'll make use of Tailwind CSS:

<nav class="text-sm flex flex-col space-y-2" role="navigation">
    <a href="#0" class="relative font-medium text-slate-500 hover:text-slate-600 py-0.5">General</a>
    <a href="#0" class="relative font-medium text-slate-500 hover:text-slate-600 py-0.5">Work Preferences</a>
    <a href="#0" class="relative font-medium text-slate-500 hover:text-slate-600 py-0.5">Integrations</a>
    <a href="#0" class="relative font-medium text-slate-500 hover:text-slate-600 py-0.5">Billing</a>
    <a href="#0" class="relative font-medium text-slate-500 hover:text-slate-600 py-0.5">Subscription</a>
    <a href="#0" class="relative font-medium text-slate-500 hover:text-slate-600 py-0.5">Security</a>
    <a href="#0" class="relative font-medium text-slate-500 hover:text-slate-600 py-0.5">Data Sources</a>
</nav>

Creating a JS class for the animation

We'll create a JavaScript class, just as we use to do in our tutorials. This way, we can easily apply the animation to various elements within the page. So, create a file called text-scramble.js and include it in the HTML document, just before the closing </body> tag:

<script src="./text-scramble.js"></script>

Now, in the JS file, we're going to create a class called TextScramble. Inside this class there will be an init method that initializes the animation:

class TextScramble {
  constructor(element) {
    this.element = element;
    this.links = Array.from(this.element.querySelectorAll('a'));
    this.init();
  }

  init = () => {
    this.links.forEach(link => {
      link.addEventListener('click', (event) => {
        event.preventDefault();
        // Run the scramble animation
      });
    });
  }
}

// Init TextScramble
const scrambleElements = document.querySelectorAll('[data-text-scramble]');
scrambleElements.forEach((element) => {
  new TextScramble(element);
});

To use the TextScramble class, simply add the data-text-scramble attribute to the navigation menu:

<nav class="text-sm flex flex-col space-y-2" role="navigation" data-text-scramble>

Next, the class selects all the links within <nav> and triggers the animation when each link is clicked.

Managing the active link

Now, in our HTML, mark the first link with the attribute aria-current="page". This attribute informs the browser which link is currently "active" and allows you to apply specific styles tto differentiate it from the other links.

<nav class="text-sm flex flex-col space-y-2" role="navigation">
    <a href="#0" class="relative font-medium text-slate-500 hover:text-slate-600 py-0.5 aria-[current]:text-indigo-500 before:absolute before:top-0 before:-left-5 before:h-full before:w-0.5 aria-[current]:before:bg-indigo-400" aria-current="page">General</a>
    <a href="#0" class="relative font-medium text-slate-500 hover:text-slate-600 py-0.5 aria-[current]:text-indigo-500 before:absolute before:top-0 before:-left-5 before:h-full before:w-0.5 aria-[current]:before:bg-indigo-400">Work Preferences</a>
    <a href="#0" class="relative font-medium text-slate-500 hover:text-slate-600 py-0.5 aria-[current]:text-indigo-500 before:absolute before:top-0 before:-left-5 before:h-full before:w-0.5 aria-[current]:before:bg-indigo-400">Integrations</a>
    <a href="#0" class="relative font-medium text-slate-500 hover:text-slate-600 py-0.5 aria-[current]:text-indigo-500 before:absolute before:top-0 before:-left-5 before:h-full before:w-0.5 aria-[current]:before:bg-indigo-400">Billing</a>
    <a href="#0" class="relative font-medium text-slate-500 hover:text-slate-600 py-0.5 aria-[current]:text-indigo-500 before:absolute before:top-0 before:-left-5 before:h-full before:w-0.5 aria-[current]:before:bg-indigo-400">Subscription</a>
    <a href="#0" class="relative font-medium text-slate-500 hover:text-slate-600 py-0.5 aria-[current]:text-indigo-500 before:absolute before:top-0 before:-left-5 before:h-full before:w-0.5 aria-[current]:before:bg-indigo-400">Security</a>
    <a href="#0" class="relative font-medium text-slate-500 hover:text-slate-600 py-0.5 aria-[current]:text-indigo-500 before:absolute before:top-0 before:-left-5 before:h-full before:w-0.5 aria-[current]:before:bg-indigo-400">Data Sources</a>
</nav>

To make the active link more prominent, we used the aria-[current]: prefix to give it a different color (aria-[current]:text-indigo-500). We also added a vertical line to the left of each link using the ::before pseudo-element. By default, this line is transparent, but it turns indigo when the link is active (aria-[current]:before:bg-indigo-400). Great! Now let's take care of the active link while navigating.

class TextScramble {
  constructor(element) {
    this.element = element;
    this.links = Array.from(this.element.querySelectorAll('a'));
    this.activeLink = this.links.find(link => link.getAttribute('aria-current') === 'page');
    this.init();
  }

  handleActiveLink = (link) => {
    if (this.activeLink) {
      this.activeLink.removeAttribute('aria-current');
    }
    this.activeLink = link;
    this.activeLink.setAttribute('aria-current', 'page');
  }  

  init = () => {
    this.links.forEach(link => {
      link.addEventListener('click', (event) => {
        event.preventDefault();
        if (link === this.activeLink) return;
        this.handleActiveLink(link);
      });
    });
  }
}

// Init TextScramble
const scrambleElements = document.querySelectorAll('[data-text-scramble]');
scrambleElements.forEach((element) => {
  new TextScramble(element);
});

The key steps we took are as follows:

We added an activeLink property to the class, which finds the active link within the links array.
Then we created the handleActiveLink method, whose task is updating the active link whenever a menu link is clicked. It removes the aria-current attribute from the active link, sets the new active link, and assigns it the aria-current="page" attribute.
Lastly, we added a condition inside the init method to check if the clicked link is already active - if (link === this.activeLink). If it is, the init method's execution is halted with a return. Otherwise, we call the handleActiveLink method to update the active link.

Handling the scramble effect

Now comes the more intricate part. We'll introduce a couple of new properties and methods to handle the shuffle effect.

class TextScramble {
  constructor(element) {
    this.element = element;
    this.links = Array.from(this.element.querySelectorAll('a'));
    this.activeLink = this.links.find(link => link.getAttribute('aria-current') === 'page');
    this.isScrambling = false;
    this.intervalId = null;    
    this.init();
  }

  handleActiveLink = (link) => {
    if (this.activeLink) {
      this.activeLink.removeAttribute('aria-current');
    }
    this.activeLink = link;
    this.activeLink.setAttribute('aria-current', 'page');
  }

  startScramble = (link) => {
    if (this.isScrambling) {
      this.stopScramble(this.activeLink);
    }
    this.isScrambling = true;
    this.intervalId = setInterval(() => {
      // Do stuff...
      console.log('Scrambling...');
    }, 50);
  }

  stopScramble = (link) => {
    this.isScrambling = false;
    clearInterval(this.intervalId);
  }  

  init = () => {
    this.links.forEach(link => {
      link.addEventListener('click', (event) => {
        event.preventDefault();
        if (link === this.activeLink) return;
        this.startScramble(link);
        this.handleActiveLink(link);
      });
    });
  }
}

// Init TextScramble
const scrambleElements = document.querySelectorAll('[data-text-scramble]');
scrambleElements.forEach((element) => {
  new TextScramble(element);
});

Let's begin with the newly added properties:

The boolean property isScrambling indicates whether the animation is currently in progress. By default, it is set to false and changes to true when the animation starts. This property is useful for stopping the ongoing animation when a different link is clicked.
The variable intervalId is used to store the ID of the interval used for the animation. By saving the interval ID, we can later clear the interval using clearInterval(this.intervalId) when the animation is completed or aborted.

Now, the new methods:

The method startScramble is responsible for initiating the animation. It is called when a menu link is clicked. This method first checks if the animation is already in progress and stops it if necessary. Then, it sets the isScrambling property to true and starts a time interval that executes a function every 50 milliseconds - currently, this function is empty, but we will fill it in shortly.
The method stopScramble is used to stop the animation. It is called when the animation is completed or aborted. This method sets the isScrambling property to false and stops the time interval by using clearInterval(this.intervalId).

Handling prefix and suffix

First, we'll create a property called this.input; it will store the text of the link that is going to be animated. Next, we'll add two more properties: this.prefix and this.suffix. These properties will be used to replace the link text during the animation. Let's take a practical example to understand how it works. Suppose you click on a link with the text "General" (i.e. this.input). The animation will go through the following iterations:

""(this.prefix) + "spfjert" (this.suffix)
"G" (this.prefix) + "pfjfqr" (this.suffix)
"Ge" (this.prefix) + "jdqll" (this.suffix)
"Gen" (this.prefix) + "rmnb" (this.suffix)
"Gene" (this.prefix) + "swt" (this.suffix)
"Gener" (this.prefix) + "oe" (this.suffix)
"Genera" (this.prefix) + "z" (this.suffix)
"General" (this.prefix) + "" (this.suffix)

At the beginning, the prefix is an empty string, while the suffix consists of random characters. In each iteration, the prefix will be the same as the first letter of this.input, and the suffix will contain all the subsequent characters. This pattern continues until the prefix matches this.input, and the suffix becomes an empty string. Now, let's see how we can integrate this logic into our class.

class TextScramble {
  constructor(element) {
    this.element = element;
    this.links = Array.from(this.element.querySelectorAll('a'));
    this.activeLink = this.links.find(link => link.getAttribute('aria-current') === 'page');
    this.input = null;
    this.prefix = '';
    this.suffix = '';
    this.isScrambling = false;
    this.intervalId = null;    
    this.init();
  }

  handleActiveLink = (link) => {
    if (this.activeLink) {
      this.activeLink.removeAttribute('aria-current');
    }
    this.activeLink = link;
    this.activeLink.setAttribute('aria-current', 'page');
  }

  startScramble = (link) => {
    if (this.isScrambling) {
      this.stopScramble(this.activeLink);
    }
    this.isScrambling = true;
    this.input = link.textContent;
    this.prefix = '';
    this.suffix = 'xxx';    
    this.intervalId = setInterval(() => this.scrambleIteration(link), 50);
  }

  scrambleIteration = (link) => {
    let nextChar = this.input.charAt(this.prefix.length);
    if (nextChar === '') {
      this.stopScramble(link);
    } else {
      this.prefix += nextChar;
      this.suffix = 'xxx';
      link.textContent = this.prefix;
      link.setAttribute('data-scramble-suffix', this.suffix);
    }
  }  

  stopScramble = (link) => {
    link.textContent = this.input;
    link.setAttribute('data-scramble-suffix', '');
    this.isScrambling = false;
    clearInterval(this.intervalId);
  }

  init = () => {
    this.links.forEach(link => {
      link.addEventListener('click', (event) => {
        event.preventDefault();
        if (link === this.activeLink) return;
        this.startScramble(link);
        this.handleActiveLink(link);
      });
    });
  }
}

// Init TextScramble
const scrambleElements = document.querySelectorAll('[data-text-scramble]');
scrambleElements.forEach((element) => {
  new TextScramble(element);
});

In addition to adding this.input, this.prefix, and this.suffix, we also integrated the startScramble and stopScramble methods to update the values of this.prefix and this.suffix with each iteration. Moreover, while scrambling, the scrambleIteration method appends a data-scramble-suffix attribute to the link, which contains the value of the this.suffix property. This attribute will be used to display the suffix using the link's ::after pseudo-element - with Tailwind, all you have to do is add the class after:content-[attr(data-scramble-suffix)] to all menu links.

Generating random characters

The last step is to generate the appropriate length of random characters for the suffix. To do this, we'll create a method called randomChars returning a string of random letters:

randomChars = (length) => {
  let result = '';
  for (let i = 0; i < length; i++) {
    const randomIndex = Math.floor(Math.random() * this.charsetLength);
    result += `${this.charset[randomIndex]}`;
  }
  return result;
}

Now, we just need to use this method in the startScramble and scrambleIteration methods. So, the final code for the class will look like this:

class TextScramble {
  constructor(element) {
    this.element = element;
    this.links = Array.from(this.element.querySelectorAll('a'));
    this.activeLink = this.links.find(link => link.getAttribute('aria-current') === 'page');
    this.input = null;
    this.prefix = '';
    this.suffix = '';
    this.isScrambling = false;
    this.intervalId = null;
    this.charset = 'abcdefghijklmnopqrstuvwxyz';
    this.charsetLength = this.charset.length;
    this.scrambleIteration = this.scrambleIteration.bind(this);
    this.init();
  }

  handleActiveLink = (link) => {
    if (this.activeLink) {
      this.activeLink.removeAttribute('aria-current');
    }
    this.activeLink = link;
    this.activeLink.setAttribute('aria-current', 'page');
  }

  startScramble = (link) => {
    if (this.isScrambling) {
      this.stopScramble(this.activeLink);
    }
    this.isScrambling = true;
    this.input = link.textContent;
    this.prefix = '';
    this.suffix = this.randomChars(this.input.length);
    this.intervalId = setInterval(() => this.scrambleIteration(link), 50);
  }

  scrambleIteration = (link) => {
    let nextChar = this.input.charAt(this.prefix.length);
    if (nextChar === '') {
      this.stopScramble(link);
    } else {
      this.prefix += nextChar;
      this.suffix = this.randomChars(this.input.length - this.prefix.length);
      link.textContent = this.prefix;
      link.setAttribute('data-scramble-suffix', this.suffix);
    }
  }

  stopScramble = (link) => {
    link.textContent = this.input;
    link.setAttribute('data-scramble-suffix', '');
    this.isScrambling = false;
    clearInterval(this.intervalId);
  }

  randomChars = (length) => {
    let result = '';
    for (let i = 0; i < length; i++) {
      const randomIndex = Math.floor(Math.random() * this.charsetLength);
      result += `${this.charset[randomIndex]}`;
    }
    return result;
  }

  init = () => {
    this.links.forEach(link => {
      link.addEventListener('click', (event) => {
        event.preventDefault();
        if (link === this.activeLink) return;
        this.startScramble(link);
        this.handleActiveLink(link);
      });
    });
  }
}

// Init TextScramble
const scrambleElements = document.querySelectorAll('[data-text-scramble]');
scrambleElements.forEach((element) => {
  new TextScramble(element);
});

Conclusions

Creating appealing effects and animations that don't compromise a website's usability can be challenging. In this tutorial, we tried to add a bit of fun to the menu interaction without hurting the overall experience. Did we achieve our goal? Reach out and let us know what you think!

Changing Background Color on Scroll with JavaScript

Cruip — Tue, 21 Nov 2023 09:11:22 +0000

Live Demo / Download

Scroll animations seem to be a growing trend lately, especially for landing pages for SaaS and modern tech startups. These animations are conceived to beautify the user experience, as long as they are wisely coded and not too intrusive for the final user. We've previously created tutorials on this topic, like the card waterfall animation on scroll or the gradient text reveal. Today we'll be adding another example to the list: changing the background color of a page as you scroll. This effect will allow you to add dynamism to your design and make every section unique.

Structuring the HTML

In this demo, we will create a <main> element with four sections, each associated with a different color from the Tailwind palette: Sky 200, Purple 200, Pink 200, and Emerald 200. To ensure smooth color transitions, we won't directly apply background colors to individual sections. Instead, we'll use the Intersection Observer API to determine which section is dominant and apply the corresponding background color to the main container. Here's the basic HTML structure:

<main class="relative min-h-screen flex flex-col bg-sky-200 overflow-hidden">
    <div class="w-full max-w-5xl mx-auto px-4 md:px-6">
        <div class="pt-6 pb-12 md:pt-10 md:pb-20">

            <!-- Sky section -->
            <section>
                <!-- ... content ... -->
            </section>

            <!-- Purple section -->
            <section>
                <!-- ... content ... -->
            </section>

            <!-- Pink section -->
            <section>
                <!-- ... content ... -->
            </section>

            <!-- Emerald section -->
            <section>
                <!-- ... content ... -->
            </section>

        </div>
    </div>
</main>

We've set the default background color of the <main> element to Sky 200 (bg-sky-200, which is the color of the first section) and ensured it fills at least the height of the viewport using min-h-screen.

Creating a JS class

Let's create a file bg-scroll.js in the project's root, and include it in our HTML document:

<script src="./bg-scroll.js"></script>

In that file, we'll define a class named BgScroll exposing a init method for initializing the observer. Here's the code to start:

class BgScroll {
  constructor(element) {
    this.element = element;
    this.init();
  }

  init() {
  }
}

// Init BgScroll
const el = document.querySelector('[data-bg-scroll]');
new BgScroll(el);

At the end of the file, we specify how to initialize the class by adding a data-bg-scroll attribute to the <main> element in the HTML:

<main class="relative min-h-screen flex flex-col bg-sky-200 overflow-hidden" data-bg-scroll>

Creating the observer

Now, we'll write the code to initialize the observer:

class BgScroll {
  constructor(element) {
    this.element = element;
    this.sections = this.element.querySelectorAll('section');
    this.observeSection = this.observeSection.bind(this);
    this.init();
  }

  observeSection(entries) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        console.log(entry.target);
      }
    });
  }  

  init() {
    const observer = new IntersectionObserver(this.observeSection, { rootMargin: '-50% 0% -50% 0%' });
    this.sections.forEach(section => {
      observer.observe(section);
    });
  }
}

// Init BgScroll
const el = document.querySelector('[data-bg-scroll]');
new BgScroll(el);

We have created a new instance in the constructor, called sections, which contains an array of all the sections within the main element. In the init() method, we loop through this array and create a new observer for each section. The first argument of the IntersectionObserver is the callback that will be executed every time a section enters or exits the viewport (i.e., observeSection). The second argument is an options object, which contains the rootMargin property. By using the values -50% 0% -50% 0%, we're telling the IntersectionObserver to trigger the callback when the section intersects an imaginary horizontal line positioned 50% from the top of the viewport. For testing purposes, we've added a console.log inside the observeSection method to identify the dominant section as you scroll.

Changing the background color

Now that we know which is the dominant section, we can apply the corresponding background color to the <main> element. To do this, we'll define the background color of each section using a data-bg-color attribute and the Tailwind class of the corresponding background color:

<main class="relative min-h-screen flex flex-col bg-sky-200 overflow-hidden" data-bg-scroll>
    <div class="w-full max-w-5xl mx-auto px-4 md:px-6">
        <div class="pt-6 pb-12 md:pt-10 md:pb-20">

            <!-- Sky section -->
            <section data-bg-class="bg-sky-200">
                <!-- ... content .... -->
            </section>

            <!-- Purple section -->
            <section data-bg-class="bg-purple-200">
                <!-- ... content .... -->
            </section>

            <!-- Pink section -->
            <section data-bg-class="bg-pink-200">
                <!-- ... content .... -->
            </section>

            <!-- Emerald section -->
            <section data-bg-class="bg-emerald-200">
                <!-- ... content .... -->
            </section>

        </div>
    </div>
</main>

Inside the observeSection method, we can now retrieve the attribute's value - which is entry.target.dataset.bgClass - and apply it to the main element:

class BgScroll {
  constructor(element) {
    this.element = element;
    this.sections = this.element.querySelectorAll('section');
    this.observeSection = this.observeSection.bind(this);
    this.init();
  }

  observeSection(entries) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // Remove all bg classes
        this.element.classList.forEach(className => {
          if (className.startsWith('bg-')) {
            this.element.classList.remove(className);
          }
        });
        // Add the proper bg class
        this.element.classList.add(entry.target.dataset.bgClass);
      }
    });
  }  

  init() {
    const observer = new IntersectionObserver(this.observeSection, { rootMargin: '-50% 0% -50% 0%' });
    this.sections.forEach(section => {
      observer.observe(section);
    });
  }
}

// Init BgScroll
const el = document.querySelector('[data-bg-scroll]');
new BgScroll(el);

And, as you may guess, we also remove all classes starting with bg- to ensure only one background class is applied.

Adding a fade animation

To complete our effect, we'll add a fade animation to the background color change. Simply add the transition-colors class to the <main> element. The final and simplest step is to add a fade animation to the background color change. To do this, just add the transition-colors class to the main element. Like this:

<main class="relative min-h-screen flex flex-col bg-sky-200 transition-colors duration-700 overflow-hidden" data-bg-scroll>

We have also added the duration-700 class to extend the animation duration for a smoother effect.

Conclusions

Creating this dynamic background effect with the Intersection Observer is incredibly easy. It takes just around 30 lines of JavaScript, and no external libraries are required. Feel free to make your own experiments and play around with the code to match your specific needs. Don't forget to shoot us a message on Twitter if you've already successfully integrated a similar effect into your site.

Create a Gradient Text Reveal on Scroll with Tailwind CSS and JS

Cruip — Tue, 14 Nov 2023 09:21:56 +0000

Live Demo / Download

For this tutorial, we took inspiration from a beautiful pen created by Jhey Tompkins, where a section made up of text emerges from the darkness upon scrolling. Jhey showed how to combine the background-clip property with scroll-driven animations to create this gradient text unveiling effect. However, at the time of writing, this technique only works in Chrome and Edge, as the animation-timeline: scroll() property is't supported in other browsers yet. For this reason - and to have more control over the animation - we have recreated a similar effect with JavaScript and Tailwind CSS.

Creating the HTML

A point of clarification before going on: the text we're revealing resides in a scrollable section but is fixed on the screen. This means that the reveal effect activates when the parent section intersects the fixed element that contains the text. With that in mind, let's define the HTML structure, using the Tailwind classes for styling:

<section class="h-screen flex items-center">
    <div class="fixed w-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
        <div class="px-4 md:px-6">
            <div class="max-w-5xl mx-auto">
                <div class="font-extrabold text-3xl md:text-4xl text-white">
                    Life is shaped by the total of our actions, a multifaceted tapestry where each and every detail holds and contributes to our individual journey. The books you've read, the kilometers you've run, the moments of joy and connection during every night out, and even the simple act of rehydrating with a glass of water the morning after all intertwine and meld into the intricate fabric of existence. Everything, without exception, counts, and it is this collective mosaic of experiences that invariably molds and sculpts us into the unique individuals we become.
                </div>
                <div class="mt-8 md:flex items-center justify-between space-y-4 md:space-y-0">
                    <div class="flex items-center space-x-4">
                        <img class="rounded-full" src="./author.jpg" width="36" height="36" alt="Author">
                        <div class="text-slate-600"><a class="text-slate-500 font-medium hover:text-slate-400" href="#0">Beatrice Watson</a> · <span class="text-slate-500 italic">Jun 17</span></div>
                    </div>
                    <div class="flex items-center space-x-8">
                        <div class="flex items-center space-x-1 whitespace-nowrap">
                            <button class="text-slate-300 hover:text-slate-50 p-2" aria-label="Like">
                                <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="18" height="17">
                                    <path d="M16.428 1.57a5.363 5.363 0 0 1 0 7.586l-7.43 7.429-.707-.707-6.72-6.722A5.363 5.363 0 0 1 8.999 1.42a5.364 5.364 0 0 1 7.429.15Zm-1.415 6.172a3.363 3.363 0 1 0-5.18-4.237l-.834 1.256-.833-1.256a3.363 3.363 0 1 0-5.18 4.237l6.013 6.014 6.014-6.014Z" />
                                </svg>
                            </button>
                            <div class="text-slate-400 font-medium">4.7K Reactions</div>
                        </div>
                        <div class="flex items-center space-x-1 whitespace-nowrap">
                            <button class="text-slate-300 hover:text-slate-50 p-2" aria-label="Comment">
                                <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
                                    <path d="m16.732 17.108-5.546-2.256A8.607 8.607 0 0 1 9 15.09c-4.952 0-9-3.31-9-7.546C0 3.31 4.048 0 9 0s9 3.31 9 7.57a6.972 6.972 0 0 1-1.842 4.556l.574 4.982Zm-2.674-5.73.368-.345A4.96 4.96 0 0 0 16 7.545C16 4.513 12.926 2 9 2S2 4.513 2 7.545c0 3.033 3.074 5.546 7.02 5.546a6.671 6.671 0 0 0 1.961-.253l.331-.094 3.047 1.24-.301-2.606Z" />
                                </svg>
                            </button>
                            <div class="text-slate-400 font-medium">112 Comments</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

We have a section - we'll call it the "parent" element from now on -that spans the entire viewport height (h-screen). This section contains a div - i.e. the "child" element - which is positioned in the center of the screen. Right now, this text is always visible on the screen; we'll later see how to implement the reveal effect with JavaScript. For the moment, let's focus on replacing the text's white color with a more dynamic radial gradient.

Text gradient with Tailwind CSS

To make a text gradient with Tailwind, we would normally add a couple of Tailwind utility classes. However, our gradient is a bit more complex. Not only is it radial - so we need to write a custom class using arbitrary values - but we also have to increase the background-size in order to make the gradient translate during scrolling - and this requires custom stop-colors. Okay, the classes we'll use are:

bg-clip-text and text-transparent for defining the text color with a background.
bg-[radial-gradient(50%_50%_at_50%_50%,theme(colors.purple.50),theme(colors.purple.500)_20%,transparent_50%)] defines a radial gradient that starts with "Purple 50", changes to "Purple 500" at 20%, and ends being transparent at 50%.
bg-[50%_50%] aligns the gradient at the center.
bg-[length:400%_800%] allows us to scale up the background.

So, the div element will be modified as follow:

<div class="font-extrabold text-3xl md:text-4xl bg-clip-text text-transparent bg-[radial-gradient(50%_50%_at_50%_50%,theme(colors.purple.50),theme(colors.purple.500)_20%,transparent_50%)] bg-[length:400%_800%] bg-[50%_50%]">

Implementing JavaScript

Now, the trickiest part: adding some JavaScript for the reveal effect. We will create a TextReveal class inside a file named gradient-text-reveal.js, which we'll then include in our HTML. The JS class, once instantiated, will take a DOM element as input:

class TextReveal {
  constructor(element) {
    this.element = element;
    this.child = this.element.firstElementChild;
    this.setupReveal = this.setupReveal.bind(this);
    this.init();
  }

  setupReveal() {
    // Code to reveal the text
  }

  init() {
    this.setupReveal();
    window.addEventListener('resize', this.setupReveal);
  }
}

// Init TextReveal
const els = document.querySelectorAll('[data-text-reveal]');
els.forEach((el) => {
  new TextReveal(el);
});

The setupReveal method will manage the reveal effect, on both page load and on window resize via the init method. Now, to trigger the above code, we need to add a data-text-reveal attribute to the parent section:

<section class="h-[200vh] flex items-center" data-text-reveal>

Checking whether the animation is feasible

Given that our text remains fixed on the screen, what if the fixed div overflows the viewport's vertical dimensions? This would result in our text being clipped, rendering it non-scrollable, and leading to a less than ideal user experience. That is why we need a function that checks whether the conditions to perform the animation are met:

class TextReveal {
  constructor(element) {
    this.element = element;
    this.child = this.element.firstElementChild;
    this.canReveal = this.canReveal.bind(this);
    this.getRects = this.getRects.bind(this);
    this.setupReveal = this.setupReveal.bind(this);
    this.init();
  }

  canReveal() {
    const { childRect } = this.getRects();
    // Returns false if the child container is taller than the viewport.
    return childRect.height <= window.innerHeight;
  }

  getRects() {
    return {
      rect: this.element.getBoundingClientRect(),
      childRect: this.child.getBoundingClientRect()
    };
  }  

  setupReveal() {
    if (this.canReveal()) {
      console.log('doable');
    } else {
      console.log('not doable');
    }
  }

  init() {
    this.setupReveal();
    window.addEventListener('resize', this.setupReveal);
  }
}

// Init TextReveal
const els = document.querySelectorAll('[data-text-reveal]');
els.forEach((el) => {
  new TextReveal(el);
});

We created two methods:

getRects() returns the coordinates of both the parent section and the fixed div in relation to the viewport.
canReveal() returns true if the fixed div's height is less than or equal to the viewport's height.

Now, when resizing the browser window, the console will tell us whether the animation is feasible or not. If the animation isn't possible, we'll change the positioning of the container element from fixed to relative. Let's update the setupReveal method:

setupReveal() {
  if (this.canReveal()) {
    this.handleScroll();
    window.addEventListener('scroll', this.handleScroll);
    console.log('doable');
    // Remove the inline styles if previously set
    this.child.style.position = '';
    this.child.style.top = '';
    this.child.style.left = '';
    this.child.style.transform = '';
    this.element.style.height = '';      
  } else {
    window.removeEventListener('scroll', this.handleScroll);
    console.log('not doable');
    // Set some inline styles if the effect isn't doable
    this.child.style.position = 'relative';
    this.child.style.top = '0';
    this.child.style.left = '0';
    this.child.style.transform = 'translate3d(0,0,0)';
    this.element.style.height = 'auto';      
  }
}

Computing a "reveal value"

The next step is writing a JavaScript function that, in response to scrolling, computes a "reveal value". This numeric value will be used to set a CSS variable determining the gradient background's positioning. Let's create this method:

calculateRevealValue() {
  const { rect, childRect } = this.getRects(); 

  if (!this.canReveal()) return 1;

  // Calculate the intersection value based on the provided conditions
  if (rect.top <= childRect.top && rect.bottom >= childRect.top) {
    const totalHeightDifference = rect.height - childRect.height;
    const currentHeightDifference = childRect.top - rect.top;
    this.revealValue = currentHeightDifference / totalHeightDifference;
  } else if (rect.bottom < childRect.top || Math.abs(childRect.top - rect.bottom) < 0.01) {
    this.revealValue = 1;
  } else {
    this.revealValue = 0;
  }

  // Clamp the value between 0 and 1
  this.revealValue = Math.max(0, Math.min(1, this.revealValue));

  return this.revealValue;
}

This function evaluates the position of both the fixed-positioned element and its parent container, relative to the viewport. Through a series of conditions, it returns a revealValue, which is a number oscillating between 0 to 1. This value needs to be updated every time there's a scroll event. Thus, we'll create a new method:

handleScroll() {
  this.revealValue = this.calculateRevealValue();
  console.log(this.revealValue);
}

Assembling all we've done so far:

class TextReveal {
  constructor(element) {
    this.element = element;
    this.child = this.element.firstElementChild;
    this.revealValue = 0;
    this.opacityValue = 0;
    this.canReveal = this.canReveal.bind(this);
    this.getRects = this.getRects.bind(this);
    this.calculateRevealValue = this.calculateRevealValue.bind(this);
    this.handleScroll = this.handleScroll.bind(this);
    this.setupReveal = this.setupReveal.bind(this);
    this.init();
  }

  canReveal() {
    const { childRect } = this.getRects();
    // Returns false if the child container is taller than the viewport.
    return childRect.height <= window.innerHeight;
  }

  getRects() {
    return {
      rect: this.element.getBoundingClientRect(),
      childRect: this.child.getBoundingClientRect()
    };
  }

  calculateRevealValue() {
    const { rect, childRect } = this.getRects();

    if (!this.canReveal()) return 1;

    // Calculate the intersection value based on the provided conditions
    if (rect.top <= childRect.top && rect.bottom >= childRect.top) {
      const totalHeightDifference = rect.height - childRect.height;
      const currentHeightDifference = childRect.top - rect.top;
      this.revealValue = currentHeightDifference / totalHeightDifference;
    } else if (rect.bottom < childRect.top || Math.abs(childRect.top - rect.bottom) < 0.01) {
      this.revealValue = 1;
    } else {
      this.revealValue = 0;
    }

    // Clamp the value between 0 and 1
    this.revealValue = Math.max(0, Math.min(1, this.revealValue));

    return this.revealValue;
  }

  handleScroll() {
    this.revealValue = this.calculateRevealValue();
    console.log(this.revealValue);
  }

  setupReveal() {
    if (this.canReveal()) {
      this.handleScroll();
      window.addEventListener('scroll', this.handleScroll);
      console.log('doable');
      // Remove the inline styles if previously set
      this.child.style.position = '';
      this.child.style.top = '';
      this.child.style.left = '';
      this.child.style.transform = '';
      this.element.style.height = '';      
    } else {
      window.removeEventListener('scroll', this.handleScroll);
      console.log('not doable');
      // Set some inline styles if the effect isn't doable
      this.child.style.position = 'relative';
      this.child.style.top = '0';
      this.child.style.left = '0';
      this.child.style.transform = 'translate3d(0,0,0)';
      this.element.style.height = 'auto';      
    }
  }

  init() {
    this.setupReveal();
    window.addEventListener('resize', this.setupReveal);
  }
}

// Init TextReveal
const els = document.querySelectorAll('[data-text-reveal]');
els.forEach((el) => {
  new TextReveal(el);
});

Test it out! If you scroll in the browser while monitoring the console, you'll see the revealValue gradually shifting from 0 to 1. It starts at 0 on page load. As the fixed element interacts with its container, the value increases until it maxes out at 1 - 1 is reached when the child element crosses the parent element's lower boundary.

Creating a CSS-driven animation

To modigy the position of the gradient background during scrolling, we'll set a CSS variable named --reveal-value, linked to revealValue:

handleScroll() {
  this.revealValue = this.calculateRevealValue();
  this.element.style.setProperty('--reveal-value', this.revealValue);
}

setupReveal() {
  if (this.canReveal()) {
    this.handleScroll();
    window.addEventListener('scroll', this.handleScroll);
    // Remove the inline styles if previously set
    this.child.style.position = '';
    this.child.style.top = '';
    this.child.style.left = '';
    this.child.style.transform = '';
    this.element.style.height = '';      
  } else {
    window.removeEventListener('scroll', this.handleScroll);
    this.element.style.setProperty('--reveal-value', 0.5);
    // Set some inline styles if the effect isn't doable
    this.child.style.position = 'relative';
    this.child.style.top = '0';
    this.child.style.left = '0';
    this.child.style.transform = 'translate3d(0,0,0)';
    this.element.style.height = 'auto';      
  }
}

By default, when animation isn't achievable, --reveal-value will default to 0.5. Otherwise, it'll reflect revealValue. Now, to animate the gradient, we'll have to tweak our HTML. Replace the class defining the background position from bg-[50%_50%] to bg-[50%_calc(100%*var(--reveal-value))]. By doing this, the value of --reveal-value will control the background's placement. This results in:

If --reveal-value is 0, the background-position becomes 50% 0%, pushing the background's center downward.
If --reveal-value is 1, the background-position is 50% 100%, moving the background's center upward.
If --reveal-value is 0.5, the background-position stands at 50% 50%, centering the background perfectly with the text element.

And voilà! You now have an animated background effect. One last tweak: to keep the text in a fixed position for a more extended scroll, just double the container element's height by replacing h-screen with h-[200vh].

Animating the footer elements

To make the overall effect more interesting, we will also animate the opacity of the footer elements. To do this, we'll introduce a new variable, --opacity-value, and make necessary changes in the setupReveal and handleScroll methods:

handleScroll() {
  this.revealValue = this.calculateRevealValue();
  this.element.style.setProperty('--reveal-value', this.revealValue);

  if (this.revealValue >= 0.3 && this.revealValue <= 0.7) {
    this.opacityValue = 1;
  } else if (this.revealValue >= 0.2 && this.revealValue < 0.3) {
    this.opacityValue = 10 * (this.revealValue - 0.2);
  } else if (this.revealValue > 0.7 && this.revealValue <= 0.8) {
    this.opacityValue = 1 - 10 * (this.revealValue - 0.7);
  } else {
    this.opacityValue = 0;
  }
  this.element.style.setProperty('--opacity-value', this.opacityValue);
}

setupReveal() {
  if (this.canReveal()) {
    this.handleScroll();
    window.addEventListener('scroll', this.handleScroll);
    // Remove the inline styles if previously set
    this.child.style.position = '';
    this.child.style.top = '';
    this.child.style.left = '';
    this.child.style.transform = '';
    this.element.style.height = '';
  } else {
    window.removeEventListener('scroll', this.handleScroll);
    this.element.style.setProperty('--reveal-value', 0.5);
    this.element.style.setProperty('--opacity-value', 1);
    // Set some inline styles if the effect isn't doable
    this.child.style.position = 'relative';
    this.child.style.top = '0';
    this.child.style.left = '0';
    this.child.style.transform = 'translate3d(0,0,0)';
    this.element.style.height = 'auto';
  }
}

We've used the current revealValue variable to determine the value of --opacity-value, adding conditions to give more dynamism to the overall effect. Lastly, update your HTML by appending the class opacity-[var(--opacity-value)] to the div containing the footer elements. With that we are done. Here is the final HTML code:

<section class="h-[200vh] flex items-center" data-text-reveal>
    <div class="fixed w-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
        <div class="px-4 md:px-6">
            <div class="max-w-5xl mx-auto">
                <div class="font-extrabold text-3xl md:text-4xl bg-clip-text text-transparent bg-[radial-gradient(50%_50%_at_50%_50%,theme(colors.purple.50),theme(colors.purple.500)_20%,transparent_50%)] bg-[length:400%_800%] bg-[50%_calc(100%*var(--reveal-value))]">
                    Life is shaped by the total of our actions, a multifaceted tapestry where each and every detail holds and contributes to our individual journey. The books you've read, the kilometers you've run, the moments of joy and connection during every night out, and even the simple act of rehydrating with a glass of water the morning after all intertwine and meld into the intricate fabric of existence. Everything, without exception, counts, and it is this collective mosaic of experiences that invariably molds and sculpts us into the unique individuals we become.
                </div>
                <div class="mt-8 md:flex items-center justify-between space-y-4 md:space-y-0 opacity-[var(--opacity-value)]">
                    <div class="flex items-center space-x-4">
                        <img class="rounded-full" src="./author.jpg" width="36" height="36" alt="Author">
                        <div class="text-slate-600"><a class="text-slate-500 font-medium hover:text-slate-400" href="#0">Beatrice Watson</a> · <span class="text-slate-500 italic">Jun 17</span></div>
                    </div>
                    <div class="flex items-center space-x-8">
                        <div class="flex items-center space-x-1 whitespace-nowrap">
                            <button class="text-slate-300 hover:text-slate-50 p-2" aria-label="Like">
                                <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="18" height="17">
                                    <path d="M16.428 1.57a5.363 5.363 0 0 1 0 7.586l-7.43 7.429-.707-.707-6.72-6.722A5.363 5.363 0 0 1 8.999 1.42a5.364 5.364 0 0 1 7.429.15Zm-1.415 6.172a3.363 3.363 0 1 0-5.18-4.237l-.834 1.256-.833-1.256a3.363 3.363 0 1 0-5.18 4.237l6.013 6.014 6.014-6.014Z" />
                                </svg>
                            </button>
                            <div class="text-slate-400 font-medium">4.7K Reactions</div>
                        </div>
                        <div class="flex items-center space-x-1 whitespace-nowrap">
                            <button class="text-slate-300 hover:text-slate-50 p-2" aria-label="Comment">
                                <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
                                    <path d="m16.732 17.108-5.546-2.256A8.607 8.607 0 0 1 9 15.09c-4.952 0-9-3.31-9-7.546C0 3.31 4.048 0 9 0s9 3.31 9 7.57a6.972 6.972 0 0 1-1.842 4.556l.574 4.982Zm-2.674-5.73.368-.345A4.96 4.96 0 0 0 16 7.545C16 4.513 12.926 2 9 2S2 4.513 2 7.545c0 3.033 3.074 5.546 7.02 5.546a6.671 6.671 0 0 0 1.961-.253l.331-.094 3.047 1.24-.301-2.606Z" />
                                </svg>
                            </button>
                            <div class="text-slate-400 font-medium">112 Comments</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

And, the accompanying JavaScript:

class TextReveal {
  constructor(element) {
    this.element = element;
    this.child = this.element.firstElementChild;
    this.revealValue = 0;
    this.opacityValue = 0;
    this.canReveal = this.canReveal.bind(this);
    this.getRects = this.getRects.bind(this);
    this.calculateRevealValue = this.calculateRevealValue.bind(this);
    this.handleScroll = this.handleScroll.bind(this);
    this.setupReveal = this.setupReveal.bind(this);
    this.init();
  }

  canReveal() {
    const { childRect } = this.getRects();
    // Returns false if the child container is taller than the viewport.
    return childRect.height <= window.innerHeight;
  }

  getRects() {
    return {
      rect: this.element.getBoundingClientRect(),
      childRect: this.child.getBoundingClientRect()
    };
  }

  calculateRevealValue() {
    const { rect, childRect } = this.getRects();

    if (!this.canReveal()) return 1;

    // Calculate the intersection value based on the provided conditions
    if (rect.top <= childRect.top && rect.bottom >= childRect.top) {
      const totalHeightDifference = rect.height - childRect.height;
      const currentHeightDifference = childRect.top - rect.top;
      this.revealValue = currentHeightDifference / totalHeightDifference;
    } else if (rect.bottom < childRect.top || Math.abs(childRect.top - rect.bottom) < 0.01) {
      this.revealValue = 1;
    } else {
      this.revealValue = 0;
    }

    // Clamp the value between 0 and 1
    this.revealValue = Math.max(0, Math.min(1, this.revealValue));

    return this.revealValue;
  }

  handleScroll() {
    this.revealValue = this.calculateRevealValue();
    this.element.style.setProperty('--reveal-value', this.revealValue);

    if (this.revealValue >= 0.3 && this.revealValue <= 0.7) {
      this.opacityValue = 1;
    } else if (this.revealValue >= 0.2 && this.revealValue < 0.3) {
      this.opacityValue = 10 * (this.revealValue - 0.2);
    } else if (this.revealValue > 0.7 && this.revealValue <= 0.8) {
      this.opacityValue = 1 - 10 * (this.revealValue - 0.7);
    } else {
      this.opacityValue = 0;
    }
    this.element.style.setProperty('--opacity-value', this.opacityValue);
  }

  setupReveal() {
    if (this.canReveal()) {
      this.handleScroll();
      window.addEventListener('scroll', this.handleScroll);
      // Remove the inline styles if previously set
      this.child.style.position = '';
      this.child.style.top = '';
      this.child.style.left = '';
      this.child.style.transform = '';
      this.element.style.height = '';
    } else {
      window.removeEventListener('scroll', this.handleScroll);
      this.element.style.setProperty('--reveal-value', 0.5);
      this.element.style.setProperty('--opacity-value', 1);
      // Set some inline styles if the effect isn't doable
      this.child.style.position = 'relative';
      this.child.style.top = '0';
      this.child.style.left = '0';
      this.child.style.transform = 'translate3d(0,0,0)';
      this.element.style.height = 'auto';
    }
  }

  init() {
    this.setupReveal();
    window.addEventListener('resize', this.setupReveal);
  }
}

// Init TextReveal
const els = document.querySelectorAll('[data-text-reveal]');
els.forEach((el) => {
  new TextReveal(el);
});

Conclusions

If you want your website to stand out from the others, you need to create interesting and engaging experiences. That's why we've been taking a more experimental approach in our latest tutorials. We hope you're enjoying this fresh perspective! Oh, and tell us if you'd like to see something similar in one of our Tailwind templates.

Building an Expandable Header with Tailwind CSS and Alpine.js

Cruip — Tue, 07 Nov 2023 09:10:05 +0000

Live Demo / Download

Expandable headers that reveal a navigation menu upon click are not something you come across every day. Although it is always a good idea to have menu items visible when possible, there are situations when this is not achievable due to the dense amount of information displayed in the header. In those circumstances, having an expandable header that pops out on click is something worth considering, as it can ultimately improve the UX. We got inspired by Atlas and their menu, so we decided to create our own version. We started from scratch and used Tailwind CSS and Alpine.js to build it. Ready? Let's begin!

Building the HTML structure

For this example, we will start from a very basic structure. We want a header with a logo, a menu, and a button to show the menu. But we want the menu to be hidden at first. So, when you click the button, the menu will show up. Basically, our structure will look like this:

<header>
    <!-- Always visible area -->
    <div>
        <a href="#0">Logo</a>
        <button>Menu button</button>
    </div>
    <!-- Expandable / collapsible menu -->
    <nav>Navigation menu</nav>
</header>

Now, let's model this structure to create the component just like you see it in the demo.

Styling the visible area with Tailwind classes

In the always-visible area, we have a logo and a menu button:

<header class="relative before:absolute before:inset-0 before:rounded-lg before:shadow-xl before:shadow-slate-900/5 before:bg-white">
    <div class="relative">
        <div class="flex items-center px-4">
            <a class="focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300" href="#0">
                <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" aria-label="Logo">
                    <g fill="none" fill-rule="nonzero">
                        <path fill="#C7D2FE" d="M24.317 7.426a8.537 8.537 0 0 1-2.616 15.262 3.15 3.15 0 0 1-3.042-5.268l2.425-2.426a10.079 10.079 0 0 0 2.951-7.764c.088.064.186.128.282.196Z" />
                        <path fill="#6366F1" d="M7.425 3.68a8.54 8.54 0 0 1 15.262 2.618 3.149 3.149 0 0 1-5.268 3.046L14.995 6.92a10.122 10.122 0 0 0-7.764-2.95c.062-.097.128-.195.194-.29Z" />
                        <path fill="#C7D2FE" d="M3.68 20.572A8.54 8.54 0 0 1 6.296 5.31a3.148 3.148 0 0 1 3.05 5.268l-2.424 2.424a10.117 10.117 0 0 0-2.95 7.766c-.098-.064-.196-.128-.294-.196Z" />
                        <path fill="#6366F1" d="M20.574 24.319A8.54 8.54 0 0 1 5.309 21.7a3.15 3.15 0 0 1 5.27-3.05l2.424 2.424a10.098 10.098 0 0 0 7.764 2.95 9.316 9.316 0 0 1-.193.295Z" />
                    </g>
                </svg>
            </a>
            <button
                type="button"
                class="grow flex items-center justify-end h-14 pl-4 focus-visible:outline-none group"
            >
                <div class="p-1.5 group-focus-visible:ring group-focus-visible:ring-indigo-300">
                    <svg class="fill-slate-400 shrink-0" width="18" height="18" xmlns="http://www.w3.org/2000/svg">
                        <rect y="8" width="18" height="2" />
                        <rect y="8" width="18" height="2" class="transform origin-center rotate-90" />
                    </svg>
                </div>
            </button>
        </div>
    </div>                                                                                              
</header>

The logo is a 32x32 pixel inline SVG within a link. The entire remaining area of the header is covered by a button element, with a "+" icon aligned to the right. We also added some modifiers like focus: and focus-visible: (along with the group-focus variant) to make it look better when navigating with the keyboard.

Implementing the navigation menu

Now, we will proceed with the implementation of the navigation menu. This part is a bit more complex, as it includes 3 columns of elements. On larger screens, the first two columns will take up 75% of the width and contain menu links with an icon, title, and a short description. The last column will fill up the remaining space and will include simple textual links, along with the "Login" and "Request Demo" links positioned at the bottom.

<nav class="grid text-sm text-slate-600 overflow-hidden">
    <div class="overflow-hidden before:block before:w-full before:h-px before:bg-gradient-to-r before:from-transparent before:via-slate-200 before:to-transparent">
        <div class="px-4 md:px-6 py-8">
            <div class="space-y-8 lg:flex lg:space-x-12 lg:space-y-0">
                <div class="space-y-8 lg:w-3/4 md:flex md:space-x-6 md:space-y-0">
                    <div class="md:w-1/2">
                        <div class="text-xs uppercase font-semibold text-slate-400 mb-3">Products</div>
                        <ul class="space-y-1">
                            <li>
                                <a class="flex space-x-4 px-3 py-2.5 rounded hover:bg-slate-50 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition" href="#0">
                                    <div class="shrink-0 flex items-center justify-center h-9 w-9 rounded bg-white border border-slate-200">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="14">
                                            <rect width="3" height="2" fill="#6366F1" rx=".5" />
                                            <rect width="3" height="2" x="13" y="12" fill="#A5B4FC" rx=".5" />
                                            <rect width="7" height="2" x="2" y="4" fill="#A5B4FC" rx=".5" />
                                            <rect width="9" height="2" x="5" y="8" fill="#6366F1" rx=".5" />
                                        </svg>
                                    </div>
                                    <div>
                                        <div class="text-sm font-semibold text-slate-800 mb-0.5">Analytics</div>
                                        <div class="text-slate-500">Everything counts. And everything that counts — shapes us.</div>
                                    </div>
                                </a>
                            </li>
                            <!-- More links -->
                        </ul>
                    </div>
                    <div class="md:w-1/2">
                        <div class="text-xs uppercase font-semibold text-slate-400 mb-3">Flows</div>
                        <ul class="space-y-1">
                            <li>
                                <a class="flex space-x-4 px-3 py-2.5 rounded hover:bg-slate-50 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition" href="#0">
                                    <div class="shrink-0 flex items-center justify-center h-9 w-9 rounded bg-white border border-slate-200">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="14">
                                            <path fill="#A5B4FC" d="M15.5 10H13a5.022 5.022 0 0 1-3.453-1.4l-1.2 1.607A7.065 7.065 0 0 0 12 11.92v1.586a.5.5 0 0 0 .853.349l3-3A.5.5 0 0 0 15.5 10ZM1 4a5.022 5.022 0 0 1 3.453 1.4l1.205-1.61A7.028 7.028 0 0 0 1 2a1 1 0 1 0 0 2Z" />
                                            <path fill="#6366F1" d="M13 4h2.5a.5.5 0 0 0 .354-.853l-3-3A.5.5 0 0 0 12 .5v1.58a7.032 7.032 0 0 0-4.6 2.72L5 8a5.025 5.025 0 0 1-4 2 1 1 0 0 0 0 2 7.034 7.034 0 0 0 5.6-2.8L9 6a5.025 5.025 0 0 1 4-2Z" />
                                        </svg>
                                    </div>
                                    <div>
                                        <div class="text-sm font-semibold text-slate-800 mb-0.5">Flows</div>
                                        <div class="text-slate-500">Everything counts. And everything that counts — shapes us.</div>
                                    </div>
                                </a>
                            </li>
                            <!-- More links -->
                        </ul>
                    </div>
                </div>
                <div class="lg:w-1/4 flex flex-col sm:flex-row lg:flex-col sm:justify-between space-y-8 relative before:hidden lg:before:block before:absolute before:-left-6 before:w-px before:h-full before:bg-gradient-to-b before:from-transparent before:via-slate-200 before:to-transparent">
                    <div>
                        <div class="text-xs uppercase font-semibold text-slate-400 mb-5">Company</div>
                        <ul class="space-y-1 -mx-3">
                            <li>
                                <a class="flex text-sm font-semibold text-slate-800 px-3 py-1 rounded hover:bg-slate-50 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition" href="#0">Documentation</a>
                            </li>
                            <!-- More links -->
                        </ul>
                    </div>
                    <div class="lg:grow flex items-end lg:justify-end">
                        <div class="flex items-center space-x-3">
                            <a class="text-sm font-medium text-slate-500 hover:text-slate-900 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition" href="#0">Login</a>
                            <a class="inline-flex justify-center whitespace-nowrap rounded-full bg-white border border-slate-200 px-3 py-1.5 text-sm font-medium text-indigo-500 hover:bg-indigo-600 hover:text-white hover:border-indigo-500 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition" href="#0">Request Demo</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>

This menu can't be collapsed yet, but let's focus on the layout for now. We can figure out how to hide it later on. The most interesting things to note here are:

The use of before pseudo-element for the gradient border at the top.
The use of CSS grid which - as we saw in the tutorial about building a simple accordion component - enables us to animate the height of the navigation menu without relying on JavaScript.
The use of Tailwind's responsive utility variants to position the menu items effectively on both mobile and desktop screens.

So, we're almost done with the structure. All we have left to do is hide the navigation menu and handle its collapsed / expanded states.

Toggling the header with Alpine.js

If you've been following our Tailwind tutorials, you're already familiar with the incredibly useful Alpine.js library. We love Alpine because it lets us add interactivity to our components without having to write any JavaScript code. In this case, we'll be using it to manage the expansion and contraction of our navigation menu. We'll begin by creating a variable called expanded and we'll change its state when the button is clicked. Initially, the value of expanded is set to false, which means the menu is hidden. But when the button is clicked, the value will toggle to the opposite of its current state (expanded = !expanded). This will make the menu expand or collapse depending on its current state. To implement this functionality, we'll need to make some integrations to the <header> and <button> elements:

<header
    x-data="{ expanded: false }"
    class="relative before:absolute before:inset-0 before:rounded-lg before:shadow-xl before:shadow-slate-900/5 before:bg-white"
>
    <!-- ... -->

    <button
        type="button"
        class="grow flex items-center justify-end h-14 pl-4 focus-visible:outline-none group"
        @click="expanded = !expanded"
    ><!-- ... --></button>

    <!-- ... -->

</header>

Now we can add the missing classes to the menu based on the value of the expanded variable. We'll do this using the Alpine.js x-bind:class directive, or the shortened version :class. Let's start from the menu:

<nav
    class="grid text-sm text-slate-600 overflow-hidden transition-all duration-500 ease-[cubic-bezier(.5,.85,.25,1.8)] [&[x-cloak]]:hidden"
    :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0 invisible'"
    x-cloak
>

So basically, if the expanded variable is true (grid-rows-[1fr] opacity-100), the menu will show up. Viceversa, if it's set to false, the menu will be hidden (grid-rows-[0fr] opacity-0 invisible). We also ensured that the menu expands with an easing animation by adding some a few more classes: transition-all, duration-500 and ease-[cubic-bezier(.5,.85,.25,1.8)]. Finally, to avoid any glitches before Alpine.js is loaded, we added the x-cloak attribute. Now, let's move on to managing the rotation of the "+" icon.

<svg class="fill-slate-400 shrink-0 transition duration-300 ease-in-out" :class="{'rotate-[135deg]': expanded}" width="18" height="18" xmlns="http://www.w3.org/2000/svg">
    <rect y="8" width="18" height="2" />
    <rect y="8" width="18" height="2" class="transform origin-center rotate-90" />
</svg>

When we set the value of expanded to true, the icon will rotate 135 degrees with a 300-millisecond transition. Finally, we want the menu to have a bouncy and elastic effect when it is opened and closed. To do this, we will add a few more classes to the <header> element:

<header
    x-data="{ expanded: false }"
    class="relative before:absolute before:inset-0 before:rounded-lg before:shadow-xl before:shadow-slate-900/5 before:bg-white before:transition-all before:duration-500 before:ease-[cubic-bezier(.5,.85,.25,1.8)]"
    :class="expanded ? 'before:-inset-2 before:top-0' : 'before:inset-0'"
>

Since the header background is defined by the before pseudo-element, we can easily extend its dimensions using the before:inset-* class. So basically, what we're doing is making the element 8 pixels bigger when the menu is open. And we're adding this cool elastic effect to the animation with the custom class ease-[cubic-bezier(.5,.85,.25,1.8)]. Cool! The header component is now complete, but it still doesn't meet accessibility requirements. Let's fix that.

Making the header component fully accessible

Accessibility isn't something we can just ignore nowadays. Making our web pages accessible is a responsibility, not a choice. We want everyone, including those using assistive devices, to be able to access our content. So, to make our component accessible, we need to add the right ARIA attributes to the code. First, we'll give the <button> element an id. Then, we'll add the aria-expanded and aria-controls="menu" attributes. This will help with the accessibility of the element. In this way:

<button
    id="menubutton"
    type="button"
    class="grow flex items-center justify-end h-14 pl-4 focus-visible:outline-none group"
    @click="expanded = !expanded"
    :aria-expanded="expanded"
    aria-controls="menu"
>

The nav element, instead, will be integrated with an id that corresponds to the aria-controls attribute we defined earlier. We'll also add an attribute that specifies the navigation role and an aria-labelledby attribute that corresponds to the button's id.

<nav
    id="menu"
    role="navigation"
    aria-labelledby="menubutton"
    class="grid text-sm text-slate-600 overflow-hidden transition-all duration-500 ease-[cubic-bezier(.5,.85,.25,1.8)] [&[x-cloak]]:hidden"
    :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0 invisible'"
    x-cloak
>

This way, we've linked the <button> and <nav> elements so that the screen reader can tell that the button controls the opening and closing of the menu. And here's what the finished component looks like:

<header
    x-data="{ expanded: false }"
    class="relative before:absolute before:inset-0 before:rounded-lg before:shadow-xl before:shadow-slate-900/5 before:bg-white before:transition-all before:duration-500 before:ease-[cubic-bezier(.5,.85,.25,1.8)]"
    :class="expanded ? 'before:-inset-2 before:top-0' : 'before:inset-0'"
>
    <div class="relative">
        <div class="flex items-center px-4">
            <a class="focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300" href="#0">
                <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" aria-label="Logo">
                    <g fill="none" fill-rule="nonzero">
                        <path fill="#C7D2FE" d="M24.317 7.426a8.537 8.537 0 0 1-2.616 15.262 3.15 3.15 0 0 1-3.042-5.268l2.425-2.426a10.079 10.079 0 0 0 2.951-7.764c.088.064.186.128.282.196Z" />
                        <path fill="#6366F1" d="M7.425 3.68a8.54 8.54 0 0 1 15.262 2.618 3.149 3.149 0 0 1-5.268 3.046L14.995 6.92a10.122 10.122 0 0 0-7.764-2.95c.062-.097.128-.195.194-.29Z" />
                        <path fill="#C7D2FE" d="M3.68 20.572A8.54 8.54 0 0 1 6.296 5.31a3.148 3.148 0 0 1 3.05 5.268l-2.424 2.424a10.117 10.117 0 0 0-2.95 7.766c-.098-.064-.196-.128-.294-.196Z" />
                        <path fill="#6366F1" d="M20.574 24.319A8.54 8.54 0 0 1 5.309 21.7a3.15 3.15 0 0 1 5.27-3.05l2.424 2.424a10.098 10.098 0 0 0 7.764 2.95 9.316 9.316 0 0 1-.193.295Z" />
                    </g>
                </svg>
            </a>
            <button
                id="menubutton"
                type="button"
                class="grow flex items-center justify-end h-14 pl-4 focus-visible:outline-none group"
                @click="expanded = !expanded"
                :aria-expanded="expanded"
                aria-controls="menu"
            >
                <div class="p-1.5 group-focus-visible:ring group-focus-visible:ring-indigo-300">
                    <svg class="fill-slate-400 shrink-0 transition duration-300 ease-in-out" :class="{'rotate-[135deg]': expanded}" width="18" height="18" xmlns="http://www.w3.org/2000/svg">
                        <rect y="8" width="18" height="2" />
                        <rect y="8" width="18" height="2" class="transform origin-center rotate-90" />
                    </svg>
                </div>
            </button>
        </div>
        <nav
            id="menu"
            role="navigation"
            aria-labelledby="menubutton"
            class="grid text-sm text-slate-600 overflow-hidden transition-all duration-500 ease-[cubic-bezier(.5,.85,.25,1.8)] [&[x-cloak]]:hidden"
            :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0 invisible'"
            x-cloak
        >
            <div class="overflow-hidden before:block before:w-full before:h-px before:bg-gradient-to-r before:from-transparent before:via-slate-200 before:to-transparent">
                <div class="px-4 md:px-6 py-8">
                    <div class="space-y-8 lg:flex lg:space-x-12 lg:space-y-0">
                        <div class="space-y-8 lg:w-3/4 md:flex md:space-x-6 md:space-y-0">
                            <div class="md:w-1/2">
                                <div class="text-xs uppercase font-semibold text-slate-400 mb-3">Products</div>
                                <ul class="space-y-1">
                                    <li>
                                        <a class="flex space-x-4 px-3 py-2.5 rounded hover:bg-slate-50 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition" href="#0">
                                            <div class="shrink-0 flex items-center justify-center h-9 w-9 rounded bg-white border border-slate-200">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="14">
                                                    <rect width="3" height="2" fill="#6366F1" rx=".5" />
                                                    <rect width="3" height="2" x="13" y="12" fill="#A5B4FC" rx=".5" />
                                                    <rect width="7" height="2" x="2" y="4" fill="#A5B4FC" rx=".5" />
                                                    <rect width="9" height="2" x="5" y="8" fill="#6366F1" rx=".5" />
                                                </svg>
                                            </div>
                                            <div>
                                                <div class="text-sm font-semibold text-slate-800 mb-0.5">Analytics</div>
                                                <div class="text-slate-500">Everything counts. And everything that counts — shapes us.</div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="flex space-x-4 px-3 py-2.5 rounded hover:bg-slate-50 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition" href="#0">
                                            <div class="shrink-0 flex items-center justify-center h-9 w-9 rounded bg-white border border-slate-200">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
                                                    <path fill="#6366F1" d="M4 2h3v7a1 1 0 1 0 2 0V2h3a1 1 0 1 0 0-2H4a1 1 0 1 0 0 2Z" />
                                                    <path fill="#A5B4FC" d="M12.82 10.116a.5.5 0 0 0-.82.385v1.5H4v-1.5a.5.5 0 0 0-.82-.385l-3 2.5a.5.5 0 0 0 0 .768l3 2.5a.502.502 0 0 0 .532.069A.5.5 0 0 0 4 15.5V14h8v1.5a.5.5 0 0 0 .82.384l3-2.5a.5.5 0 0 0 0-.768l-3-2.5Z" />
                                                </svg>
                                            </div>
                                            <div>
                                                <div class="text-sm font-semibold text-slate-800 mb-0.5">Transform</div>
                                                <div class="text-slate-500">Everything counts. And everything that counts — shapes us.</div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="flex space-x-4 px-3 py-2.5 rounded hover:bg-slate-50 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition" href="#0">
                                            <div class="shrink-0 flex items-center justify-center h-9 w-9 rounded bg-white border border-slate-200">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
                                                    <path fill="#A5B4FC" d="M10.742 5.26a4.475 4.475 0 0 0-.825-.64L8.435 6.102a2.531 2.531 0 0 1 .893 4.158l-3 3a2.536 2.536 0 0 1-3.586-3.586l.058-.062a6 6 0 0 1-.37-2.075c0-.134.01-.266.02-.4L1.327 8.26a4.535 4.535 0 0 0 6.414 6.414l3-3a4.536 4.536 0 0 0 0-6.414Z" />
                                                    <path fill="#6366F1" d="M5.26 10.742c.25.245.527.46.825.64l1.482-1.48a2.531 2.531 0 0 1-.893-4.16l3-3a2.536 2.536 0 0 1 3.586 3.586l-.062.062c.247.664.374 1.367.375 2.075 0 .134-.01.266-.02.4l1.121-1.123A4.535 4.535 0 0 0 8.26 1.328l-3 3a4.536 4.536 0 0 0 0 6.414Z" />
                                                </svg>
                                            </div>
                                            <div>
                                                <div class="text-sm font-semibold text-slate-800 mb-0.5">Security</div>
                                                <div class="text-slate-500">Everything counts. And everything that counts — shapes us.</div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="flex space-x-4 px-3 py-2.5 rounded hover:bg-slate-50 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition" href="#0">
                                            <div class="shrink-0 flex items-center justify-center h-9 w-9 rounded bg-white border border-slate-200">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="12">
                                                    <circle cx="8" cy="10.5" r="1.5" fill="#6366F1" />
                                                    <path fill="#A5B4FC" d="M11.5 8C10.6 7 9.3 6.5 8 6.5 6.7 6.5 5.4 7 4.5 8L3.1 6.6c1.3-1.4 3-2.1 4.9-2.1 1.9 0 3.6.7 4.9 2.1L11.5 8Z" />
                                                    <path fill="#6366F1" d="M8 0C5 0 2.2 1.1 0 3.2l1.4 1.4C3.2 2.9 5.5 2 8 2s4.8.9 6.6 2.7L16 3.2C13.8 1.1 11 0 8 0Z" />
                                                </svg>
                                            </div>
                                            <div>
                                                <div class="text-sm font-semibold text-slate-800 mb-0.5">Connect</div>
                                                <div class="text-slate-500">Everything counts. And everything that counts — shapes us.</div>
                                            </div>
                                        </a>
                                    </li>                                                
                                </ul>
                            </div>
                            <div class="md:w-1/2">
                                <div class="text-xs uppercase font-semibold text-slate-400 mb-3">Flows</div>
                                <ul class="space-y-1">
                                    <li>
                                        <a class="flex space-x-4 px-3 py-2.5 rounded hover:bg-slate-50 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition" href="#0">
                                            <div class="shrink-0 flex items-center justify-center h-9 w-9 rounded bg-white border border-slate-200">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="14">
                                                    <path fill="#A5B4FC" d="M15.5 10H13a5.022 5.022 0 0 1-3.453-1.4l-1.2 1.607A7.065 7.065 0 0 0 12 11.92v1.586a.5.5 0 0 0 .853.349l3-3A.5.5 0 0 0 15.5 10ZM1 4a5.022 5.022 0 0 1 3.453 1.4l1.205-1.61A7.028 7.028 0 0 0 1 2a1 1 0 1 0 0 2Z" />
                                                    <path fill="#6366F1" d="M13 4h2.5a.5.5 0 0 0 .354-.853l-3-3A.5.5 0 0 0 12 .5v1.58a7.032 7.032 0 0 0-4.6 2.72L5 8a5.025 5.025 0 0 1-4 2 1 1 0 0 0 0 2 7.034 7.034 0 0 0 5.6-2.8L9 6a5.025 5.025 0 0 1 4-2Z" />
                                                </svg>
                                            </div>
                                            <div>
                                                <div class="text-sm font-semibold text-slate-800 mb-0.5">Flows</div>
                                                <div class="text-slate-500">Everything counts. And everything that counts — shapes us.</div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="flex space-x-4 px-3 py-2.5 rounded hover:bg-slate-50 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition" href="#0">
                                            <div class="shrink-0 flex items-center justify-center h-9 w-9 rounded bg-white border border-slate-200">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
                                                    <path fill="#A5B4FC" d="M4.086 5.5 5.5 4.087l6.414 6.414-1.414 1.415z" />
                                                    <circle cx="2" cy="2" r="2" fill="#6366F1" />
                                                    <path fill="#6366F1" d="M12 12h4v4h-4z" />
                                                </svg>
                                            </div>
                                            <div>
                                                <div class="text-sm font-semibold text-slate-800 mb-0.5">Tracking</div>
                                                <div class="text-slate-500">Everything counts. And everything that counts — shapes us.</div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="flex space-x-4 px-3 py-2.5 rounded hover:bg-slate-50 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition" href="#0">
                                            <div class="shrink-0 flex items-center justify-center h-9 w-9 rounded bg-white border border-slate-200">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="12">
                                                    <path fill="#6366F1" d="m6.7 5.3-5-5C1.3-.1.7-.1.3.3c-.4.4-.4 1 0 1.4L4.6 6 .3 10.3c-.4.4-.4 1 0 1.4.2.2.4.3.7.3.3 0 .5-.1.7-.3l5-5c.4-.4.4-1 0-1.4Z" />
                                                    <path fill="#A5B4FC" d="M7 10h7v2H7z" />
                                                </svg>
                                            </div>
                                            <div>
                                                <div class="text-sm font-semibold text-slate-800 mb-0.5">Management</div>
                                                <div class="text-slate-500">Everything counts. And everything that counts — shapes us.</div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="flex space-x-4 px-3 py-2.5 rounded hover:bg-slate-50 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition" href="#0">
                                            <div class="shrink-0 flex items-center justify-center h-9 w-9 rounded bg-white border border-slate-200">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="14">
                                                    <rect width="3" height="2" fill="#6366F1" rx=".5" />
                                                    <rect width="3" height="2" x="13" y="12" fill="#A5B4FC" rx=".5" />
                                                    <rect width="7" height="2" x="2" y="4" fill="#A5B4FC" rx=".5" />
                                                    <rect width="9" height="2" x="5" y="8" fill="#6366F1" rx=".5" />
                                                </svg>
                                            </div>
                                            <div>
                                                <div class="text-sm font-semibold text-slate-800 mb-0.5">Billing</div>
                                                <div class="text-slate-500">Everything counts. And everything that counts — shapes us.</div>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="lg:w-1/4 flex flex-col sm:flex-row lg:flex-col sm:justify-between space-y-8 relative before:hidden lg:before:block before:absolute before:-left-6 before:w-px before:h-full before:bg-gradient-to-b before:from-transparent before:via-slate-200 before:to-transparent">
                            <div>
                                <div class="text-xs uppercase font-semibold text-slate-400 mb-5">Company</div>
                                <ul class="space-y-1 -mx-3">
                                    <li>
                                        <a class="flex text-sm font-semibold text-slate-800 px-3 py-1 rounded hover:bg-slate-50 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition" href="#0">Documentation</a>
                                    </li>
                                    <li>
                                        <a class="flex text-sm font-semibold text-slate-800 px-3 py-1 rounded hover:bg-slate-50 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition" href="#0">Pricing</a>
                                    </li>
                                    <li>
                                        <a class="flex text-sm font-semibold text-slate-800 px-3 py-1 rounded hover:bg-slate-50 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition" href="#0">Priority Support</a>
                                    </li>
                                    <li>
                                        <a class="flex text-sm font-semibold text-slate-800 px-3 py-1 rounded hover:bg-slate-50 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition" href="#0">About</a>
                                    </li>
                                    <li>
                                        <a class="flex text-sm font-semibold text-slate-800 px-3 py-1 rounded hover:bg-slate-50 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition" href="#0">Video Tutorials</a>
                                    </li>
                                    <li>
                                        <a class="flex text-sm font-semibold text-slate-800 px-3 py-1 rounded hover:bg-slate-50 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition" href="#0">Community <span class="text-xs italic text-emerald-500 font-normal ml-1">New</span></a>
                                    </li>
                                </ul>
                            </div>
                            <div class="lg:grow flex items-end lg:justify-end">
                                <div class="flex items-center space-x-3">
                                    <a class="text-sm font-medium text-slate-500 hover:text-slate-900 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition" href="#0">Login</a>
                                    <a class="inline-flex justify-center whitespace-nowrap rounded-full bg-white border border-slate-200 px-3 py-1.5 text-sm font-medium text-indigo-500 hover:bg-indigo-600 hover:text-white hover:border-indigo-500 focus-visible:outline-none focus-visible:ring focus-visible:ring-indigo-300 transition" href="#0">Request Demo</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </nav>
    </div>                                                                                              
</header>

Conclusions

In this tutorial, we saw how easy it is to create an expandable header component using Alpine.js - without writing a single line of JavaScript, and using a CSS-only approach for animating the menu height. Hope you enjoyed this tutorial, and let us know if you want to see this component integrated into one our Tailwind templates!

Create a Stacking Cards Waterfall Effect with Tailwind and Alpine.js

Cruip — Tue, 31 Oct 2023 09:43:10 +0000

Live Demo / Download

Lately, we’ve been seeing a lot more animations being used on landing pages. It’s not just about the product anymore; how you present it also shows off that you’re professional and pay attention to the little details.

When used in the right way, animation effects can really help engaging users. It’s all about finding the right balance: too many visuals can overwhelm people, but the right amount can guide them towards taking action. Our curated gallery of landing page designs showcases many examples of cool animations. One of our favorites is BlackWallet. We’ve taken inspiration to their landing to create a cool stacking cards effect that reveals as you scroll.

We’ll be using Tailwind CSS for styling, and for the animation we’ll be using Alpine.js and the Intersect Plugin.

Let’s get into the technical stuff!

Creating the HTML structure

To start off, let’s create the HTML structure. I won’t go into too much detail about this since it’s not the main focus of this tutorial. I’ll just give you the HTML code with all the necessary Tailwind utility classes for styling:

<div class="max-w-5xl mx-auto">
    <div class="relative z-0 space-y-14">
        <!-- Section #1 -->
        <section>
            <div class="relative bg-slate-800 rounded-2xl border border-slate-700 overflow-hidden transition-transform duration-700 ease-in-out">
                <div class="md:flex justify-between items-center">
                    <div class="shrink-0 px-12 py-14 max-md:pb-0 md:pr-0">
                        <div class="md:max-w-md">
                            <div class="font-nycd text-xl text-indigo-500 mb-2 relative inline-flex justify-center items-end">
                                Interesting
                                <svg class="absolute fill-indigo-500 opacity-40 -z-10" xmlns="http://www.w3.org/2000/svg" width="88" height="4" viewBox="0 0 88 4" aria-hidden="true" preserveAspectRatio="none">
                                    <path d="M87.343 2.344S60.996 3.662 44.027 3.937C27.057 4.177.686 3.655.686 3.655c-.913-.032-.907-1.923-.028-1.999 0 0 26.346-1.32 43.315-1.593 16.97-.24 43.342.282 43.342.282.904.184.913 1.86.028 1.999" />
                                </svg>
                            </div>
                            <h1 class="text-4xl font-extrabold text-slate-50 mb-4">The modern way to find high-quality devs</h1>
                            <p class="text-slate-400 mb-6">We're the world's largest marketplace of quality developers for early-stage startups. Need a hand with development? Grab one of ours!</p>
                            <a class="text-sm font-medium inline-flex items-center justify-center px-3 py-1.5 border border-slate-700 rounded-lg tracking-normal transition text-slate-300 hover:text-slate-50 group" href="#0">
                                Learn More <span class="text-slate-600 group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out ml-1">-&gt;</span>
                            </a>
                        </div>
                    </div>
                    <img class="mx-auto max-md:-translate-x-[5%]" src="./illustration-01.png" width="519" height="490" alt="Illustration 01">
                </div>
                <div class="absolute left-12 bottom-0 h-14 flex items-center text-xs font-medium text-slate-400">01</div>
            </div>
        </section>
        <!-- Section #2 -->
        <section>
            <div class="relative bg-slate-800 rounded-2xl border border-slate-700 overflow-hidden transition-transform duration-700 ease-in-out">
                <div class="md:flex justify-between items-center">
                    <div class="shrink-0 px-12 py-14 max-md:pb-0 md:pr-0">
                        <div class="md:max-w-md">
                            <div class="font-nycd text-xl text-sky-500 mb-2 relative inline-flex justify-center items-end">
                                Engaging
                                <svg class="absolute fill-sky-500 opacity-40 -z-10" xmlns="http://www.w3.org/2000/svg" width="88" height="4" viewBox="0 0 88 4" aria-hidden="true" preserveAspectRatio="none">
                                    <path d="M87.343 2.344S60.996 3.662 44.027 3.937C27.057 4.177.686 3.655.686 3.655c-.913-.032-.907-1.923-.028-1.999 0 0 26.346-1.32 43.315-1.593 16.97-.24 43.342.282 43.342.282.904.184.913 1.86.028 1.999" />
                                </svg>
                            </div>
                            <h1 class="text-4xl font-extrabold text-slate-50 mb-4">The modern way to find high-quality devs</h1>
                            <p class="text-slate-400 mb-6">We're the world's largest marketplace of quality developers for early-stage startups. Need a hand with development? Grab one of ours!</p>
                            <a class="text-sm font-medium inline-flex items-center justify-center px-3 py-1.5 border border-slate-700 rounded-lg tracking-normal transition text-slate-300 hover:text-slate-50 group" href="#0">
                                Learn More <span class="text-slate-600 group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out ml-1">-&gt;</span>
                            </a>
                        </div>
                    </div>
                    <img class="mx-auto max-md:-translate-x-[5%]" src="./illustration-02.png" width="519" height="490" alt="Illustration 02">
                </div>
                <div class="absolute left-12 bottom-0 h-14 flex items-center text-xs font-medium text-slate-400">02</div>
            </div>
        </section>
        <!-- Section #3 -->
        <section>
            <div class="relative bg-slate-800 rounded-2xl border border-slate-700 overflow-hidden transition-transform duration-700 ease-in-out">
                <div class="md:flex justify-between items-center">
                    <div class="shrink-0 px-12 py-14 max-md:pb-0 md:pr-0">
                        <div class="md:max-w-md">
                            <div class="font-nycd text-xl text-teal-500 mb-2 relative inline-flex justify-center items-end">
                                Appealing
                                <svg class="absolute fill-teal-500 opacity-40 -z-10" xmlns="http://www.w3.org/2000/svg" width="88" height="4" viewBox="0 0 88 4" aria-hidden="true" preserveAspectRatio="none">
                                    <path d="M87.343 2.344S60.996 3.662 44.027 3.937C27.057 4.177.686 3.655.686 3.655c-.913-.032-.907-1.923-.028-1.999 0 0 26.346-1.32 43.315-1.593 16.97-.24 43.342.282 43.342.282.904.184.913 1.86.028 1.999" />
                                </svg>
                            </div>
                            <h1 class="text-4xl font-extrabold text-slate-50 mb-4">The modern way to find high-quality devs</h1>
                            <p class="text-slate-400 mb-6">We're the world's largest marketplace of quality developers for early-stage startups. Need a hand with development? Grab one of ours!</p>
                            <a class="text-sm font-medium inline-flex items-center justify-center px-3 py-1.5 border border-slate-700 rounded-lg tracking-normal transition text-slate-300 hover:text-slate-50 group" href="#0">
                                Learn More <span class="text-slate-600 group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out ml-1">-&gt;</span>
                            </a>
                        </div>
                    </div>
                    <img class="mx-auto max-md:-translate-x-[5%]" src="./illustration-03.png" width="519" height="490" alt="Illustration 03">
                </div>
                <div class="absolute left-12 bottom-0 h-14 flex items-center text-xs font-medium text-slate-400">03</div>
            </div>
        </section>
    </div>
</div>

The sctucture consists of a container with three sections, each containing an image and some text. The sections are set against a dark background with rounded borders, giving it a sleek look. The sections are stacked one below the other, with a vertical margin of 56px (space-y-14).

Designing the animation

Before we start using Alpine.js for animation, we must first decide how to arrange the cards when they are in “collapsed” mode. Instead of using absolute positioning – like in a previous tutorial on creating a sticky on scroll effect – we’ll use the CSS property transform: translateY() to shift the cards upwards and stack them on top of each other. This way, we can maintain the container’s height and easily determine when each section appears in the viewport using the Intersect Plugin.

So, let’s modify the HTML to stack the cards:

<div class="max-w-5xl mx-auto">
    <div class="relative z-0 space-y-14">
        <!-- Section #1 -->
        <section class="[--i:0]">
            <div class="relative bg-slate-800 rounded-2xl border border-slate-700 overflow-hidden transition-transform duration-700 ease-in-out z-[2] -translate-y-[calc(100%*var(--i))]">
                <!-- Card content -->
            </div>
        </section>
        <!-- Section #2 -->
        <section class="[--i:1]">
            <div class="relative bg-slate-800 rounded-2xl border border-slate-700 overflow-hidden transition-transform duration-700 ease-in-out z-[1] -translate-y-[calc(100%*var(--i))]">
                <!-- Card content -->
            </div>
        </section>
        <!-- Section #3 -->
        <section class="[--i:2]">
            <div class="relative bg-slate-800 rounded-2xl border border-slate-700 overflow-hidden transition-transform duration-700 ease-in-out z-0 -translate-y-[calc(100%*var(--i))]">
                <!-- Card content -->
            </div>
        </section>
    </div>
</div>

In summary, here’s what we did:

Each section is given classes like [--i:0], [--i:1], and [--i:2]. These classes set a custom CSS variable --i, marking each section’s index. The index value will help us to determine the translate-y value for every section.
The direct descendants of each section are given the class -translate-y-[calc(100%*var(--i))], that makes them shift up based on their index. So, the first section’s content won’t move up at all (translate-y: -100% * 0 = 0), the second section’s content will move up by 100% (translate-y: -100% * 1 = -100%), and the third section’s content will move up by 200% (translate-y: -100% * 2 = -200%).
As subsequent sections stack over their predecessors, we inverted the stacking order using classes like z-[2], z-[1], and z-0.

This setup ensures our sections appear “collapsed”, preparing them for the cascading reveal upon scrolling.

Implementing the animation with Alpine.js and the Intersect plugin

So, here’s how the animation works: when you scroll down and a certain section is supposed to come into view, the content of that section will slide down to reveal itself, and it will also bring along all the following sections.

To do that, we’ll use Alpine.js and the Intersect Plugin – which is a wrapper for the Intersection Observer – to detect when an element appears in the viewport.

First, we need to make sure we load both required libraries. We’ll do that as quickly as possible, by including a script tag in the head of our document.

After ensuring both required libraries are loaded, our next step is to trigger an action when an element appears in the viewport using the x-intersect attribute. This, combined with other techniques, manages the correct translate-y value for each section.

<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/intersect@3.x.x/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

Note: If, by some wild chance, you’ve made it this far and are gearing up to say, “Hey, why use two whole libraries for such a teeny effect?” – please consider that the main purpose of this tutorial is educational. In the real world, you might already have Alpine.js installed and have reasons to use Intersect Plugin. But if the thought of adding another library for this makes you twitchy, consider this tutorial a starting point to craft your custom solution! 😉

Now, let’s get back to it. To perform an action when an element enters the viewport, we need to add the x-intersect attribute to the element itself. In our case, we want to set a variable (which we’ll call entered) and assign it the index of the last section that entered the field of view. This will help us manage the correct value of translate-y to assign to each section:

<div class="max-w-5xl mx-auto" x-data="{ entered: '0' }">
    <div class="relative z-0 space-y-14">
        <!-- Section #1 -->
        <section x-intersect.margin.-70%.0.-30%.0="entered = '0'" class="[--i:0]" :class="'[--e:'+entered+']'">
            <div class="relative bg-slate-800 rounded-2xl border border-slate-700 overflow-hidden transition-transform duration-700 ease-in-out z-[2] -translate-y-[calc(100%*var(--i))]">
                <!-- Card content -->
            </div>
        </section>
        <!-- Section #2 -->
        <section x-intersect.margin.-70%.0.-30%.0="entered = '1'" class="[--i:1]" :class="'[--e:'+entered+']'">
            <div class="relative bg-slate-800 rounded-2xl border border-slate-700 overflow-hidden transition-transform duration-700 ease-in-out z-[1] -translate-y-[calc(100%*var(--i))]">
                <!-- Card content -->
            </div>
        </section>
        <!-- Section #3 -->
        <section x-intersect.margin.-70%.0.-30%.0="entered = '2'" class="[--i:2]" :class="'[--e:'+entered+']'">
            <div class="relative bg-slate-800 rounded-2xl border border-slate-700 overflow-hidden transition-transform duration-700 ease-in-out z-0 -translate-y-[calc(100%*var(--i))]">
                <!-- Card content -->
            </div>
        </section>
    </div>
</div>

Here’s a summary of what we did:

We added the x-data directive to the main container, which allows us to define the entered variable with a default value of 0.
Each section has been assigned the x-intersect directive. This will change the value of the entered variable as we scroll.
We also used the .margin modifier to control the rootMargin of the IntersectionObserver. By using the values -70%.0.-30%.0, we’re telling the IntersectionObserver to trigger the action when the section intersects an imaginary horizontal line positioned 30% from the bottom of the viewport.
Finally, we’ve added the :class attribute to define a new custom CSS variable --e. This variable helps us calculate the correct translate-y to assign to each section.

Now we have everything we need to properly translate the content of each section. Let’s complete the integration:

<div class="max-w-5xl mx-auto" x-data="{ entered: '0' }">
    <div class="relative z-0 space-y-14">
        <!-- Section #1 -->
        <section x-intersect.margin.-70%.0.-30%.0="entered = '0'" class="[--i:0]" :class="'[--e:'+entered+']'">
            <div class="relative bg-slate-800 rounded-2xl border border-slate-700 overflow-hidden transition-transform duration-700 ease-in-out z-[2]" :class="entered >= 0 ? 'translate-y-0' : '-translate-y-[calc(100%*(var(--i)-var(--e)))]'">
                <!-- Card content -->
            </div>
        </section>
        <!-- Section #2 -->
        <section x-intersect.margin.-70%.0.-30%.0="entered = '1'" class="[--i:1]" :class="'[--e:'+entered+']'">
            <div class="relative bg-slate-800 rounded-2xl border border-slate-700 overflow-hidden transition-transform duration-700 ease-in-out z-[1]" :class="entered >= 1 ? 'translate-y-0' : '-translate-y-[calc(100%*(var(--i)-var(--e)))]'">
                <!-- Card content -->
            </div>
        </section>
        <!-- Section #3 -->
        <section x-intersect.margin.-70%.0.-30%.0="entered = '2'" class="[--i:2]" :class="'[--e:'+entered+']'">
            <div class="relative bg-slate-800 rounded-2xl border border-slate-700 overflow-hidden transition-transform duration-700 ease-in-out z-0" :class="entered >= 2 ? 'translate-y-0' : '-translate-y-[calc(100%*(var(--i)-var(--e)))]'">
                <!-- Card content -->
            </div>
        </section>
    </div>
</div>

We have removed the class -translate-y-[calc(100%*var(--i))] because we need to handle the translate-y value dynamically based on the entered variable’s value.

To explain this further, let’s go through some examples. Let’s say section 1 is in view. In this case, the entered value will be 0. So, the translate-y value will be 0 for section 1, -100% for section 2, and -200% for section 3.

Now, if section 2 comes into view, the entered value becomes 1. As a result, the translate-y value will be 0 for both sections 1 and 2, and -100% for section 3.

Lastly, when section 3 is in view, the entered value will be 2. Therefore, the translate-y value for all three sections — 1, 2, and 3 — will be 0. In simpler terms, all the cards will be visible!

One important thing to note is that this animation occurs every time a section enters the viewport. If you want the animation to happen only once, you can use Alpine.js’s .once modifier.

Here is the final code:

<div class="max-w-5xl mx-auto">
    <div class="relative z-0 space-y-14" x-data="{ entered: '0' }">
        <!-- Section #1 -->
        <section x-intersect.margin.-70%.0.-30%.0="entered = '0'" class="[--i:0]" :class="'[--e:'+entered+']'">
            <div class="relative bg-slate-800 rounded-2xl border border-slate-700 overflow-hidden transition-transform duration-700 ease-in-out z-[2]" :class="entered >= 0 ? 'translate-y-0' : '-translate-y-[calc(100%*(var(--i)-var(--e)))]'">
                <div class="md:flex justify-between items-center">
                    <div class="shrink-0 px-12 py-14 max-md:pb-0 md:pr-0">
                        <div class="md:max-w-md">
                            <div class="font-nycd text-xl text-indigo-500 mb-2 relative inline-flex justify-center items-end">
                                Interesting
                                <svg class="absolute fill-indigo-500 opacity-40 -z-10" xmlns="http://www.w3.org/2000/svg" width="88" height="4" viewBox="0 0 88 4" aria-hidden="true" preserveAspectRatio="none">
                                    <path d="M87.343 2.344S60.996 3.662 44.027 3.937C27.057 4.177.686 3.655.686 3.655c-.913-.032-.907-1.923-.028-1.999 0 0 26.346-1.32 43.315-1.593 16.97-.24 43.342.282 43.342.282.904.184.913 1.86.028 1.999" />
                                </svg>
                            </div>
                            <h1 class="text-4xl font-extrabold text-slate-50 mb-4">The modern way to find high-quality devs</h1>
                            <p class="text-slate-400 mb-6">We're the world's largest marketplace of quality developers for early-stage startups. Need a hand with development? Grab one of ours!</p>
                            <a class="text-sm font-medium inline-flex items-center justify-center px-3 py-1.5 border border-slate-700 rounded-lg tracking-normal transition text-slate-300 hover:text-slate-50 group" href="#0">
                                Learn More <span class="text-slate-600 group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out ml-1">-&gt;</span>
                            </a>
                        </div>
                    </div>
                    <img class="mx-auto max-md:-translate-x-[5%]" src="./illustration-01.png" width="519" height="490" alt="Illustration 01">
                </div>
                <div class="absolute left-12 bottom-0 h-14 flex items-center text-xs font-medium text-slate-400">01</div>
            </div>
        </section>
        <!-- Section #2 -->
        <section x-intersect.margin.-70%.0.-30%.0="entered = '1'" class="[--i:1]" :class="'[--e:'+entered+']'">
            <div class="relative bg-slate-800 rounded-2xl border border-slate-700 overflow-hidden transition-transform duration-700 ease-in-out z-[1]" :class="entered >= 1 ? 'translate-y-0' : '-translate-y-[calc(100%*(var(--i)-var(--e)))]'">
                <div class="md:flex justify-between items-center">
                    <div class="shrink-0 px-12 py-14 max-md:pb-0 md:pr-0">
                        <div class="md:max-w-md">
                            <div class="font-nycd text-xl text-sky-500 mb-2 relative inline-flex justify-center items-end">
                                Engaging
                                <svg class="absolute fill-sky-500 opacity-40 -z-10" xmlns="http://www.w3.org/2000/svg" width="88" height="4" viewBox="0 0 88 4" aria-hidden="true" preserveAspectRatio="none">
                                    <path d="M87.343 2.344S60.996 3.662 44.027 3.937C27.057 4.177.686 3.655.686 3.655c-.913-.032-.907-1.923-.028-1.999 0 0 26.346-1.32 43.315-1.593 16.97-.24 43.342.282 43.342.282.904.184.913 1.86.028 1.999" />
                                </svg>
                            </div>
                            <h1 class="text-4xl font-extrabold text-slate-50 mb-4">The modern way to find high-quality devs</h1>
                            <p class="text-slate-400 mb-6">We're the world's largest marketplace of quality developers for early-stage startups. Need a hand with development? Grab one of ours!</p>
                            <a class="text-sm font-medium inline-flex items-center justify-center px-3 py-1.5 border border-slate-700 rounded-lg tracking-normal transition text-slate-300 hover:text-slate-50 group" href="#0">
                                Learn More <span class="text-slate-600 group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out ml-1">-&gt;</span>
                            </a>
                        </div>
                    </div>
                    <img class="mx-auto max-md:-translate-x-[5%]" src="./illustration-02.png" width="519" height="490" alt="Illustration 02">
                </div>
                <div class="absolute left-12 bottom-0 h-14 flex items-center text-xs font-medium text-slate-400">02</div>
            </div>
        </section>
        <!-- Section #3 -->
        <section x-intersect.margin.-70%.0.-30%.0="entered = '2'" class="[--i:2]" :class="'[--e:'+entered+']'">
            <div class="relative bg-slate-800 rounded-2xl border border-slate-700 overflow-hidden transition-transform duration-700 ease-in-out z-0" :class="entered >= 2 ? 'translate-y-0' : '-translate-y-[calc(100%*(var(--i)-var(--e)))]'">
                <div class="md:flex justify-between items-center">
                    <div class="shrink-0 px-12 py-14 max-md:pb-0 md:pr-0">
                        <div class="md:max-w-md">
                            <div class="font-nycd text-xl text-teal-500 mb-2 relative inline-flex justify-center items-end">
                                Appealing
                                <svg class="absolute fill-teal-500 opacity-40 -z-10" xmlns="http://www.w3.org/2000/svg" width="88" height="4" viewBox="0 0 88 4" aria-hidden="true" preserveAspectRatio="none">
                                    <path d="M87.343 2.344S60.996 3.662 44.027 3.937C27.057 4.177.686 3.655.686 3.655c-.913-.032-.907-1.923-.028-1.999 0 0 26.346-1.32 43.315-1.593 16.97-.24 43.342.282 43.342.282.904.184.913 1.86.028 1.999" />
                                </svg>
                            </div>
                            <h1 class="text-4xl font-extrabold text-slate-50 mb-4">The modern way to find high-quality devs</h1>
                            <p class="text-slate-400 mb-6">We're the world's largest marketplace of quality developers for early-stage startups. Need a hand with development? Grab one of ours!</p>
                            <a class="text-sm font-medium inline-flex items-center justify-center px-3 py-1.5 border border-slate-700 rounded-lg tracking-normal transition text-slate-300 hover:text-slate-50 group" href="#0">
                                Learn More <span class="text-slate-600 group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out ml-1">-&gt;</span>
                            </a>
                        </div>
                    </div>
                    <img class="mx-auto max-md:-translate-x-[5%]" src="./illustration-03.png" width="519" height="490" alt="Illustration 03">
                </div>
                <div class="absolute left-12 bottom-0 h-14 flex items-center text-xs font-medium text-slate-400">03</div>
            </div>
        </section>
    </div>
</div>

Conclusions

You may have noticed that in our latest Tailwind tutorials, we have been pushing the boundaries a bit. Our goal is to provide more original content that can give you new ideas for your landing pages. If you’re enjoying these experiments and would like to see them included in our Tailwind Templates, let us know. We really love getting feedback from you guys in our community and we’re always working hard to make our products better and more suited to what you want!

How to Make a Stunning CTA Animation with Tailwind CSS

Cruip — Tue, 24 Oct 2023 07:29:21 +0000

Live Demo / Download

The Call To Action is the most important element of an interface, as it enables users to turn their intentions into actions, and products to finalize a specific goal (e.g., converting a prospect to a free trial).

In all our Tailwind templates you'll find at least one Call To Action. We designed them in unlimited shapes and styles, with the ultimate goal of creating a connection between products and end users.

Generally, we like to design simple and straightforward CTAs, but for this tutorial (which was inspired by Glide), we decided to create a Call To Action animation using Tailwind CSS.

We are going to build a fake button that triggers multiple animations when you hover over it:

Changing the section's color scheme from light to dark.
Adding a scrolling effect to the text on the button.
Highlighting the button's border with a “shine” effect.

Creating the base structure

Alright, let's start by creating the basic structure for our CTA. We'll use the <section> tag as a container and the <a> tag to make everything clickable.

<section class="relative z-0">
  <div class="w-full max-w-5xl mx-auto px-4 md:px-6 py-48">
    <div class="text-center">
      <a
        class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-6 items-center justify-center text-3xl sm:text-4xl md:text-5xl font-semibold text-slate-900"
        href="#0"
      >
        <!-- Fake Button -->
        <span>
          <!-- Default content: "Build the UI you need" -->
          <span>Build the UI you need</span>
          <!-- Hover content: "Create beautiful user interfaces" -->
          <span
            class="before:content-['Create_beautiful_user_interfaces'] after:content-['Create_beautiful_user_interfaces']"
            aria-hidden="true"
          ></span>
        </span>

        <!-- Text: "with Cruip" -->
        <span>with Cruip</span>
      </a>
    </div>
  </div>
</section>

The setup is pretty simple. The only thing to highlight is that we've used pseudo-attributes before and after for the moving text. This lets us duplicate the text without creating another element.

Changing the section color mode on hover

Before defining the rest of the style, let's see how to change the background color when the mouse hovers over it. We will use the before pseudo-attribute to create an overlay.

<section class="relative z-0">
  <div class="w-full max-w-5xl mx-auto px-4 md:px-6 py-48">
    <div class="text-center">
      <a
        class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-6 items-center justify-center text-3xl sm:text-4xl md:text-5xl font-semibold text-slate-900 before:absolute before:inset-0 hover:before:bg-slate-900 before:-z-10 before:transition-colors before:duration-500 group"
        href="#0"
      >
        <!-- Fake Button -->
        <span>
          <!-- Default content: "Build the UI you need" -->
          <span class="group-hover:opacity-0 transition-opacity duration-500 ease-in-out">Build the UI you need</span>
          <!-- Hover content: "Create beautiful user interfaces" -->
          <span
            class="before:content-['Create_beautiful_user_interfaces'] after:content-['Create_beautiful_user_interfaces']"
            aria-hidden="true"
          ></span>
        </span>

        <!-- Text: "with Cruip" -->
        <span>with Cruip</span>
      </a>
    </div>
  </div>
</section>

Creating the fake button interaction

To make a smooth transition between the default content and the hover content, we'll position the latter absolutely with opacity 0. And with Tailwind's group-hover: modifier, we'll switch the opacities.

<section class="relative z-0">
  <div class="w-full max-w-5xl mx-auto px-4 md:px-6 py-48">
    <div class="text-center">
      <a
        class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-6 items-center justify-center text-3xl sm:text-4xl md:text-5xl font-semibold text-slate-900 before:absolute before:inset-0 hover:before:bg-slate-900 before:-z-10 before:transition-colors before:duration-500 group"
        href="#0"
      >
        <!-- Fake Button -->
        <span class="relative">
          <!-- Default content: "Build the UI you need" -->
          <span class="group-hover:opacity-0 transition-opacity duration-500 ease-in-out">Build the UI you need</span>
          <!-- Hover content: "Create beautiful user interfaces" -->
          <span
            class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 before:content-['Create_beautiful_user_interfaces'] after:content-['Create_beautiful_user_interfaces']"
            aria-hidden="true"
          ></span>
        </span>

        <!-- Text: "with Cruip" -->
        <span>with Cruip</span>
      </a>
    </div>
  </div>
</section>

Styling the button

Now, let's style the button. First, we'll define the style for the default text. We'll use a bunch of Tailwind utility classes to set padding, background gradients, border gradients, and more.

<!-- Fake Button -->
<span
  class="relative p-0.5 rounded-full bg-slate-200 group-hover:bg-slate-800 transition duration-500 overflow-hidden flex items-center justify-center"
>
  <span class="relative whitespace-nowrap">
    <!-- Default content: "Build the UI you need" -->
    <span
      class="block px-8 py-6 rounded-full bg-gradient-to-r from-slate-200 to-slate-100 z-10 group-hover:opacity-0 transition-opacity duration-500 ease-in-out"
      >Build the UI you need</span
    >
    <!-- Hover content: "Create beautiful user interfaces" -->
    <span
      class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 before:content-['Create_beautiful_user_interfaces'] after:content-['Create_beautiful_user_interfaces']"
      aria-hidden="true"
    ></span>
  </span>
</span>

Once we've got that down, we can move on to styling the “hover content”:

<!-- Fake Button -->
<span
  class="relative p-0.5 rounded-full bg-slate-200 group-hover:bg-slate-800 transition duration-500 overflow-hidden flex items-center justify-center"
>
  <span class="relative whitespace-nowrap">
    <!-- Default content: "Build the UI you need" -->
    <span
      class="block px-8 py-6 rounded-full bg-gradient-to-r from-slate-200 to-slate-100 z-10 group-hover:opacity-0 transition-opacity duration-500 ease-in-out"
      >Build the UI you need</span
    >
    <!-- Hover content: "Create beautiful user interfaces" -->
    <span
      class="absolute inset-0 rounded-full bg-gradient-to-r from-slate-900 to-slate-800 z-10 inline-flex items-center whitespace-nowrap overflow-hidden opacity-0 group-hover:opacity-100 transition-opacity duration-500 before:bg-clip-text before:text-transparent before:bg-gradient-to-r before:from-indigo-500 before:to-indigo-300 after:bg-clip-text after:text-transparent after:bg-gradient-to-r after:from-indigo-500 after:to-indigo-300 before:content-['Create_beautiful_user_interfaces'] after:content-['Create_beautiful_user_interfaces'] before:px-2 after:px-2"
      aria-hidden="true"
    ></span>
  </span>
</span>

And finally, we'll add a few more classes to define the style for the last portion of the text:

<span class="group-hover:text-slate-300 transition-colors duration-500 ease-in-out">with Cruip</span>

And that's it! We've created a smooth transition from light to dark mode when you hover over the button, and we've added a cool crossfade effect.

Now we can move on to the most interesting part: creating the text scrolling animation and the button border shine effect.

Creating the text scrolling animation

To create this type of effect, all we need to do is define a custom animation in the Tailwind configuration file. We'll call it infinite-scroll and set it up to scroll from right to left. Here's the code:

tailwind.config = {
  theme: {
    extend: {
      animation: {
        'infinite-scroll': 'infinite-scroll 6s linear infinite',
      },
      keyframes: {
        'infinite-scroll': {
          from: { transform: 'translateX(0)' },
          to: { transform: 'translateX(-100%)' },
        },
      },
    },
  },
};

Once we have that animation set up, we can easily apply it to our pseudo-element by using the class animate-infinite-scroll. Like this:

<!-- Hover content: "Create beautiful user interfaces" -->
<span
  class="absolute inset-0 rounded-full bg-gradient-to-r from-slate-900 to-slate-800 z-10 inline-flex items-center whitespace-nowrap overflow-hidden opacity-0 group-hover:opacity-100 transition-opacity duration-500 before:bg-clip-text before:text-transparent before:bg-gradient-to-r before:from-indigo-500 before:to-indigo-300 after:bg-clip-text after:text-transparent after:bg-gradient-to-r after:from-indigo-500 after:to-indigo-300 before:content-['Create_beautiful_user_interfaces'] after:content-['Create_beautiful_user_interfaces'] before:px-2 after:px-2 before:animate-infinite-scroll after:animate-infinite-scroll"
  aria-hidden="true"
></span>

Creating the shine effect

This is the final step to complete our CTA. To make the shine effect, we'll use a linear gradient and apply it to the before pseudo-attribute of the button element. Since this gradient is a bit complex, we'll take advantage of Tailwind's arbitrary values feature to achieve it.

To really make the shine effect pop, we'll also add an infinite rotation to the gradient. We don't need to create a custom animation for this. We can just use Tailwind's animate-spin, and use a custom class to change the default rotation time, just like this: animate-[spin_3s_linear_infinite].

So, here's the updated code:

<section class="relative z-0">
  <div class="w-full max-w-5xl mx-auto px-4 md:px-6 py-48">
    <div class="text-center">
      <a
        class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-6 items-center justify-center text-3xl sm:text-4xl md:text-5xl font-semibold text-slate-900 before:absolute before:inset-0 hover:before:bg-slate-900 before:-z-10 before:transition-colors before:duration-500 group"
        href="#0"
      >
        <!-- Fake Button -->
        <span
          class="relative p-0.5 rounded-full bg-slate-200 group-hover:bg-slate-800 transition duration-500 overflow-hidden flex items-center justify-center before:opacity-0 group-hover:before:opacity-100 before:absolute before:w-1/2 before:pb-[100%] before:bg-[linear-gradient(90deg,_theme(colors.indigo.500/0)_0%,_theme(colors.indigo.500)_35%,_theme(colors.indigo.200)_50%,_theme(colors.indigo.500)_65%,_theme(colors.indigo.500/0)_100%)] before:animate-[spin_3s_linear_infinite]"
        >
          <span class="relative whitespace-nowrap">
            <!-- Default content: "Build the UI you need" -->
            <span
              class="block px-8 py-6 rounded-full bg-gradient-to-r from-slate-200 to-slate-100 z-10 group-hover:opacity-0 transition-opacity duration-500 ease-in-out"
              >Build the UI you need</span
            >
            <!-- Hover content: "Create beautiful user interfaces" -->
            <span
              class="absolute inset-0 rounded-full bg-gradient-to-r from-slate-900 to-slate-800 z-10 inline-flex items-center whitespace-nowrap overflow-hidden opacity-0 group-hover:opacity-100 transition-opacity duration-500 before:bg-clip-text before:text-transparent before:bg-gradient-to-r before:from-indigo-500 before:to-indigo-300 after:bg-clip-text after:text-transparent after:bg-gradient-to-r after:from-indigo-500 after:to-indigo-300 before:content-['Create_beautiful_user_interfaces'] after:content-['Create_beautiful_user_interfaces'] before:px-2 after:px-2 before:animate-infinite-scroll after:animate-infinite-scroll"
              aria-hidden="true"
            ></span>
          </span>
        </span>

        <!-- Text: "with Cruip" -->
        <span class="group-hover:text-slate-300 transition-colors duration-500 ease-in-out">with Cruip</span>
      </a>
    </div>
  </div>
</section>

Conclusions

With the new arbitrary values feature in version 3, Tailwind CSS has become an incredibly flexible tool. It lets us make complex effects like the one we've shown you without writing a single line of CSS.

If you're hungry for more CSS animations like this, we recommend checking out our Tailwind tutorials. For example, we've got a guide on how to make an animated number counter, as well as one on how to create an infinite horizontal scroll animation.

Create an Animated Gradient Text with Tailwind CSS

Cruip — Tue, 17 Oct 2023 08:08:39 +0000

Live Demo / Download

Gradients are the one thing that will never go out of style in web design. You can see them everywhere, from backgrounds to images and texts. The variety of color combinations is endless, and the outcome is consistently attractive and modern.

We at Cruip love gradients. We use them on many of our Tailwind CSS templates and tutorials, and we are constantly looking for new ways to add a bit of colour to our designs.

In this guide, we’ll show you how to create three text dynamic gradients, each with its own unique color scheme. As Tailwind CSS’s built-in utilities are limited to gradients with up to three color stops, we’ll also see how to create custom gradients using arbitrary values.

Are you ready? So, let’s dive in!

Creating the base text

Let’s begin with our main text. We’ll choose a basic paragraph and set the font size to 128px – using the class text-9xl – and make the text bold with the font-extrabold class. To apply the gradient to the text, we will add the bg-clip-text and text-transparent classes.

<p class="text-6xl md:text-9xl font-extrabold bg-clip-text text-transparent">Gradient Effect</p>

This will be the basic structure used for all the examples in the demo.

Creating the gradient

Now, we’ll work on the first example. We want a gradient that moves from left to right made of four color stops:

Indigo 400
Indigo 100
Sky 400
Fuchsia 400

Given that Tailwind’s standard utilities (from-{color}, via-{color} and to-{color}) don’t support our four-color scheme, we’ll craft a custom class by using Tailwind’s arbitrary values.

To create this custom class, we first need to figure out how we’d create the gradient using standard CSS. In our case, it would be defined like this:

background-image: linear-gradient(to right,#818cf8,#e0e7ff,#38bdf8,#e879f9,#38bdf8,#e0e7ff,#818cf8)

Next, let’s construct our custom class. We’ll start with the prefix bg- and then add square brackets. Within these brackets, we’ll insert our arbitrary value, replacing spaces with underscores:

bg-[linear-gradient(to_right,#818cf8,#e0e7ff,#38bdf8,#e879f9,#38bdf8,#e0e7ff,#818cf8)]

Using colors from Tailwind’s palette

Our custom class is functioning smoothly. However, it can be refined by leveraging colors from Tailwind’s palette. We’ll achieve this by using the theme() function to select the specific colors we want from the palette.

The colors we’ll be using are colors.indigo.400, colors.indigo.100, colors.sky.400, and colors.fuchsia.400.

Our updated custom class will look like this:

bg-[linear-gradient(to_right,theme(colors.indigo.400),theme(colors.indigo.100),theme(colors.sky.400),theme(colors.fuchsia.400))]

Making the pattern repeatable

Right now, our gradient starts with the color Indigo 400 and ends with Fuchsia 400. For a continuous, right-to-left flowing animation, we need a pattern where the start and end match perfectly.

To achieve this, we’ll place another gradient next to our current one, but with the colors reversed. This second gradient will start with Fuchsia 400 and end with Indigo 400.

So, we’ll modify our custom class like this:

bg-[linear-gradient(to_right,theme(colors.indigo.400),theme(colors.indigo.100),theme(colors.sky.400),theme(colors.fuchsia.400),theme(colors.sky.400),theme(colors.indigo.100),theme(colors.indigo.400))]

Great! To position the gradient correctly and only display the first half (from Indigo 400 to Fuchsia 400), we’ll stretch its width to 200% using the class bg-[length:200%_auto]. The other half will be hidden, setting the stage for our scrolling animation.

Setting up the animation

At this point, crafting the animation with Tailwind CSS is a breeze: we aim for the gradient to roll from right to left endlessly.

Put simply, we want the background-position-x to gradually shift from 0 to 200% (remember, we’ve doubled the gradient’s width) without any interruptions.

To make it happen, we’ll design a custom animation in the tailwind.config.js file:

tailwind.config = {
  theme: {
    extend: {
      animation: {
        'gradient': 'gradient 8s linear infinite',
      },
      keyframes: {
        'gradient': {
          to: { 'background-position': '200% center' },
        }
      }                    
    },
  },
};

Now, to apply the animation to our paragraph, just add the class animate-gradient. Cool, right?

Exploring more gradients

Now that we’ve mastered the technique, we can craft endless gradients with various colors. Here are three other examples we’ve showcased in our demo:

<p class="text-6xl md:text-9xl font-extrabold bg-clip-text text-transparent bg-[linear-gradient(to_right,theme(colors.indigo.400),theme(colors.indigo.100),theme(colors.sky.400),theme(colors.fuchsia.400),theme(colors.sky.400),theme(colors.indigo.100),theme(colors.indigo.400))] bg-[length:200%_auto] animate-gradient">Gradient Effect</p>
<p class="text-6xl md:text-9xl font-extrabold bg-clip-text text-transparent bg-[linear-gradient(to_right,theme(colors.green.300),theme(colors.green.100),theme(colors.sky.400),theme(colors.yellow.200),theme(colors.sky.400),theme(colors.green.100),theme(colors.green.300))] bg-[length:200%_auto] animate-gradient">Gradient Effect</p>
<p class="text-6xl md:text-9xl font-extrabold bg-clip-text text-transparent bg-[linear-gradient(to_right,theme(colors.purple.400),theme(colors.purple.100),theme(colors.pink.300),theme(colors.orange.400),theme(colors.pink.300),theme(colors.purple.100),theme(colors.purple.400))] bg-[length:200%_auto] animate-gradient">Gradient Effect</p>

As you can see, it’s all about swapping out the color variables in the gradient-defining custom class!

Ad if you want to adjust the speed of the animation, tweak the 8s value in the tailwind.config.js file.

Conclusions

Use the technique to create your own gradient variations that match your unique brand and style.

If you enjoyed this guide, don’t forget to check out our Tailwind CSS tutorials, where we share plenty of useful guides for Tailwind CSS. Fo example, How to Make an Animated Counter with Tailwind CSS, or a How to Create a Sticky On Scroll Effect with JavaScript, and many more.