---
title: Dark stats with in cards
category: Marketing
paid: false
isActive: true
ltr: {"html":{"htmlTail":[{"code":"<section class=\"py-28 bg-gray-900\" x-data=\"{ stats: [ { data: '35K', title: 'Customers' }, { data: '40+', title: 'Countries' }, { data: '30M+', title: 'Total revenue' } ] }\">\n    <div class=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n        <div class=\"max-w-2xl mx-auto text-center\">\n            <h3 class=\"text-white text-3xl font-semibold sm:text-4xl\">\n                Our customers are always happy\n            </h3>\n            <p class=\"mt-3 text-gray-300\">\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis sollicitudin quam ut tincidunt.\n            </p>\n        </div>\n        <div class=\"mt-12\">\n            <ul class=\"flex flex-col gap-4 items-center justify-center sm:flex-row\">\n                <template x-for=\"(item, idx) in stats\" :key=\"idx\">\n                    <li class=\"w-full text-center bg-gray-800 px-12 py-4 rounded-lg sm:w-auto\">\n                        <h4 class=\"text-4xl text-white font-semibold\" x-text=\"item.data\"></h4>\n                        <p class=\"mt-3 text-gray-400 font-medium\" x-text=\"item.title\"></p>\n                    </li>\n                </template>\n            </ul>\n        </div>\n    </div>\n</section>\n","label":"index.html"}]},"svelte":{"svelteTail":[{"code":"<script>\n  let stats = [\n    {\n      data: \"35K\",\n      title: \"Customers\"\n    },\n    {\n      data: \"40+\",\n      title: \"Countries\"\n    },\n    {\n      data: \"30M+\",\n      title: \"Total revenue\"\n    },\n  ];\n</script>\n\n<section class=\"py-28 bg-gray-900\">\n  <div class=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n    <div class=\"max-w-2xl mx-auto text-center\">\n      <h3 class=\"text-white text-3xl font-semibold sm:text-4xl\">\n        Our customers are always happy\n      </h3>\n      <p class=\"mt-3 text-gray-300\">\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis sollicitudin quam ut tincidunt.\n      </p>\n    </div>\n    <div class=\"mt-12\">\n      <ul class=\"flex flex-col gap-4 items-center justify-center sm:flex-row\">\n        {#each stats as item (item.title)}\n          <li class=\"w-full text-center bg-gray-800 px-12 py-4 rounded-lg sm:w-auto\">\n            <h4 class=\"text-4xl text-white font-semibold\">{item.data}</h4>\n            <p class=\"mt-3 text-gray-400 font-medium\">{item.title}</p>\n          </li>\n        {/each}\n      </ul>\n    </div>\n  </div>\n</section>\n","label":"App.svelte"}]},"react":{"jsxTail":[{"label":"App.jsx","code":"export default () => {\n\n    const stats = [\n        {\n            data: \"35K\",\n            title: \"Customers\"\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-28 bg-gray-900\">\n            <div className=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n                <div className=\"max-w-2xl mx-auto text-center\">\n                    <h3 className=\"text-white text-3xl font-semibold sm:text-4xl\">\n                        Our customers are always happy\n                    </h3>\n                    <p className=\"mt-3 text-gray-300\">\n                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis sollicitudin quam ut tincidunt.\n                    </p>\n                </div>\n                <div className=\"mt-12\">\n                    <ul className=\"flex flex-col gap-4 items-center justify-center sm:flex-row\">\n                        {\n                            stats.map((item, idx) => (\n                                <li key={idx} className=\"w-full text-center bg-gray-800 px-12 py-4 rounded-lg sm:w-auto\">\n                                    <h4 className=\"text-4xl text-white font-semibold\">{item.data}</h4>\n                                    <p className=\"mt-3 text-gray-400 font-medium\">{item.title}</p>\n                                </li>\n                            ))\n                        }\n                    </ul>\n                </div>\n            </div>\n        </section>\n    )\n}"}],"jsxCss":[]},"vue":{"vueCss":[],"vueTail":[{"code":"<template>\n  <section class=\"py-28 bg-gray-900\">\n    <div class=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n      <div class=\"max-w-2xl mx-auto text-center\">\n        <h3 class=\"text-white text-3xl font-semibold sm:text-4xl\">\n          Our customers are always happy\n        </h3>\n        <p class=\"mt-3 text-gray-300\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis sollicitudin quam ut tincidunt.\n        </p>\n      </div>\n      <div class=\"mt-12\">\n        <ul class=\"flex flex-col gap-4 items-center justify-center sm:flex-row\">\n          <li\n            v-for=\"(item, idx) in stats\"\n            :key=\"idx\"\n            class=\"w-full text-center bg-gray-800 px-12 py-4 rounded-lg sm:w-auto\"\n          >\n            <h4 class=\"text-4xl text-white font-semibold\">{{ item.data }}</h4>\n            <p class=\"mt-3 text-gray-400 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        {\n          data: \"35K\",\n          title: \"Customers\"\n        },\n        {\n          data: \"40+\",\n          title: \"Countries\"\n        },\n        {\n          data: \"30M+\",\n          title: \"Total revenue\"\n        },\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: \"40+\",\n            title: \"Countries\"\n        },\n        {\n            data: \"30M+\",\n            title: \"Total revenue\"\n        },\n    ]\n\n    return (\n        <section className=\"py-28 bg-gray-900\">\n            <div className=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n                <div className=\"max-w-2xl mx-auto text-center\">\n                    <h3 className=\"text-white text-3xl font-semibold sm:text-4xl\">\n                        Our customers are always happy\n                    </h3>\n                    <p className=\"mt-3 text-gray-300\">\n                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis sollicitudin quam ut tincidunt.\n                    </p>\n                </div>\n                <div className=\"mt-12\">\n                    <ul className=\"flex flex-col gap-4 items-center justify-center sm:flex-row\">\n                        {\n                            stats.map((item, idx) => (\n                                <li key={idx} className=\"w-full text-center bg-gray-800 px-12 py-4 rounded-lg sm:w-auto\">\n                                    <h4 className=\"text-4xl text-white font-semibold\">{item.data}</h4>\n                                    <p className=\"mt-3 text-gray-400 font-medium\">{item.title}</p>\n                                </li>\n                            ))\n                        }\n                    </ul>\n                </div>\n            </div>\n        </section>\n    )\n}"}
slug: /stats
id: aa96f248-688f-43f8-9f58-146359b8ee6f
created_at: 1671316909685
---

<FUIDarkStatsWithInCards />