<div class="w-full max-w-lg mx-auto my-4 space-y-4 text-center">
  <div class="w-full relative">
    <label class="hidden font-alt text-sm text-muted-400">Search</label>
    <div class="group relative">
      <input
        type="text"
        class="
          pl-16
          pr-5
          py-3
          h-16
          text-base
          leading-5
          font-sans
          w-full
          rounded-xl
          bg-white
          text-muted-600
          border border-muted-300
          focus:border-muted-300 focus:shadow-lg focus:shadow-muted-300/50
          dark:focus:shadow-muted-800/50
          placeholder:text-muted-300
          dark:placeholder:text-muted-500
          dark:bg-muted-800
          dark:text-muted-200
          dark:border-muted-700
          dark:focus:border-muted-600
          transition-all
          duration-300
          tw-accessibility
        "
        placeholder="Search blog articles..."
      />
      <div
        class="
          absolute
          top-0
          left-0
          h-16
          w-16
          flex
          justify-center
          items-center
          text-muted-400
          group-focus-within:text-primary-500
          transition-colors
          duration-300
        "
      >
        <i class="iconify w-6 h-6" data-icon="lucide:search"></i>
      </div>
    </div>
  </div>
  <!--Categories-->
  <div class="relative w-full flex justify-center gap-4 flex-wrap">
    <button
      class="
        flex-1
        inline-flex
        justify-center
        items-center
        py-2
        px-4
        font-sans
        text-sm
        rounded-lg
        text-primary-500
        bg-primary-500/20
        border-2 border-primary-500
        transition-colors
        duration-300
        tw-accessibility
      "
    >
      All
    </button>
    <button
      class="
        flex-1
        inline-flex
        justify-center
        items-center
        py-2
        px-4
        font-sans
        text-sm
        rounded-lg
        bg-muted-200
        dark:bg-muted-800
        text-muted-500
        hover:bg-muted-300
        dark:hover:bg-muted-700 dark:hover:text-muted-200
        border-2 border-transparent
        transition-colors
        duration-300
        tw-accessibility
      "
    >
      Business
    </button>
    <button
      class="
        flex-1
        inline-flex
        justify-center
        items-center
        py-2
        px-4
        font-sans
        text-sm
        rounded-lg
        bg-muted-200
        dark:bg-muted-800
        text-muted-500
        hover:bg-muted-300
        dark:hover:bg-muted-700 dark:hover:text-muted-200
        border-2 border-transparent
        transition-colors
        duration-300
        tw-accessibility
      "
    >
      Startups
    </button>
    <button
      class="
        flex-1
        inline-flex
        justify-center
        items-center
        py-2
        px-4
        font-sans
        text-sm
        rounded-lg
        bg-muted-200
        dark:bg-muted-800
        text-muted-500
        hover:bg-muted-300
        dark:hover:bg-muted-700 dark:hover:text-muted-200
        border-2 border-transparent
        transition-colors
        duration-300
        tw-accessibility
      "
    >
      Technology
    </button>
    <button
      class="
        flex-1
        inline-flex
        justify-center
        items-center
        py-2
        px-4
        font-sans
        text-sm
        rounded-lg
        bg-muted-200
        dark:bg-muted-800
        text-muted-500
        hover:bg-muted-300
        dark:hover:bg-muted-700 dark:hover:text-muted-200
        border-2 border-transparent
        transition-colors
        duration-300
        tw-accessibility
      "
    >
      Lifestyle
    </button>
  </div>
</div>
