Card Screen

<div className="w-full md:h-screen h-full flex gap-6 flex-wrap items-center justify-center py-10 px-4 bg-white dark:bg-black">
  {/* Card 1 */}
  <div className="flex flex-col shadow-lg shadow-gray-400 dark:shadow-gray-800/60">
    {/* Image */}
    <img className="sm:w-[20rem] w-[16rem] object-cover rounded-t-lg" src="https://images.unsplash.com/photo-1616469832301-ffaeadc68cf3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxfHx3b3JkcHJlc3MlMjBsb2dvfGVufDB8MHx8fDE3MzYxNTM3NTJ8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="Card Image" />
    {/*  */}
    <ul className="flex flex-col font-semibold rounded-b-lg dark:text-white bg-white dark:bg-gray-800">
      <li className="w-full flex items-center gap-2 pl-4 py-2 border-b dark:border-gray-700">
        <ion-icon name="grid-outline" />
        <p className>5 Modules</p>
      </li>
      <li className="w-full flex items-center gap-2 pl-4 py-2 border-b dark:border-gray-700">
        <ion-icon name="videocam-outline" />
        <p className>16 Videos</p>
      </li>
      <li className="w-full flex items-center gap-2 pl-4 py-2 border-b dark:border-gray-700">
        <ion-icon name="documents-outline" />
        <p className>16 Assignment</p>
      </li>
      <li className="w-full flex items-center gap-2 pl-4 py-2 border-b dark:border-gray-700">
        <ion-icon name="people-outline" />
        <p className>Beginner - Intermediate</p>
      </li>
      <li className="w-full flex items-center gap-2 pl-4 py-2 border-b dark:border-gray-700">
        <ion-icon name="timer-outline" />
        <p className>1h 23mins</p>
      </li>
      <li className="w-full flex items-center justify-center pl-4 py-2">
        <button className="flex gap-2 items-center justify-center px-4 py-1 rounded text-white font-semibold bg-blue-500 transition ease-in-out delay-150 hover:bg-blue-600">
          <ion-icon name="lock-open-outline" /> 
          <span>Register for Course</span>
        </button>
      </li>
    </ul>
  </div>
  {/* Card 2 */}
  <div className="flex flex-col shadow-lg shadow-gray-400 dark:shadow-gray-800/60">
    {/* Image */}
    <img className="sm:w-[20rem] w-[16rem] object-cover rounded-t-lg" src="https://images.unsplash.com/photo-1649180556628-9ba704115795?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxfHxweXRob24lMjBsb2dvfGVufDB8MHx8fDE3MzYxNTM1MjJ8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="Card Image" />
    {/*  */}
    <ul className="flex flex-col font-semibold rounded-b-lg dark:text-white bg-white dark:bg-gray-800">
      <li className="w-full flex items-center gap-2 pl-4 py-2 border-b dark:border-gray-700">
        <ion-icon name="grid-outline" />
        <p className>5 Modules</p>
      </li>
      <li className="w-full flex items-center gap-2 pl-4 py-2 border-b dark:border-gray-700">
        <ion-icon name="videocam-outline" />
        <p className>16 Videos</p>
      </li>
      <li className="w-full flex items-center gap-2 pl-4 py-2 border-b dark:border-gray-700">
        <ion-icon name="documents-outline" />
        <p className>16 Assignment</p>
      </li>
      <li className="w-full flex items-center gap-2 pl-4 py-2 border-b dark:border-gray-700">
        <ion-icon name="people-outline" />
        <p className>Beginner - Intermediate</p>
      </li>
      <li className="w-full flex items-center gap-2 pl-4 py-2 border-b dark:border-gray-700">
        <ion-icon name="timer-outline" />
        <p className>1h 23mins</p>
      </li>
      <li className="w-full flex items-center justify-center pl-4 py-2">
        <button className="flex gap-2 items-center justify-center px-4 py-1 rounded text-white font-semibold bg-blue-500 transition ease-in-out delay-150 hover:bg-blue-600">
          <ion-icon name="lock-open-outline" /> 
          <span>Register for Course</span>
        </button>
      </li>
    </ul>
  </div>
  {/* Card 3 */}
  <div className="flex flex-col shadow-lg shadow-gray-400 dark:shadow-gray-800/60">
    {/* Image */}
    <img className="sm:w-[20rem] w-[16rem] object-cover rounded-t-lg" src="https://images.unsplash.com/photo-1678483789105-2720201bee03?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxfHxjaGF0JTIwZ3B0JTIwbG9nb3xlbnwwfDB8fHwxNzM2MTUzNjAyfDA&ixlib=rb-4.0.3&q=80&w=1080" alt="Card Image" />
    {/*  */}
    <ul className="flex flex-col font-semibold rounded-b-lg dark:text-white bg-white dark:bg-gray-800">
      <li className="w-full flex items-center gap-2 pl-4 py-2 border-b dark:border-gray-700">
        <ion-icon name="grid-outline" />
        <p className>5 Modules</p>
      </li>
      <li className="w-full flex items-center gap-2 pl-4 py-2 border-b dark:border-gray-700">
        <ion-icon name="videocam-outline" />
        <p className>16 Videos</p>
      </li>
      <li className="w-full flex items-center gap-2 pl-4 py-2 border-b dark:border-gray-700">
        <ion-icon name="documents-outline" />
        <p className>16 Assignment</p>
      </li>
      <li className="w-full flex items-center gap-2 pl-4 py-2 border-b dark:border-gray-700">
        <ion-icon name="people-outline" />
        <p className>Beginner - Intermediate</p>
      </li>
      <li className="w-full flex items-center gap-2 pl-4 py-2 border-b dark:border-gray-700">
        <ion-icon name="timer-outline" />
        <p className>1h 23mins</p>
      </li>
      <li className="w-full flex items-center justify-center pl-4 py-2">
        <button className="flex gap-2 items-center justify-center px-4 py-1 rounded text-white font-semibold bg-blue-500 transition ease-in-out delay-150 hover:bg-blue-600">
          <ion-icon name="lock-open-outline" /> 
          <span>Register for Course</span>
        </button>
      </li>
    </ul>
  </div>
</div>


<!-- Icons -->
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>