---
title: Stats on the side
category: Marketing
paid: false
isActive: true
ltr: {"react":{"jsxCss":[],"jsxTail":[{"label":"App.jsx","code":"export default () => {\n\n    const stats = [\n        {\n            data: \"35K\",\n            title: \"Customers\"\n        },\n        {\n            data: \"10K+\",\n            title: \"Downloads\"\n        },\n        {\n            data: \"40+\",\n            title: \"Countries\"\n        },\n        {\n            data: \"30M+\",\n            title: \"Total revenue\"\n        },\n    ]\n\n    return (\n        <section className=\"py-14\">\n            <div className=\"max-w-screen-xl mx-auto px-4 text-gray-600 gap-x-12 justify-between md:px-8 lg:flex\">\n                <div className=\"max-w-2xl mx-auto text-center lg:text-left lg:mx-0\">\n                    <h3 className=\"text-gray-800 text-3xl font-semibold sm:text-4xl\">\n                        We do our best to make customers always happy\n                    </h3>\n                    <p className=\"mt-3 max-w-xl mx-auto lg:mx-0\">\n                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis sollicitudin quam ut tincidunt.\n                    </p>\n                </div>\n                <div className=\"mt-12 lg:mt-0\">\n                    <ul className=\"flex flex-col items-start gap-x-12 justify-center divide-y sm:divide-y-0 sm:flex-row lg:grid lg:grid-cols-2\">\n                        {\n                            stats.map((item, idx) => (\n                                <li key={idx} className=\"text-center w-full px-4 py-6 sm:w-auto lg:py-4\">\n                                    <h4 className=\"text-4xl text-indigo-600 font-semibold\">{item.data}</h4>\n                                    <p className=\"mt-3 font-medium\">{item.title}</p>\n                                </li>\n                            ))\n                        }\n                    </ul>\n                </div>\n            </div>\n        </section>\n    )\n}"}]},"svelte":{"svelteTail":[{"label":"App.svelte","code":"<script>\n    let stats = [\n        { data: \"35K\", title: \"Customers\" },\n        { data: \"10K+\", title: \"Downloads\" },\n        { data: \"40+\", title: \"Countries\" },\n        { data: \"30M+\", title: \"Total revenue\" },\n    ];\n</script>\n\n<section class=\"py-14\">\n    <div class=\"max-w-screen-xl mx-auto px-4 text-gray-600 gap-x-12 justify-between md:px-8 lg:flex\">\n        <div class=\"max-w-2xl mx-auto text-center lg:text-left lg:mx-0\">\n            <h3 class=\"text-gray-800 text-3xl font-semibold sm:text-4xl\">\n                We do our best to make customers always happy\n            </h3>\n            <p class=\"mt-3 max-w-xl mx-auto lg:mx-0\">\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis sollicitudin quam ut tincidunt.\n            </p>\n        </div>\n        <div class=\"mt-12 lg:mt-0\">\n            <ul class=\"flex flex-col items-start gap-x-12 justify-center divide-y sm:divide-y-0 sm:flex-row lg:grid lg:grid-cols-2\">\n                {#each stats as item (item.title)}\n                    <li class=\"text-center w-full px-4 py-6 sm:w-auto lg:py-4\">\n                        <h4 class=\"text-4xl text-indigo-600 font-semibold\">{item.data}</h4>\n                        <p class=\"mt-3 font-medium\">{item.title}</p>\n                    </li>\n                {/each}\n            </ul>\n        </div>\n    </div>\n</section>\n"}]},"vue":{"vueCss":[],"vueTail":[{"code":"<template>\n  <section class=\"py-14\">\n    <div class=\"max-w-screen-xl mx-auto px-4 text-gray-600 gap-x-12 justify-between md:px-8 lg:flex\">\n      <div class=\"max-w-2xl mx-auto text-center lg:text-left lg:mx-0\">\n        <h3 class=\"text-gray-800 text-3xl font-semibold sm:text-4xl\">\n          We do our best to make customers always happy\n        </h3>\n        <p class=\"mt-3 max-w-xl mx-auto lg:mx-0\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis sollicitudin quam ut tincidunt.\n        </p>\n      </div>\n      <div class=\"mt-12 lg:mt-0\">\n        <ul class=\"flex flex-col items-start gap-x-12 justify-center divide-y sm:divide-y-0 sm:flex-row lg:grid lg:grid-cols-2\">\n          <li v-for=\"(item, index) in stats\" :key=\"index\" class=\"text-center w-full px-4 py-6 sm:w-auto lg:py-4\">\n            <h4 class=\"text-4xl text-indigo-600 font-semibold\">{{ item.data }}</h4>\n            <p class=\"mt-3 font-medium\">{{ item.title }}</p>\n          </li>\n        </ul>\n      </div>\n    </div>\n  </section>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      stats: [\n        { data: '35K', title: 'Customers' },\n        { data: '10K+', title: 'Downloads' },\n        { data: '40+', title: 'Countries' },\n        { data: '30M+', title: 'Total revenue' }\n      ]\n    };\n  }\n};\n</script>\n","label":"App.vue"}]},"preview":"function App() {\n\n    const stats = [\n        {\n            data: \"35K\",\n            title: \"Customers\"\n        },\n        {\n            data: \"10K+\",\n            title: \"Downloads\"\n        },\n        {\n            data: \"40+\",\n            title: \"Countries\"\n        },\n        {\n            data: \"30M+\",\n            title: \"Total revenue\"\n        },\n    ]\n\n    return (\n        <section className=\"py-14\">\n            <div className=\"max-w-screen-xl mx-auto px-4 text-gray-600 gap-x-12 justify-between md:px-8 lg:flex\">\n                <div className=\"max-w-2xl mx-auto text-center lg:text-left lg:mx-0\">\n                    <h3 className=\"text-gray-800 text-3xl font-semibold sm:text-4xl\">\n                        We do our best to make customers always happy\n                    </h3>\n                    <p className=\"mt-3 max-w-xl mx-auto lg:mx-0\">\n                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis sollicitudin quam ut tincidunt.\n                    </p>\n                </div>\n                <div className=\"mt-12 lg:mt-0\">\n                    <ul className=\"flex flex-col items-start gap-x-12 justify-center divide-y sm:divide-y-0 sm:flex-row lg:grid lg:grid-cols-2\">\n                        {\n                            stats.map((item, idx) => (\n                                <li key={idx} className=\"text-center w-full px-4 py-6 sm:w-auto lg:py-4\">\n                                    <h4 className=\"text-4xl text-indigo-600 font-semibold\">{item.data}</h4>\n                                    <p className=\"mt-3 font-medium\">{item.title}</p>\n                                </li>\n                            ))\n                        }\n                    </ul>\n                </div>\n            </div>\n        </section>\n    )\n}","html":{"htmlTail":[{"label":"index.html","code":"<section class=\"py-14\" x-data=\"{ stats: [\n        { data: '35K', title: 'Customers' },\n        { data: '10K+', title: 'Downloads' },\n        { data: '40+', title: 'Countries' },\n        { data: '30M+', title: 'Total revenue' }\n    ] }\">\n    <div class=\"max-w-screen-xl mx-auto px-4 text-gray-600 gap-x-12 justify-between md:px-8 lg:flex\">\n        <div class=\"max-w-2xl mx-auto text-center lg:text-left lg:mx-0\">\n            <h3 class=\"text-gray-800 text-3xl font-semibold sm:text-4xl\">\n                We do our best to make customers always happy\n            </h3>\n            <p class=\"mt-3 max-w-xl mx-auto lg:mx-0\">\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis sollicitudin quam ut tincidunt.\n            </p>\n        </div>\n        <div class=\"mt-12 lg:mt-0\">\n            <ul class=\"flex flex-col items-start gap-x-12 justify-center divide-y sm:divide-y-0 sm:flex-row lg:grid lg:grid-cols-2\">\n                <template x-for=\"(item, index) in stats\" :key=\"index\">\n                    <li class=\"text-center w-full px-4 py-6 sm:w-auto lg:py-4\">\n                        <h4 class=\"text-4xl text-indigo-600 font-semibold\" x-text=\"item.data\"></h4>\n                        <p class=\"mt-3 font-medium\" x-text=\"item.title\"></p>\n                    </li>\n                </template>\n            </ul>\n        </div>\n    </div>\n</section>\n"}]}}
slug: /stats
id: 6922b4f0-1fc7-4405-bf67-37f2976dd0e8
created_at: 1671314969166
---

<FUIStatsOnTheSide />