<!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>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div id="benefits" class="bg-white py-6 sm:py-8 lg:py-12">
<div class="mx-8 max-w-screen-2xl px-4 md:px-8 md:mt-16 md:mb-12">
<!-- text - start -->
<div class="mb-10 md:mb-16">
<h2 class="mb-4 text-center text-2xl font-bold text-gray-800 md:mb-6 lg:text-3xl">More reasons to signup
</h2>
<p class="mx-auto max-w-screen-md text-center text-gray-500 md:text-lg">Benefits of joining this webinar</p>
</div>
<!-- text - end -->
<div class="grid gap-8 sm:grid-cols-2 md:gap-12 xl:grid-cols-3 xl:gap-16">
<!-- feature - start -->
<div class="flex gap-4 md:gap-6">
<div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-indigo-500 text-white shadow-lg md:h-14 md:w-14 md:rounded-xl">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
</svg>
</div>
<div>
<h3 class="mb-2 text-lg font-semibold md:text-xl">Growth</h3>
<p class="mb-2 text-gray-500">Expand your knowledge and stay ahead in the tech world.</p>
<a href="#" class="font-bold text-indigo-500 transition duration-100 hover:text-indigo-600 active:text-indigo-700">More</a>
</div>
</div>
<!-- feature - end -->
<!-- feature - start -->
<div class="flex gap-4 md:gap-6">
<div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-indigo-500 text-white shadow-lg md:h-14 md:w-14 md:rounded-xl">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
</div>
<div>
<h3 class="mb-2 text-lg font-semibold md:text-xl">Expertise</h3>
<p class="mb-2 text-gray-500">Learn from industry experts and gain valuable insights..</p>
<a href="#" class="font-bold text-indigo-500 transition duration-100 hover:text-indigo-600 active:text-indigo-700">More</a>
</div>
</div>
<!-- feature - end -->
<!-- feature - start -->
<div class="flex gap-4 md:gap-6">
<div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-indigo-500 text-white shadow-lg md:h-14 md:w-14 md:rounded-xl">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
</svg>
</div>
<div>
<h3 class="mb-2 text-lg font-semibold md:text-xl">Resources</h3>
<p class="mb-2 text-gray-500">Access exclusive tools and resources to enhance your projects. </p>
<a href="#" class="font-bold text-indigo-500 transition duration-100 hover:text-indigo-600 active:text-indigo-700">More</a>
</div>
</div>
<!-- feature - end -->
<!-- feature - start -->
<div class="flex gap-4 md:gap-6">
<div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-indigo-500 text-white shadow-lg md:h-14 md:w-14 md:rounded-xl">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<div>
<h3 class="mb-2 text-lg font-semibold md:text-xl">Empowerment</h3>
<p class="mb-2 text-gray-500"> Elevate your web development skills to new heights.</p>
<a href="#" class="font-bold text-indigo-500 transition duration-100 hover:text-indigo-600 active:text-indigo-700">More</a>
</div>
</div>
<!-- feature - end -->
<!-- feature - start -->
<div class="flex gap-4 md:gap-6">
<div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-indigo-500 text-white shadow-lg md:h-14 md:w-14 md:rounded-xl">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
</div>
<div>
<h3 class="mb-2 text-lg font-semibold md:text-xl">Networking</h3>
<p class="mb-2 text-gray-500">Connect with like-minded developers and build valuable connections..</p>
<a href="#" class="font-bold text-indigo-500 transition duration-100 hover:text-indigo-600 active:text-indigo-700">More</a>
</div>
</div>
<!-- feature - end -->
<!-- feature - start -->
<div class="flex gap-4 md:gap-6">
<div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-indigo-500 text-white shadow-lg md:h-14 md:w-14 md:rounded-xl">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
</div>
<div>
<h3 class="mb-2 text-lg font-semibold md:text-xl">Opportunities</h3>
<p class="mb-2 text-gray-500">Unlock new career opportunities with advanced web development skills.</p>
<a href="#" class="font-bold text-indigo-500 transition duration-100 hover:text-indigo-600 active:text-indigo-700">More</a>
</div>
</div>
<!-- feature - end -->
</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.