Alternating Experiences
App Screenshot Previews
Award Showcase Grid
Bonus Content Grid
Course Card Grid
Course Offer Cards
Custom Section Benefits
Dual Product Cards
Filterable Portfolio
Offer Image Grid
Partners & Clients
Portfolio Reveal Grid
Quality Asym Images
Service Icon Grid
Specialty Icon Grid
STEM Learning Previews
Template Showcase Grid
Webinar Grid
#Course Card Grid
showcasePresents multiple courses or articles in a grid of visually appealing cards, each with key details and actions.
More Courses
<section class="px-6 lg:px-16 container mx-auto my-8 lg:my-16">
<h1 class="font-bold text-4xl">More Courses</h1>
<div class="grid lg:grid-cols-3 mt-4 lg:mt-8 gap-4">
<div
class="bg-gray-200 rounded-lg p-4 flex flex-col"
style="
background: url('https://placehold.co/400x600');
background-size: cover;
background-position: center;
"
>
<div class="text-center">
<h4 class="text-xl font-semibold mb-1">Making Your Ads Work</h4>
<p class="text-sm">3 Days</p>
</div>
<div class="flex-grow h-80"></div>
<div>
<div class="flex mb-4">
<a
href="#"
class="min-h-12 flex items-center justify-center bg-white text-blue-600 font-semibold px-8 rounded-lg flex-grow"
>View</a
>
<div class="w-2"></div>
<a
href="#"
class="h-12 flex items-center justify-center text-white bg-blue-600 font-semibold px-8 rounded-lg"
>Buy</a
>
</div>
<p class="pt-4 border-t border-neutral-200 text-center text-xs">
Bootcamp
</p>
</div>
</div>
<div
class="bg-gray-200 rounded-lg p-4 flex flex-col"
style="
background: url('https://placehold.co/400x600');
background-size: cover;
background-position: center;
"
>
<div class="text-center">
<h4 class="text-xl font-semibold mb-1">Making Your Ads Work</h4>
<p class="text-sm">3 Days</p>
</div>
<div class="flex-grow h-80"></div>
<div>
<div class="flex mb-4">
<a
href="#"
class="min-h-12 flex items-center justify-center bg-white text-blue-600 font-semibold px-8 rounded-lg flex-grow"
>View</a
>
<div class="w-2"></div>
<a
href="#"
class="h-12 flex items-center justify-center text-white bg-blue-600 font-semibold px-8 rounded-lg"
>Buy</a
>
</div>
<p class="pt-4 border-t border-neutral-200 text-center text-xs">
Bootcamp
</p>
</div>
</div>
<div
class="bg-gray-200 rounded-lg p-4 flex flex-col"
style="
background: url('https://placehold.co/400x600');
background-size: cover;
background-position: center;
"
>
<div class="text-center">
<h4 class="text-xl font-semibold mb-1">Making Your Ads Work</h4>
<p class="text-sm">3 Days</p>
</div>
<div class="flex-grow h-80"></div>
<div>
<div class="flex mb-4">
<a
href="#"
class="min-h-12 flex items-center justify-center bg-white text-blue-600 font-semibold px-8 rounded-lg flex-grow"
>View</a
>
<div class="w-2"></div>
<a
href="#"
class="h-12 flex items-center justify-center text-white bg-blue-600 font-semibold px-8 rounded-lg"
>Buy</a
>
</div>
<p class="pt-4 border-t border-neutral-200 text-center text-xs">
Bootcamp
</p>
</div>
</div>
</div>
</section>More Courses
<section layout="container" space="p-x:medium-3x tw-lg:p-x:big-3x m-x:auto m-y:large tw-lg:m-y:big-3x">
<h1 visual="font:tw-bold text-size:giant">More Courses</h1>
<div layout="grid tw-lg:grid-cols:3" space="m-t:medium tw-lg:m-t:large g:medium">
<div
layout="flex col" space="p:medium" visual="bg:gray-200 rounded:medium"
style="
background: url('https://placehold.co/400x600');
background-size: cover;
background-position: center;
"
>
<div visual="text:center">
<h4 space="m-b:tiny" visual="text-size:big font:tw-semibold">Making Your Ads Work</h4>
<p visual="text-size:small">3 Days</p>
</div>
<div layout="grow" space="h:vast-9x"></div>
<div>
<div layout="flex" space="m-b:medium">
<a
href="#"
layout="flex items:center justify:center grow" space="min-h:big p-x:large" visual="bg:white text:blue-600 font:tw-semibold rounded:medium"
>View</a
>
<div space="w:small"></div>
<a
href="#"
layout="flex items:center justify:center" space="h:big p-x:large" visual="text:white bg:blue-600 font:tw-semibold rounded:medium"
>Buy</a
>
</div>
<p space="p-t:medium" visual="border:neutral-200 text:center text-size:mini" class="border-t">
Bootcamp
</p>
</div>
</div>
<div
layout="flex col" space="p:medium" visual="bg:gray-200 rounded:medium"
style="
background: url('https://placehold.co/400x600');
background-size: cover;
background-position: center;
"
>
<div visual="text:center">
<h4 space="m-b:tiny" visual="text-size:big font:tw-semibold">Making Your Ads Work</h4>
<p visual="text-size:small">3 Days</p>
</div>
<div layout="grow" space="h:vast-9x"></div>
<div>
<div layout="flex" space="m-b:medium">
<a
href="#"
layout="flex items:center justify:center grow" space="min-h:big p-x:large" visual="bg:white text:blue-600 font:tw-semibold rounded:medium"
>View</a
>
<div space="w:small"></div>
<a
href="#"
layout="flex items:center justify:center" space="h:big p-x:large" visual="text:white bg:blue-600 font:tw-semibold rounded:medium"
>Buy</a
>
</div>
<p space="p-t:medium" visual="border:neutral-200 text:center text-size:mini" class="border-t">
Bootcamp
</p>
</div>
</div>
<div
layout="flex col" space="p:medium" visual="bg:gray-200 rounded:medium"
style="
background: url('https://placehold.co/400x600');
background-size: cover;
background-position: center;
"
>
<div visual="text:center">
<h4 space="m-b:tiny" visual="text-size:big font:tw-semibold">Making Your Ads Work</h4>
<p visual="text-size:small">3 Days</p>
</div>
<div layout="grow" space="h:vast-9x"></div>
<div>
<div layout="flex" space="m-b:medium">
<a
href="#"
layout="flex items:center justify:center grow" space="min-h:big p-x:large" visual="bg:white text:blue-600 font:tw-semibold rounded:medium"
>View</a
>
<div space="w:small"></div>
<a
href="#"
layout="flex items:center justify:center" space="h:big p-x:large" visual="text:white bg:blue-600 font:tw-semibold rounded:medium"
>Buy</a
>
</div>
<p space="p-t:medium" visual="border:neutral-200 text:center text-size:mini" class="border-t">
Bootcamp
</p>
</div>
</div>
</div>
</section>