TailwindCSS Card with Action Button

This is aan Animated Tailwind CSS Card with an Action Button.

by Avadhoot Dandekar

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Animated TailwindCSS Card with Action Button</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
    />      
  </head>

  <body>
  <!-- Beginning of TailwindCSS Card with Action Button -->
    <div class="p-6 max-w-lg bg-pink-300 rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700 px-10 py-10 ml-20 mt-10 mb-10 transform transition duration-500 hover:scale-110">
<a href="https://www.avadhoot.me/p/leadership-types.html" target="_blank">
<h2 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Spiritual Leadership</h2>
</a>
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">And the whole system should eventually move towards an open, transparent, and virtual democratic system so that even a common man can have an access to the whole system without any hassles and costs. All the above three, that is, the cosmic universe, the social universe, and the individual universe are interrelated, interconnected, and interdependent. It is time to think, ponder, and contemplate what kind of a social universe we wish to have? And the activation of this change is a determinant of our Social Leadership.</p>
<div class="mt-3 sm:mt-0 sm:ml-3">
              <a href="https://www.avadhoot.me/p/spiritual.html" target="_blank" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-10">
                Spiritual Leadership
                <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0...