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
#App Features Centered
featureShowcases key app features with descriptive text and icons, elegantly arranged around a central mobile mockup.
World Class
Practical Features
Just more reasons for you start use it...
View Workflow
Learn to figuring it out by staring at the automatically generated workflow
Modern Design
Simple and easy to use, even my younger sibling can nailed it
Preset Parameters
Make life easier, just pick from numbers of preset value of conductivity
Shuffle Equation
Alter the equation to find the solution you need most
<section id="ioqulp" class="bg-blue-500 text-white">
<div id="i3vb5c" class="container mx-auto px-6 py-24 lg:px-16">
<div id="igco75" class="mb-8 grid grid-cols-1 lg:mx-24 lg:mb-16 lg:grid-cols-2">
<div id="idha7q" class="lg:col-span-2">
<div id="inim5x-2" class="mb-2 max-w-max rounded-md bg-white px-2 font-bold text-blue-500 lg:mb-4">World Class</div>
</div>
<div id="ig0kv8">
<h1 id="i38ymj" class="mb-2 text-2xl font-bold capitalize lg:mb-0 lg:text-6xl">Practical Features<br /></h1>
</div>
<div id="ig68er" class="flex items-center">
<p id="ingt2r" class="w-full text-left text-base text-black lg:text-right lg:text-2xl">Just more reasons for you start use it...<br /></p>
</div>
</div>
<div id="irsp1j" class="grid lg:grid-cols-3">
<div id="ifjw28" class="order-2 grid h-full gap-6 pb-6 lg:order-1 lg:grid-rows-2 lg:pb-0 lg:pt-32 lg:text-right">
<div id="iptdcu" class="flex">
<div id="in6p38" class="bg-prime flex aspect-square h-16 w-16 items-center justify-center rounded-full bg-white text-3xl text-blue-500 shadow lg:order-2">
<i id="i6gw6s" class="far fa-file-image"></i>
</div>
<div id="ityz4p" class="px-6 lg:order-1">
<h1 id="imlp9h" class="text-2xl font-bold"></h1>
<h1 id="in84sc-2" draggable="false" class="gjs-selected text-2xl font-bold">View Workflow</h1>
<p id="izinek" class="mt-2">Learn to figuring it out by staring at the automatically generated workflow<br /></p>
</div>
</div>
<div id="ikr03e" class="flex">
<div id="i3576u" class="bg-prime flex aspect-square h-16 w-16 items-center justify-center rounded-full bg-white text-3xl text-blue-500 shadow lg:order-2">
<i class="fas fa-desktop"></i>
</div>
<div id="irqwpl" class="px-6 lg:order-1">
<h1 id="i3ig09" class="text-2xl font-bold">Modern Design<br /></h1>
<p id="i1kgg3" class="mt-2">Simple and easy to use, even my younger sibling can nailed it<br /></p>
</div>
</div>
</div>
<div class="order-1 mb-12 px-12 lg:order-2 lg:mb-0">
<div class="relative w-full overflow-hidden"><img id="icjs4g" src="https://placehold.co/480x820" class="w-full" /></div>
</div>
<div id="ibhbu3" class="order-3 grid h-full gap-6 lg:order-3 lg:grid-rows-2 lg:pt-32">
<div class="flex">
<div id="idnyvy" class="bg-prime flex aspect-square h-16 w-16 items-center justify-center rounded-full bg-white text-3xl text-blue-500 shadow">
<i id="i95e3q" class="fas fa-cube"></i>
</div>
<div id="iohomb" class="px-6">
<h1 id="i1f4g8" class="text-2xl font-bold">Preset Parameters<br /></h1>
<p id="iz2gzg" class="mt-2">Make life easier, just pick from numbers of preset value of conductivity<br /></p>
</div>
</div>
<div id="iw51tu" class="flex">
<div id="ie8kce" class="bg-prime flex aspect-square h-16 w-16 items-center justify-center rounded-full bg-white text-3xl text-blue-500 shadow">
<i id="i7o55t" class="fas fa-random"></i>
</div>
<div id="i0mo7i" class="px-6">
<h1 id="i9slfb" class="text-2xl font-bold">Shuffle Equation<br /></h1>
<p id="iesxqm" class="mt-2">Alter the equation to find the solution you need most<br /></p>
</div>
</div>
</div>
</div>
</div>
</section>
World Class
Practical Features
Just more reasons for you start use it...
View Workflow
Learn to figuring it out by staring at the automatically generated workflow
Modern Design
Simple and easy to use, even my younger sibling can nailed it
Preset Parameters
Make life easier, just pick from numbers of preset value of conductivity
Shuffle Equation
Alter the equation to find the solution you need most
<section id="ioqulp" visual="bg:blue-500 text:white">
<div id="i3vb5c" layout="container" space="m-x:auto p-x:medium-3x p-y:giant tw-lg:p-x:big-3x">
<div id="igco75" layout="grid grid-cols:1 tw-lg:grid-cols:2" space="m-b:large tw-lg:m-x:giant tw-lg:m-b:big-3x">
<div id="idha7q" layout="tw-lg:col-span:2">
<div id="inim5x-2" space="m-b:small max-w:[max-content] p-x:small tw-lg:m-b:medium" visual="rounded:small bg:white font:tw-bold text:blue-500">World Class</div>
</div>
<div id="ig0kv8">
<h1 id="i38ymj" space="m-b:small tw-lg:m-b:none" visual="text-size:huge font:tw-bold capitalize tw-lg:text-size:mega">Practical Features<br /></h1>
</div>
<div id="ig68er" layout="flex items:center">
<p id="ingt2r" space="w:[100%]" visual="text:left text-size:base text:black tw-lg:text:right tw-lg:text-size:huge">Just more reasons for you start use it...<br /></p>
</div>
</div>
<div id="irsp1j" layout="grid tw-lg:grid-cols:3">
<div id="ifjw28" layout="order:2 grid tw-lg:order:1 tw-lg:grid-rows:2" space="h:[100%] g:medium-3x p-b:medium-3x tw-lg:p-b:none tw-lg:p-t:giant-3x" visual="tw-lg:text:right">
<div id="iptdcu" layout="flex">
<div id="in6p38" layout="flex items:center justify:center tw-lg:order:2" space="h:big-3x w:big-3x" visual="rounded:round bg:white text-size:grand text:blue-500 shadow:small" class="bg-prime aspect-square">
<i id="i6gw6s" class="far fa-file-image"></i>
</div>
<div id="ityz4p" layout="tw-lg:order:1" space="p-x:medium-3x">
<h1 id="imlp9h" visual="text-size:huge font:tw-bold"></h1>
<h1 id="in84sc-2" draggable="false" visual="text-size:huge font:tw-bold" class="gjs-selected">View Workflow</h1>
<p id="izinek" space="m-t:small">Learn to figuring it out by staring at the automatically generated workflow<br /></p>
</div>
</div>
<div id="ikr03e" layout="flex">
<div id="i3576u" layout="flex items:center justify:center tw-lg:order:2" space="h:big-3x w:big-3x" visual="rounded:round bg:white text-size:grand text:blue-500 shadow:small" class="bg-prime aspect-square">
<i class="fas fa-desktop"></i>
</div>
<div id="irqwpl" layout="tw-lg:order:1" space="p-x:medium-3x">
<h1 id="i3ig09" visual="text-size:huge font:tw-bold">Modern Design<br /></h1>
<p id="i1kgg3" space="m-t:small">Simple and easy to use, even my younger sibling can nailed it<br /></p>
</div>
</div>
</div>
<div layout="order:1 tw-lg:order:2" space="m-b:big p-x:big tw-lg:m-b:none">
<div layout="relative overflow:hidden" space="w:[100%]"><img id="icjs4g" src="https://placehold.co/480x820" space="w:[100%]" /></div>
</div>
<div id="ibhbu3" layout="order:3 grid tw-lg:order:3 tw-lg:grid-rows:2" space="h:[100%] g:medium-3x tw-lg:p-t:giant-3x">
<div layout="flex">
<div id="idnyvy" layout="flex items:center justify:center" space="h:big-3x w:big-3x" visual="rounded:round bg:white text-size:grand text:blue-500 shadow:small" class="bg-prime aspect-square">
<i id="i95e3q" class="fas fa-cube"></i>
</div>
<div id="iohomb" space="p-x:medium-3x">
<h1 id="i1f4g8" visual="text-size:huge font:tw-bold">Preset Parameters<br /></h1>
<p id="iz2gzg" space="m-t:small">Make life easier, just pick from numbers of preset value of conductivity<br /></p>
</div>
</div>
<div id="iw51tu" layout="flex">
<div id="ie8kce" layout="flex items:center justify:center" space="h:big-3x w:big-3x" visual="rounded:round bg:white text-size:grand text:blue-500 shadow:small" class="bg-prime aspect-square">
<i id="i7o55t" class="fas fa-random"></i>
</div>
<div id="i0mo7i" space="p-x:medium-3x">
<h1 id="i9slfb" visual="text-size:huge font:tw-bold">Shuffle Equation<br /></h1>
<p id="iesxqm" space="m-t:small">Alter the equation to find the solution you need most<br /></p>
</div>
</div>
</div>
</div>
</div>
</section>