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
#Progress Report List
statisticReports key performance indicators or progress in a clean list format, detailing each metric and its value.
Performance Overview
Tracking Our Progress Annually
Detailed insights into our key performance indicators and growth over the past year.
User Growth Rate
Percentage increase in active users compared to the previous quarter.
+25%
Customer Retention
Successfully retained a high percentage of our existing customer base this year.
92%
Support Ticket Resolution Time
Average time taken to resolve customer support tickets and inquiries.
<4 Hours
New Features Deployed
Number of significant features and updates released in the last 6 months.
18
<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
<div class="text-left mb-8 lg:mb-12 max-w-3xl">
<div class="inline-block mb-2 lg:mb-4 rounded-md border-2 border-blue-600 px-2 py-0.5 text-sm font-bold text-blue-600">
Performance Overview
</div>
<h2 class="text-3xl lg:text-5xl font-bold mb-3 lg:mb-4">
Tracking Our Progress Annually
</h2>
<p class="text-lg lg:text-xl text-neutral-700">
Detailed insights into our key performance indicators and growth over the past year.
</p>
</div>
<div class="space-y-4 lg:space-y-6">
<!-- Stat Row 1 -->
<div class="grid lg:grid-cols-3 gap-4 items-center bg-white p-4 lg:p-6 rounded-lg border border-neutral-200 hover:shadow-lg transition-shadow duration-300">
<div class="lg:col-span-2">
<h3 class="text-xl lg:text-2xl font-semibold text-neutral-800">User Growth Rate</h3>
<p class="text-neutral-600 mt-1">Percentage increase in active users compared to the previous quarter.</p>
</div>
<div class="text-left lg:text-right">
<p class="text-3xl lg:text-4xl font-bold text-blue-600">+25%</p>
</div>
</div>
<!-- Stat Row 2 -->
<div class="grid lg:grid-cols-3 gap-4 items-center bg-neutral-50 p-4 lg:p-6 rounded-lg border border-neutral-200 hover:shadow-lg transition-shadow duration-300">
<div class="lg:col-span-2">
<h3 class="text-xl lg:text-2xl font-semibold text-neutral-800">Customer Retention</h3>
<p class="text-neutral-600 mt-1">Successfully retained a high percentage of our existing customer base this year.</p>
</div>
<div class="text-left lg:text-right">
<p class="text-3xl lg:text-4xl font-bold text-blue-600">92%</p>
</div>
</div>
<!-- Stat Row 3 -->
<div class="grid lg:grid-cols-3 gap-4 items-center bg-white p-4 lg:p-6 rounded-lg border border-neutral-200 hover:shadow-lg transition-shadow duration-300">
<div class="lg:col-span-2">
<h3 class="text-xl lg:text-2xl font-semibold text-neutral-800">Support Ticket Resolution Time</h3>
<p class="text-neutral-600 mt-1">Average time taken to resolve customer support tickets and inquiries.</p>
</div>
<div class="text-left lg:text-right">
<p class="text-3xl lg:text-4xl font-bold text-blue-600"><4 Hours</p>
</div>
</div>
<!-- Stat Row 4 -->
<div class="grid lg:grid-cols-3 gap-4 items-center bg-neutral-50 p-4 lg:p-6 rounded-lg border border-neutral-200 hover:shadow-lg transition-shadow duration-300">
<div class="lg:col-span-2">
<h3 class="text-xl lg:text-2xl font-semibold text-neutral-800">New Features Deployed</h3>
<p class="text-neutral-600 mt-1">Number of significant features and updates released in the last 6 months.</p>
</div>
<div class="text-left lg:text-right">
<p class="text-3xl lg:text-4xl font-bold text-blue-600">18</p>
</div>
</div>
</div>
</section>
Performance Overview
Tracking Our Progress Annually
Detailed insights into our key performance indicators and growth over the past year.
User Growth Rate
Percentage increase in active users compared to the previous quarter.
+25%
Customer Retention
Successfully retained a high percentage of our existing customer base this year.
92%
Support Ticket Resolution Time
Average time taken to resolve customer support tickets and inquiries.
<4 Hours
New Features Deployed
Number of significant features and updates released in the last 6 months.
18
<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">
<div space="m-b:large tw-lg:m-b:big max-w:[3xl]" visual="text:left">
<div layout="inline" space="m-b:small tw-lg:m-b:medium p-x:small p-y:regular" visual="rounded:small border-w:regular border:blue-600 text-size:small font:tw-bold text:blue-600">
Performance Overview
</div>
<h2 space="m-b:small-3x tw-lg:m-b:medium" visual="text-size:grand tw-lg:text-size:mount font:tw-bold">
Tracking Our Progress Annually
</h2>
<p visual="text-size:large tw-lg:text-size:big text:neutral-700">
Detailed insights into our key performance indicators and growth over the past year.
</p>
</div>
<div class="space-y-4 lg:space-y-6">
<!-- Stat Row 1 -->
<div layout="grid tw-lg:grid-cols:3 items:center" space="g:medium p:medium tw-lg:p:medium-3x" visual="bg:white rounded:medium border-w:thin border:neutral-200 hover:shadow:big transition:shadow duration:slow">
<div layout="tw-lg:col-span:2">
<h3 visual="text-size:big tw-lg:text-size:huge font:tw-semibold text:neutral-800">User Growth Rate</h3>
<p space="m-t:tiny" visual="text:neutral-600">Percentage increase in active users compared to the previous quarter.</p>
</div>
<div visual="text:left tw-lg:text:right">
<p visual="text-size:grand tw-lg:text-size:giant font:tw-bold text:blue-600">+25%</p>
</div>
</div>
<!-- Stat Row 2 -->
<div layout="grid tw-lg:grid-cols:3 items:center" space="g:medium p:medium tw-lg:p:medium-3x" visual="bg:neutral-50 rounded:medium border-w:thin border:neutral-200 hover:shadow:big transition:shadow duration:slow">
<div layout="tw-lg:col-span:2">
<h3 visual="text-size:big tw-lg:text-size:huge font:tw-semibold text:neutral-800">Customer Retention</h3>
<p space="m-t:tiny" visual="text:neutral-600">Successfully retained a high percentage of our existing customer base this year.</p>
</div>
<div visual="text:left tw-lg:text:right">
<p visual="text-size:grand tw-lg:text-size:giant font:tw-bold text:blue-600">92%</p>
</div>
</div>
<!-- Stat Row 3 -->
<div layout="grid tw-lg:grid-cols:3 items:center" space="g:medium p:medium tw-lg:p:medium-3x" visual="bg:white rounded:medium border-w:thin border:neutral-200 hover:shadow:big transition:shadow duration:slow">
<div layout="tw-lg:col-span:2">
<h3 visual="text-size:big tw-lg:text-size:huge font:tw-semibold text:neutral-800">Support Ticket Resolution Time</h3>
<p space="m-t:tiny" visual="text:neutral-600">Average time taken to resolve customer support tickets and inquiries.</p>
</div>
<div visual="text:left tw-lg:text:right">
<p visual="text-size:grand tw-lg:text-size:giant font:tw-bold text:blue-600"><4 Hours</p>
</div>
</div>
<!-- Stat Row 4 -->
<div layout="grid tw-lg:grid-cols:3 items:center" space="g:medium p:medium tw-lg:p:medium-3x" visual="bg:neutral-50 rounded:medium border-w:thin border:neutral-200 hover:shadow:big transition:shadow duration:slow">
<div layout="tw-lg:col-span:2">
<h3 visual="text-size:big tw-lg:text-size:huge font:tw-semibold text:neutral-800">New Features Deployed</h3>
<p space="m-t:tiny" visual="text:neutral-600">Number of significant features and updates released in the last 6 months.</p>
</div>
<div visual="text:left tw-lg:text:right">
<p visual="text-size:grand tw-lg:text-size:giant font:tw-bold text:blue-600">18</p>
</div>
</div>
</div>
</section>