<section class="py-20 md:py-40 bg-black">
<div class="container px-4 mx-auto">
<h1 class="font-heading text-6xl sm:text-7xl text-white font-semibold mb-24">Looking for team plans?</h1>
<div class="w-full pb-6 px-1 bg-gray-900 rounded-lg overflow-x-auto">
<table class="w-full min-w-max">
<thead>
<tr>
<th class="p-0">
<div class="h-20 flex items-center pl-12 pr-6">
<span class="text-xl text-white font-semibold">Learn a new skills</span>
</div>
</th>
<th class="p-0">
<div class="h-20 flex items-center justify-center">
<span class="text-xs text-gray-300">Free</span>
</div>
</th>
<th class="p-0">
<div class="h-20 flex items-center justify-center">
<span class="text-xs text-gray-300">LOCATION</span>
</div>
</th>
<th class="p-0">
<div class="h-20 flex items-center justify-center">
<span class="text-xs text-gray-300">Business</span>
</div>
</th>
<th class="p-0">
<div class="h-20 flex items-center justify-center pr-12">
<span class="text-xs text-gray-300">Business Plus</span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="p-0">
<div class="pl-12 bg-black rounded-tl-lg">
<div class="flex h-16 items-center w-full pr-6 border-r border-b border-gray-900">
<span class="text-sm font-medium text-gray-200 uppercase">All Courses</span>
</div>
</div>
</td>
<td class="p-0">
<div class="bg-black border-r border-gray-900">
<div class="flex h-16 px-20 items-center justify-center w-full border-b border-gray-900">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9531" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9531 9.63605)" fill="white"></rect><rect x="7.625" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.625 17.0431)" fill="white"></rect></svg>
</div>
</div>
</td>
<td class="p-0">
<div class="bg-black border-r border-gray-900">
<div class="flex h-16 px-20 items-center justify-center w-full border-b border-gray-900">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9531" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9531 9.63605)" fill="white"></rect><rect x="7.625" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.625 17.0431)" fill="white"></rect></svg>
</div>
</div>
</td>
<td class="p-0">
<div class="bg-black border-r border-gray-900">
<div class="flex h-16 px-20 items-center justify-center w-full border-b border-gray-900">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9531" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9531 9.63605)" fill="white"></rect><rect x="7.625" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.625 17.0431)" fill="white"></rect></svg>
</div>
</div>
</td>
<td class="p-0">
<div class="pr-12 bg-black rounded-tr-lg">
<div class="flex h-16 px-20 items-center justify-center w-full border-b border-gray-900">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9531" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9531 9.63605)" fill="white"></rect><rect x="7.625" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.625 17.0431)" fill="white"></rect></svg>
</div>
</div>
</td>
</tr>
<tr>
<td class="p-0">
<div class="pl-12 bg-black">
<div class="flex h-16 items-center w-full pr-6 border-r border-b border-gray-900">
<span class="text-sm font-medium text-gray-200 uppercase">Learning resources</span>
</div>
</div>
</td>
<td class="p-0">
<div class="bg-black border-r border-gray-900">
<div class="flex h-16 px-20 items-center justify-center w-full border-b border-gray-900">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#171717"></rect><rect x="24" y="15" width="2" height="16" rx="1" transform="rotate(90 24 15)" fill="white"></rect></svg>
</div>
</div>
</td>
<td class="p-0">
<div class="bg-black border-r border-gray-900">
<div class="flex h-16 px-20 items-center justify-center w-full border-b border-gray-900">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9531" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9531 9.63605)" fill="white"></rect><rect x="7.625" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.625 17.0431)" fill="white"></rect></svg>
</div>
</div>
</td>
<td class="p-0">
<div class="bg-black border-r border-gray-900">
<div class="flex h-16 px-20 items-center justify-center w-full border-b border-gray-900">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9531" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9531 9.63605)" fill="white"></rect><rect x="7.625" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.625 17.0431)" fill="white"></rect></svg>
</div>
</div>
</td>
<td class="p-0">
<div class="pr-12 bg-black">
<div class="flex h-16 px-20 items-center justify-center w-full border-b border-gray-900">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9531" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9531 9.63605)" fill="white"></rect><rect x="7.625" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.625 17.0431)" fill="white"></rect></svg>
</div>
</div>
</td>
</tr>
<tr>
<td class="p-0">
<div class="pl-12 bg-black rounded-bl-lg">
<div class="flex h-16 items-center w-full pr-6 border-r border-gray-900">
<span class="text-sm font-medium text-gray-200 uppercase">support</span>
</div>
</div>
</td>
<td class="p-0">
<div class="bg-black border-r border-gray-900">
<div class="flex h-16 px-20 items-center justify-center w-full">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#171717"></rect><rect x="24" y="15" width="2" height="16" rx="1" transform="rotate(90 24 15)" fill="white"></rect></svg>
</div>
</div>
</td>
<td class="p-0">
<div class="bg-black border-r border-gray-900">
<div class="flex h-16 px-20 items-center justify-center w-full">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#171717"></rect><rect x="24" y="15" width="2" height="16" rx="1" transform="rotate(90 24 15)" fill="white"></rect></svg>
</div>
</div>
</td>
<td class="p-0">
<div class="bg-black border-r border-gray-900">
<div class="flex h-16 px-20 items-center justify-center w-full">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9531" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9531 9.63605)" fill="white"></rect><rect x="7.625" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.625 17.0431)" fill="white"></rect></svg>
</div>
</div>
</td>
<td class="p-0">
<div class="pr-12 bg-black rounded-br-lg">
<div class="flex h-16 px-20 items-center justify-center w-full">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9531" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9531 9.63605)" fill="white"></rect><rect x="7.625" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.625 17.0431)" fill="white"></rect></svg>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<table class="w-full min-w-max">
<thead>
<tr>
<th class="p-0">
<div class="h-20 flex items-center pl-12 pr-6">
<span class="text-xl text-white font-semibold">Learn the basics</span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="p-0">
<div class="pl-12 bg-black rounded-tl-lg">
<div class="flex h-16 items-center w-full pr-6 border-r border-b border-gray-900">
<span class="text-sm font-medium text-gray-200 uppercase">Assessments</span>
</div>
</div>
</td>
<td class="p-0">
<div class="bg-black border-r border-gray-900">
<div class="flex h-16 px-20 items-center justify-center w-full border-b border-gray-900">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9531" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9531 9.63605)" fill="white"></rect><rect x="7.625" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.625 17.0431)" fill="white"></rect></svg>
</div>
</div>
</td>
<td class="p-0">
<div class="bg-black border-r border-gray-900">
<div class="flex h-16 px-20 items-center justify-center w-full border-b border-gray-900">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9531" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9531 9.63605)" fill="white"></rect><rect x="7.625" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.625 17.0431)" fill="white"></rect></svg>
</div>
</div>
</td>
<td class="p-0">
<div class="bg-black border-r border-gray-900">
<div class="flex h-16 px-20 items-center justify-center w-full border-b border-gray-900">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9531" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9531 9.63605)" fill="white"></rect><rect x="7.625" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.625 17.0431)" fill="white"></rect></svg>
</div>
</div>
</td>
<td class="p-0">
<div class="pr-12 bg-black rounded-tr-lg">
<div class="flex h-16 px-20 items-center justify-center w-full border-b border-gray-900">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9531" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9531 9.63605)" fill="white"></rect><rect x="7.625" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.625 17.0431)" fill="white"></rect></svg>
</div>
</div>
</td>
</tr>
<tr>
<td class="p-0">
<div class="pl-12 bg-black">
<div class="flex h-16 items-center w-full pr-6 border-r border-b border-gray-900">
<span class="text-sm font-medium text-gray-200 uppercase">Practice application</span>
</div>
</div>
</td>
<td class="p-0">
<div class="bg-black border-r border-gray-900">
<div class="flex h-16 px-20 items-center justify-center w-full border-b border-gray-900">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#171717"></rect><rect x="24" y="15" width="2" height="16" rx="1" transform="rotate(90 24 15)" fill="white"></rect></svg>
</div>
</div>
</td>
<td class="p-0">
<div class="bg-black border-r border-gray-900">
<div class="flex h-16 px-20 items-center justify-center w-full border-b border-gray-900">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9531" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9531 9.63605)" fill="white"></rect><rect x="7.625" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.625 17.0431)" fill="white"></rect></svg>
</div>
</div>
</td>
<td class="p-0">
<div class="bg-black border-r border-gray-900">
<div class="flex h-16 px-20 items-center justify-center w-full border-b border-gray-900">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9531" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9531 9.63605)" fill="white"></rect><rect x="7.625" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.625 17.0431)" fill="white"></rect></svg>
</div>
</div>
</td>
<td class="p-0">
<div class="pr-12 bg-black">
<div class="flex h-16 px-20 items-center justify-center w-full border-b border-gray-900">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9531" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9531 9.63605)" fill="white"></rect><rect x="7.625" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.625 17.0431)" fill="white"></rect></svg>
</div>
</div>
</td>
</tr>
<tr>
<td class="p-0">
<div class="pl-12 bg-black rounded-bl-lg">
<div class="flex h-16 items-center w-full pr-6 border-r border-gray-900">
<span class="text-sm font-medium text-gray-200 uppercase">support</span>
</div>
</div>
</td>
<td class="p-0">
<div class="bg-black border-r border-gray-900">
<div class="flex h-16 px-20 items-center justify-center w-full">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#171717"></rect><rect x="24" y="15" width="2" height="16" rx="1" transform="rotate(90 24 15)" fill="white"></rect></svg>
</div>
</div>
</td>
<td class="p-0">
<div class="bg-black border-r border-gray-900">
<div class="flex h-16 px-20 items-center justify-center w-full">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#171717"></rect><rect x="24" y="15" width="2" height="16" rx="1" transform="rotate(90 24 15)" fill="white"></rect></svg>
</div>
</div>
</td>
<td class="p-0">
<div class="bg-black border-r border-gray-900">
<div class="flex h-16 px-20 items-center justify-center w-full">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9531" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9531 9.63605)" fill="white"></rect><rect x="7.625" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.625 17.0431)" fill="white"></rect></svg>
</div>
</div>
</td>
<td class="p-0">
<div class="pr-12 bg-black rounded-br-lg">
<div class="flex h-16 px-20 items-center justify-center w-full">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9531" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9531 9.63605)" fill="white"></rect><rect x="7.625" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.625 17.0431)" fill="white"></rect></svg>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Free to start
Generate with AI
