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
#STEM Learning Previews
showcasePresents STEM learning topics with engaging visuals and descriptions, featuring interactive image previews.
📖 Learning STEM Topics
Science
Eclipse
An eclipse takes place when one heavenly body such as a moon or planet moves into the shadow of another heavenly body.
Technology
Augmented Reality
Thanks to augmented reality technology, digital objects can exist outside of the digital world and come into our world.
Engineering
Combustion Engines
Internal combustion engines (ICE) are the most common form of heat engines, as they are used in vehicles, boats, ships, airplanes, and trains.
Mathematics
Dimensions
Dimensions are used to describe the size and shape of an object. For example: length, width, height, etc.
<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
<h1 class="mb-8 text-center text-3xl font-bold lg:mx-24 lg:mb-16 lg:text-6xl">📖 Learning STEM Topics</h1>
<div class="flex flex-col gap-8 lg:gap-16">
<div class="flex flex-col lg:mx-24">
<div class="group grid gap-8 lg:grid-cols-2 lg:gap-16">
<div class="order-2 flex flex-col justify-center gap-4 lg:order-1 lg:gap-8">
<div class="max-w-max rounded-md bg-blue-600 px-2 font-bold text-white">Science</div>
<p class="text-2xl font-bold lg:text-4xl">Eclipse</p>
<p class="text-xl lg:text-2xl">An eclipse takes place when one heavenly body such as a moon or planet moves into the shadow of another heavenly body.<br /></p>
</div>
<div class="order-1 flex flex-col items-center lg:order-2">
<img src="https://placehold.co/400x400/2563EB/FFFFFF" class="w-full max-w-md object-contain duration-500 ease-in-out group-hover:scale-150" />
<img src="https://placehold.co/400x160" class="w-full max-w-sm object-contain" />
</div>
</div>
</div>
<div class="flex flex-col lg:mx-24">
<div class="group grid gap-8 lg:grid-cols-2 lg:gap-16">
<div class="flex flex-col items-center">
<img src="https://placehold.co/400x400/2563EB/FFFFFF" class="w-full max-w-md object-contain duration-500 ease-in-out group-hover:scale-150" />
<img src="https://placehold.co/400x160" class="w-full max-w-sm object-contain" />
</div>
<div class="flex flex-col justify-center gap-4 lg:gap-8">
<div class="max-w-max rounded-md bg-blue-600 px-2 font-bold text-white">Technology</div>
<p class="text-2xl font-bold lg:text-4xl">Augmented Reality<br /></p>
<p class="text-xl lg:text-2xl">Thanks to augmented reality technology, digital objects can exist outside of the digital world and come into our world.<br /></p>
</div>
</div>
</div>
<div class="flex flex-col lg:mx-24">
<div class="group grid gap-8 lg:grid-cols-2 lg:gap-16">
<div class="order-2 flex flex-col justify-center gap-4 lg:order-1 lg:gap-8">
<div class="max-w-max rounded-md bg-blue-600 px-2 font-bold text-white">Engineering</div>
<p class="text-2xl font-bold lg:text-4xl">Combustion Engines<br /></p>
<p class="text-xl lg:text-2xl">Internal combustion engines (ICE) are the most common form of heat engines, as they are used in vehicles, boats, ships, airplanes, and trains.<br /></p>
</div>
<div class="order-1 flex flex-col items-center lg:order-2">
<img src="https://placehold.co/400x400/2563EB/FFFFFF" class="w-full max-w-md object-contain duration-500 ease-in-out group-hover:scale-150" />
<img src="https://placehold.co/400x160" class="w-full max-w-sm object-contain" />
</div>
</div>
</div>
<div class="flex flex-col lg:mx-24">
<div class="group grid gap-8 lg:grid-cols-2 lg:gap-16">
<div class="flex flex-col items-center">
<img src="https://placehold.co/400x400/2563EB/FFFFFF" class="w-full max-w-md object-contain duration-500 ease-in-out group-hover:scale-150" />
<img src="https://placehold.co/400x160" class="w-full max-w-sm object-contain" />
</div>
<div class="flex flex-col justify-center gap-4 lg:gap-8">
<div class="max-w-max rounded-md bg-blue-600 px-2 font-bold text-white">Mathematics</div>
<p class="text-2xl font-bold lg:text-4xl">Dimensions<br /></p>
<p class="text-xl lg:text-2xl">Dimensions are used to describe the size and shape of an object. For example: length, width, height, etc.<br /></p>
</div>
</div>
</div>
</div>
</section>📖 Learning STEM Topics
Science
Eclipse
An eclipse takes place when one heavenly body such as a moon or planet moves into the shadow of another heavenly body.
Technology
Augmented Reality
Thanks to augmented reality technology, digital objects can exist outside of the digital world and come into our world.
Engineering
Combustion Engines
Internal combustion engines (ICE) are the most common form of heat engines, as they are used in vehicles, boats, ships, airplanes, and trains.
Mathematics
Dimensions
Dimensions are used to describe the size and shape of an object. For example: length, width, height, etc.
<section layout="container" space="m-x:auto m-y:large p-x:medium-3x tw-lg:m-y:big-3x tw-lg:p-x:big-3x">
<h1 space="m-b:large tw-lg:m-x:giant tw-lg:m-b:big-3x" visual="text:center text-size:grand font:tw-bold tw-lg:text-size:mega">📖 Learning STEM Topics</h1>
<div layout="flex col" space="g:large tw-lg:g:big-3x">
<div layout="flex col" space="tw-lg:m-x:giant">
<div layout="grid tw-lg:grid-cols:2" space="g:large tw-lg:g:big-3x" class="group">
<div layout="order:2 flex col justify:center tw-lg:order:1" space="g:medium tw-lg:g:large">
<div space="max-w:[max-content] p-x:small" visual="rounded:small bg:blue-600 font:tw-bold text:white">Science</div>
<p visual="text-size:huge font:tw-bold tw-lg:text-size:giant">Eclipse</p>
<p visual="text-size:big tw-lg:text-size:huge">An eclipse takes place when one heavenly body such as a moon or planet moves into the shadow of another heavenly body.<br /></p>
</div>
<div layout="order:1 flex col items:center tw-lg:order:2">
<img src="https://placehold.co/400x400/2563EB/FFFFFF" layout="object:contain" space="w:[100%] max-w:[md]" visual="duration:slower ease:in-out" class="group-hover:scale-150" />
<img src="https://placehold.co/400x160" layout="object:contain" space="w:[100%] max-w:[sm]" />
</div>
</div>
</div>
<div layout="flex col" space="tw-lg:m-x:giant">
<div layout="grid tw-lg:grid-cols:2" space="g:large tw-lg:g:big-3x" class="group">
<div layout="flex col items:center">
<img src="https://placehold.co/400x400/2563EB/FFFFFF" layout="object:contain" space="w:[100%] max-w:[md]" visual="duration:slower ease:in-out" class="group-hover:scale-150" />
<img src="https://placehold.co/400x160" layout="object:contain" space="w:[100%] max-w:[sm]" />
</div>
<div layout="flex col justify:center" space="g:medium tw-lg:g:large">
<div space="max-w:[max-content] p-x:small" visual="rounded:small bg:blue-600 font:tw-bold text:white">Technology</div>
<p visual="text-size:huge font:tw-bold tw-lg:text-size:giant">Augmented Reality<br /></p>
<p visual="text-size:big tw-lg:text-size:huge">Thanks to augmented reality technology, digital objects can exist outside of the digital world and come into our world.<br /></p>
</div>
</div>
</div>
<div layout="flex col" space="tw-lg:m-x:giant">
<div layout="grid tw-lg:grid-cols:2" space="g:large tw-lg:g:big-3x" class="group">
<div layout="order:2 flex col justify:center tw-lg:order:1" space="g:medium tw-lg:g:large">
<div space="max-w:[max-content] p-x:small" visual="rounded:small bg:blue-600 font:tw-bold text:white">Engineering</div>
<p visual="text-size:huge font:tw-bold tw-lg:text-size:giant">Combustion Engines<br /></p>
<p visual="text-size:big tw-lg:text-size:huge">Internal combustion engines (ICE) are the most common form of heat engines, as they are used in vehicles, boats, ships, airplanes, and trains.<br /></p>
</div>
<div layout="order:1 flex col items:center tw-lg:order:2">
<img src="https://placehold.co/400x400/2563EB/FFFFFF" layout="object:contain" space="w:[100%] max-w:[md]" visual="duration:slower ease:in-out" class="group-hover:scale-150" />
<img src="https://placehold.co/400x160" layout="object:contain" space="w:[100%] max-w:[sm]" />
</div>
</div>
</div>
<div layout="flex col" space="tw-lg:m-x:giant">
<div layout="grid tw-lg:grid-cols:2" space="g:large tw-lg:g:big-3x" class="group">
<div layout="flex col items:center">
<img src="https://placehold.co/400x400/2563EB/FFFFFF" layout="object:contain" space="w:[100%] max-w:[md]" visual="duration:slower ease:in-out" class="group-hover:scale-150" />
<img src="https://placehold.co/400x160" layout="object:contain" space="w:[100%] max-w:[sm]" />
</div>
<div layout="flex col justify:center" space="g:medium tw-lg:g:large">
<div space="max-w:[max-content] p-x:small" visual="rounded:small bg:blue-600 font:tw-bold text:white">Mathematics</div>
<p visual="text-size:huge font:tw-bold tw-lg:text-size:giant">Dimensions<br /></p>
<p visual="text-size:big tw-lg:text-size:huge">Dimensions are used to describe the size and shape of an object. For example: length, width, height, etc.<br /></p>
</div>
</div>
</div>
</div>
</section>