Marketing Blog Cards Gradient border with date, title and tags, animated gradient on hover Dark

<article
      class="rounded-[10px] border border-gray-200 bg-white px-4 pt-12 pb-4 dark:border-gray-700 dark:bg-gray-900"
    >
      <time datetime="2022-10-10" class="block text-xs text-gray-500 dark:text-gray-400">
        10th Oct 2022
      </time>

      <a href="#">
        <h3 class="mt-0.5 text-lg font-medium text-gray-900 dark:text-white">
          How to center an element using JavaScript and jQuery
        </h3>
      </a>

      <div class="mt-4 flex flex-wrap gap-1">
        <span
          class="rounded-full bg-purple-100 px-2.5 py-0.5 text-xs whitespace-nowrap text-purple-600 dark:bg-purple-600 dark:text-purple-100"
        >
          Snippet
        </span>

        <span
          class="rounded-full bg-purple-100 px-2.5 py-0.5 text-xs whitespace-nowrap text-purple-600 dark:bg-purple-600 dark:text-purple-100"
        >
          JavaScript
        </span>
      </div>
    </article>