Tailwind Features Components in Suncealand library

<section class="pt-20 md:pt-40 bg-gray-900 overflow-hidden">
  <div class="container px-4 mx-auto mb-20">
    <div class="text-center mb-24 md:mb-32">
      <div class="inline-flex items-center mb-8">
        <span class="block w-2 h-2 mr-2 rounded-full bg-blue-500"></span>
        <span class="uppercase text-sm text-gray-200 font-medium">FEATURES</span>
      </div>
      <h1 class="text-5xl sm:text-7xl md:text-8xl font-heading font-semibold text-white">Create podcast every day</h1>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-20 lg:mb-0">
        <div>
          <img class="w-full max-w-lg 2xl:max-w-2xl mx-auto" src="suncealand-assets/images/features-frame1.png" alt="">
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4 2xl:pt-16">
        <div class="relative max-w-lg mx-auto 2xl:mx-0 2xl:max-w-2xl mb-12 md:mb-16 px-7 pb-12 pt-9 border border-gray-800 rounded-xl">
          <div class="absolute top-0 left-0 transform -translate-y-1/2 px-5 h-1 w-full pt-px">
            <div class="h-full bg-blue-500"></div>
          </div>
          <div class="flex">
            <span class="flex-shrink-0 inline-block mt-4 mr-8 w-3 h-3 bg-yellow-500 rounded-full"></span>
            <div>
              <h4 class="font-heading text-3xl sm:text-4xl text-white font-semibold mb-6">Comfort like you&apos;ve never experienced before.</h4>
              <p class="text-gray-200">The house by the pond cras ornare.</p>
            </div>
          </div>
        </div>
        <div class="max-w-lg mx-auto 2xl:mx-0 2xl:max-w-2xl mb-12 md:mb-20 px-7">
          <div class="flex">
            <span class="flex-shrink-0 inline-block mt-4 mr-8 w-3 h-3 bg-yellow-500 rounded-full"></span>
            <div>
              <h4 class="font-heading text-3xl sm:text-4xl text-white font-semibold">Create great podcasts</h4>
            </div>
          </div>
        </div>
        <div class="max-w-lg mx-auto 2xl:mx-0 2xl:max-w-2xl px-7">
          <div class="flex">
            <span class="flex-shrink-0 inline-block mt-4 mr-8 w-3 h-3 bg-yellow-500 rounded-full"></span>
            <div>
              <h4 class="font-heading text-3xl sm:text-4xl text-white font-semibold">Make every day feel like Sunday</h4>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="relative pt-16 pb-18">
    <div class="container px-4 mx-auto">
      <img class="absolute top-0 left-0 h-full w-full object-cover lg:object-fill" src="suncealand-assets/background/circles-bottom.svg" alt="">
      <div class="animate-moving relative flex items-center justify-between">
        <span class="relative flex-shrink-0 inline-block mr-8 md:mr-20 lg:mr-40 uppercase text-sm font-medium">
          <span class="absolute top-0 left-0 text-gray-200">Online Platform</span>
          <span class="bg-clip-text bg-gradient-to-br from-indigo-800 to-gray-200 text-transparent relative z-10 animate-pulse">Online Platform</span>
        </span>
        <span class="relative flex-shrink-0 inline-block mr-8 md:mr-20 lg:mr-40 uppercase text-sm font-medium">
          <span class="absolute top-0 left-0 text-gray-200">Everything youd need to podcasts</span>
          <span class="bg-clip-text bg-gradient-to-br from-indigo-800 to-gray-200 text-transparent relative z-10 animate-pulse">Everything youd need to podcasts</span>
        </span>
        <span class="relative flex-shrink-0 inline-block mr-8 md:mr-20 lg:mr-40 uppercase text-sm font-medium">
          <span class="absolute top-0 left-0 text-gray-200">COLLABORATION</span>
          <span class="bg-clip-text bg-gradient-to-br from-indigo-800 to-gray-200 text-transparent relative z-10 animate-pulse">COLLABORATION</span>
        </span>
        <span class="relative flex-shrink-0 inline-block mr-8 md:mr-20 lg:mr-40 uppercase text-sm font-medium">
          <span class="absolute top-0 left-0 text-gray-200">Perfect quality</span>
          <span class="bg-clip-text bg-gradient-to-br from-indigo-800 to-gray-200 text-transparent relative z-10 animate-pulse">Perfect quality</span>
        </span>
        <span class="relative flex-shrink-0 inline-block mr-8 md:mr-20 lg:mr-40 uppercase text-sm font-medium">
          <span class="absolute top-0 left-0 text-gray-200">NEW APP</span>
          <span class="bg-clip-text bg-gradient-to-br from-indigo-800 to-gray-200 text-transparent relative z-10 animate-pulse">NEW APP</span>
        </span>
        <span class="relative flex-shrink-0 inline-block uppercase text-sm font-medium">
          <span class="absolute top-0 left-0 text-gray-200">MORE and more and more</span>
          <span class="bg-clip-text bg-gradient-to-br from-indigo-800 to-gray-200 text-transparent relative z-10 animate-pulse">MORE and more and more</span>
        </span>
      </div>
    </div>
  </div>
</section>