<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Website Title</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
   <div id="agenda">
        <div class="mt-16 text-center">
            <h2 class="text-2xl  md:text-4xl font-bold dark:text-white">What You Will Learn</h2>
            <p class="text-gray-500 text-lg mt-4 mb-8 dark:text-gray-400 ">Topics that will be covered in this webinar</p>
        </div>
        <!-- Card Component  -->
        <div class="flex flex-wrap justify-center mx-auto py-8 px-4 md:mb-16">
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
        <!-- Card 1 -->
        <div class="w-full sm:w-80  mb-4 bg-white rounded-lg shadow-lg">
            <img class="rounded-t-lg w-full h-48 sm:h-64 object-cover" src="https://i.ibb.co/RzdXZB6/Card-image.jpg" alt="" />
            <div class="py-4 px-6">
              <h2 class="hover:cursor-pointer mt-2 text-gray-900 font-bold text-xl sm:text-2xl tracking-tight">Front-End Development</h2>
              <p class="hover:cursor-pointer py-2 text-gray-600 leading-5">HTML, CSS, JavaScript, and frameworks like React and Vue.js - Learn to craft stunning user interfaces and create responsive websites that leave a lasting impression.</p>
            </div>
        </div> 

        <!-- Card 2 -->
        <div class="w-full sm:w-80  mb-4 bg-white rounded-lg shadow-lg">
          <img class="rounded-t-lg w-full h-48 sm:h-64 object-cover" src="https://i.ibb.co/PWpPSD7/Card-image-1.jpg" alt="" />
          <div class="py-4 px-6">
            <h2 class="hover:cursor-pointer mt-2 text-gray-900 font-bold text-xl sm:text-2xl tracking-tight">Back-End Development</h2>
            <p class="hover:cursor-pointer py-2 text-gray-600 leading-5">Node.js, Python, MongoDB, MySQL, Express.js, and Django - Discover the magic of server-side programming and build scalable web applications.</p>
          </div>
        </div>

        <!-- Card 3 -->
        <div class="w-full sm:w-80  mb-4 bg-white rounded-lg shadow-lg">
          <img class="rounded-t-lg w-full h-48 sm:h-64 object-cover" src="https://i.ibb.co/SfqGZQW/Card-image-3.jpg" alt="" />
          <div class="py-4 px-6">
            <h2 class="hover:cursor-pointer mt-2 text-gray-900 font-bold text-xl sm:text-2xl tracking-tight">Becoming a Full-Stack Developer</h2>
            <p class="hover:cursor-pointer py-2 text-gray-600 leading-5">Front-end to back-end, APIs, development tools, and optimization - Elevate your coding skills and become a versatile web development maestro.</p>
          </div>
        </div>
        
           </div>
        </div>
    </div>
</body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.