---
title: Basic Stats
category: Marketing
paid: false
isActive: true
ltr: {"react":{"jsxCss":[],"jsxTail":[{"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 md:px-8\">\n                <ul className=\"flex flex-col items-center justify-center gap-x-12 gap-y-10 sm:flex-row sm:flex-wrap md:gap-x-24\">\n                    {\n                        stats.map((item, idx) => (\n                            <li key={idx} className=\"text-center\">\n                                <h4 className=\"text-4xl text-gray-800 font-semibold\">{item.data}</h4>\n                                <p className=\"mt-3 text-gray-600 font-medium\">{item.title}</p>\n                            </li>\n                        ))\n                    }\n                </ul>\n            </div>\n        </section>\n    )\n}","label":"App.jsx"}]},"svelte":{"svelteTail":[{"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 md:px-8\">\n    <ul class=\"flex flex-col items-center justify-center gap-x-12 gap-y-10 sm:flex-row sm:flex-wrap md:gap-x-24\">\n      {#each stats as item (item.title)}\n        <li class=\"text-center\">\n          <h4 class=\"text-4xl text-gray-800 font-semibold\">{item.data}</h4>\n          <p class=\"mt-3 text-gray-600 font-medium\">{item.title}</p>\n        </li>\n      {/each}\n    </ul>\n  </div>\n</section>\n","label":"App.svelte"}]},"vue":{"vueCss":[],"vueTail":[{"label":"App.vue","code":"<template>\n  <section class=\"py-14\">\n    <div class=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n      <ul class=\"flex flex-col items-center justify-center gap-x-12 gap-y-10 sm:flex-row sm:flex-wrap md:gap-x-24\">\n        <li v-for=\"(item, idx) in stats\" :key=\"idx\" class=\"text-center\">\n          <h4 class=\"text-4xl text-gray-800 font-semibold\">{{ item.data }}</h4>\n          <p class=\"mt-3 text-gray-600 font-medium\">{{ item.title }}</p>\n        </li>\n      </ul>\n    </div>\n  </section>\n</template>\n\n<script>\nexport default {\n  name: 'StatsSection',\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>"}]},"html":{"htmlTail":[{"code":"<section class=\"py-14\" x-data=\"{ stats: [{ data: '35K', title: 'Customers' }, { data: '10K+', title: 'Downloads' }, { data: '40+', title: 'Countries' }, { data: '30M+', title: 'Total revenue' }] }\">\n    <div class=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n        <ul class=\"flex flex-col items-center justify-center gap-x-12 gap-y-10 sm:flex-row sm:flex-wrap md:gap-x-24\">\n            <template x-for=\"(item, idx) in stats\" :key=\"idx\">\n                <li class=\"text-center\">\n                    <h4 class=\"text-4xl text-gray-800 font-semibold\" x-text=\"item.data\"></h4>\n                    <p class=\"mt-3 text-gray-600 font-medium\" x-text=\"item.title\"></p>\n                </li>\n            </template>\n        </ul>\n    </div>\n</section>\n","label":"index.html"}]},"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 md:px-8\">\n                <ul className=\"flex flex-col items-center justify-center gap-x-12 gap-y-10 sm:flex-row sm:flex-wrap md:gap-x-24\">\n                    {\n                        stats.map((item, idx) => (\n                            <li key={idx} className=\"text-center\">\n                                <h4 className=\"text-4xl text-gray-800 font-semibold\">{item.data}</h4>\n                                <p className=\"mt-3 text-gray-600 font-medium\">{item.title}</p>\n                            </li>\n                        ))\n                    }\n                </ul>\n            </div>\n        </section>\n    )\n}"}
slug: /stats
id: c7c2c81b-7dfb-460d-8b66-aa9fbac873a9
created_at: 1671314660130
---

<FUIBasicStats />