Use of `target` Variant

<div class="flex gap-2">
    <a href="#p1" class="text-sm hover:text-primary-600">Link 1</a>
    <a href="#p2" class="text-sm hover:text-primary-600">Link 2</a>
    <a href="#p3" class="text-sm hover:text-primary-600">Link 3</a>
    <a href="#" class="text-sm hover:text-primary-600">Link 4</a>
</div>

<div id="p1" class="md:p-12 -mt-9 rounded-card text-gray-300 duration-500 target:bg-gray-950">
    <span class="block font-medium text-lg mb-4 text-title">Link 1 Target</span>
    
    <p class="text-body mb-6 delay-0 duration-300 opacity-0 in-target:opacity-100 in-target:delay-100">Elevate your TailwindCSS skills with over 60 expert-crafted tips. Get early access to 39 actionable tips today and start building faster, smarter, and more confidently.</p>
    
    <ul class="list-disc list-inside space-y-2 delay-0 duration-500 opacity-0 in-target:opacity-100 in-target:delay-200">
        <li> Over 60 expert-crafted tips</li>
        <li> One-time payment, no recurring fees </li>
        <li> Lifetime access to all updates </li>
        <li> 33 tips available now, 60+ tips at launch </li>
    </ul>
</div>

<div id="p2" class="md:p-12 -mt-9 rounded-card text-gray-300 duration-300 target:bg-gray-950">
    <span class="block font-medium text-lg mb-4 text-title">Link 2 Target</span>
    
    <p class="text-body mb-6 delay-0 duration-300 opacity-0 in-target:opacity-100 in-target:delay-100">Elevate your TailwindCSS skills with over 60 expert-crafted tips. Get early access to 39 actionable tips today and start building faster, smarter, and more confidently.</p>
    
    <ul class="list-disc list-inside space-y-2 delay-0 duration-500 opacity-0 in-target:opacity-100 in-target:delay-200">
        <li> Over 60 expert-crafted tips</li>
        <li> One-time payment, no recurring fees </li>
        <li> Lifetime access to all updates </li>
        <li> 33 tips available now, 60+ tips at launch </li>
    </ul>
</div>

<div id="p3" class="md:px-12 md:pt-12 pb-34 -mb-22 rounded-card text-gray-300 duration-300 target:bg-gray-950">
    <span class="block font-medium text-lg mb-4 text-title">Link 3 Target</span>
    
    <p class="text-body mb-6 delay-0 duration-300 opacity-0 in-target:opacity-100 in-target:delay-100">Elevate your TailwindCSS skills with over 60 expert-crafted tips. Get early access to 39 actionable tips today and start building faster, smarter, and more confidently.</p>
    
    <ul class="list-disc list-inside space-y-2 delay-0 duration-500 opacity-0 in-target:opacity-100 in-target:delay-200">
        <li> Over 60 expert-crafted tips</li>
        <li> One-time payment, no recurring fees </li>
        <li> Lifetime access to all updates </li>
        <li> 33 tips available now, 60+ tips at launch </li>
    </ul>
</div>

Code Explanation

• Links: The links at the top of the page use the href attribute to navigate to different sections of the page.
• Target Sections: Each section (div) has an id attribute that matches the href attribute of the links. This allows the browser to scroll to the corresponding section when a link is clicked.
• Styling the Target: The target:bg-gray-950 class applies a background color to the target section when it is navigated to. The in-target:opacity-100 and in-target:delay-100 classes are used to animate the opacity of the content within the target section, providing a smooth transition effect.

Conclusion

Using the target variant in TailwindCSS allows you to style elements that are the target of a link, providing a better user experience by helping users identify which section of the page they have navigated to.