---
title: Dark Stats
category: Marketing
paid: false
isActive: true
ltr: {"preview":"function App() {\n\n    const stats = [\n        {\n            data: \"35K\",\n            desc: \"Customers consectetur adipiscing elit.\"\n        },\n        {\n            data: \"10K+\",\n            desc: \"Downloads efficitur id eu nulla facilisis turpis\"\n        },\n        {\n            data: \"40+\",\n            desc: \"Countries maximus sit amet auctor sed,\"\n        },\n        {\n            data: \"30M+\",\n            desc: \"Total revenue consectetur adipiscing elit\"\n        },\n    ]\n\n    return (\n        <section className=\"py-28 bg-gray-900\">\n            <div className=\"relative z-10 max-w-screen-xl mx-auto px-4 md:px-8\">\n                <div className=\"max-w-2xl xl:mx-auto xl: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-wrap gap-x-12 gap-y-10 items-center space-y-8 sm:space-y-0 sm:flex xl:justify-center\">\n                        {\n                            stats.map((item, idx) => (\n                                <li key={idx} className=\"sm:max-w-[15rem]\">\n                                    <h4 className=\"text-4xl text-white font-semibold\">{item.data}</h4>\n                                    <p className=\"mt-3 text-gray-400 font-medium\">{item.desc}</p>\n                                </li>\n                            ))\n                        }\n                    </ul>\n                </div>\n            </div>\n            <div className=\"absolute inset-0 max-w-md mx-auto h-80 blur-[118px] sm:h-72\" style={{ background: \"linear-gradient(152.92deg, rgba(192, 132, 252, 0.2) 4.54%, rgba(232, 121, 249, 0.26) 34.2%, rgba(192, 132, 252, 0.1) 77.55%)\" }}></div>\n        </section>\n    )\n}","vue":{"vueTail":[{"code":"<template>\n  <section class=\"py-28 bg-gray-900\">\n    <div class=\"relative z-10 max-w-screen-xl mx-auto px-4 md:px-8\">\n      <div class=\"max-w-2xl xl:mx-auto xl: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-wrap gap-x-12 gap-y-10 items-center space-y-8 sm:space-y-0 sm:flex xl:justify-center\">\n          <li v-for=\"(item, index) in stats\" :key=\"index\" class=\"sm:max-w-[15rem]\">\n            <h4 class=\"text-4xl text-white font-semibold\">{{ item.data }}</h4>\n            <p class=\"mt-3 text-gray-400 font-medium\">{{ item.desc }}</p>\n          </li>\n        </ul>\n      </div>\n    </div>\n    <div class=\"absolute inset-0 max-w-md mx-auto h-80 blur-[118px] sm:h-72\" style=\"background: linear-gradient(152.92deg, rgba(192, 132, 252, 0.2) 4.54%, rgba(232, 121, 249, 0.26) 34.2%, rgba(192, 132, 252, 0.1) 77.55%)\"></div>\n  </section>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      stats: [\n        { data: '35K', desc: 'Customers consectetur adipiscing elit.' },\n        { data: '10K+', desc: 'Downloads efficitur id eu nulla facilisis turpis' },\n        { data: '40+', desc: 'Countries maximus sit amet auctor sed,' },\n        { data: '30M+', desc: 'Total revenue consectetur adipiscing elit' },\n      ],\n    };\n  },\n};\n</script>\n","label":"App.vue"}],"vueCss":[]},"svelte":{"svelteTail":[{"code":"<script>\n  const stats = [\n    {\n      data: '35K',\n      desc: 'Customers consectetur adipiscing elit.'\n    },\n    {\n      data: '10K+',\n      desc: 'Downloads efficitur id eu nulla facilisis turpis'\n    },\n    {\n      data: '40+',\n      desc: 'Countries maximus sit amet auctor sed,'\n    },\n    {\n      data: '30M+',\n      desc: 'Total revenue consectetur adipiscing elit'\n    },\n  ];\n</script>\n\n<section class=\"py-28 bg-gray-900\">\n  <div class=\"relative z-10 max-w-screen-xl mx-auto px-4 md:px-8\">\n    <div class=\"max-w-2xl xl:mx-auto xl: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-wrap gap-x-12 gap-y-10 items-center space-y-8 sm:space-y-0 sm:flex xl:justify-center\">\n        {#each stats as item (item.data)}\n          <li class=\"sm:max-w-[15rem]\">\n            <h4 class=\"text-4xl text-white font-semibold\">{item.data}</h4>\n            <p class=\"mt-3 text-gray-400 font-medium\">{item.desc}</p>\n          </li>\n        {/each}\n      </ul>\n    </div>\n  </div>\n  <div class=\"absolute inset-0 max-w-md mx-auto h-80 blur-[118px] sm:h-72\" style=\"background: linear-gradient(152.92deg, rgba(192, 132, 252, 0.2) 4.54%, rgba(232, 121, 249, 0.26) 34.2%, rgba(192, 132, 252, 0.1) 77.55%)\"></div>\n</section>\n","label":"App.svelte"}]},"react":{"jsxCss":[],"jsxTail":[{"code":"export default () => {\n\n    const stats = [\n        {\n            data: \"35K\",\n            desc: \"Customers consectetur adipiscing elit.\"\n        },\n        {\n            data: \"10K+\",\n            desc: \"Downloads efficitur id eu nulla facilisis turpis\"\n        },\n        {\n            data: \"40+\",\n            desc: \"Countries maximus sit amet auctor sed,\"\n        },\n        {\n            data: \"30M+\",\n            desc: \"Total revenue consectetur adipiscing elit\"\n        },\n    ]\n\n    return (\n        <section className=\"py-28 bg-gray-900\">\n            <div className=\"relative z-10 max-w-screen-xl mx-auto px-4 md:px-8\">\n                <div className=\"max-w-2xl xl:mx-auto xl: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-wrap gap-x-12 gap-y-10 items-center space-y-8 sm:space-y-0 sm:flex xl:justify-center\">\n                        {\n                            stats.map((item, idx) => (\n                                <li key={idx} className=\"sm:max-w-[15rem]\">\n                                    <h4 className=\"text-4xl text-white font-semibold\">{item.data}</h4>\n                                    <p className=\"mt-3 text-gray-400 font-medium\">{item.desc}</p>\n                                </li>\n                            ))\n                        }\n                    </ul>\n                </div>\n            </div>\n            <div className=\"absolute inset-0 max-w-md mx-auto h-80 blur-[118px] sm:h-72\" style={{ background: \"linear-gradient(152.92deg, rgba(192, 132, 252, 0.2) 4.54%, rgba(232, 121, 249, 0.26) 34.2%, rgba(192, 132, 252, 0.1) 77.55%)\" }}></div>\n        </section>\n    )\n}","label":"App.jsx"}]},"html":{"htmlTail":[{"label":"index.html","code":"<div x-data=\"{ stats: [\n        { data: '35K', desc: 'Customers consectetur adipiscing elit.' },\n        { data: '10K+', desc: 'Downloads efficitur id eu nulla facilisis turpis' },\n        { data: '40+', desc: 'Countries maximus sit amet auctor sed,' },\n        { data: '30M+', desc: 'Total revenue consectetur adipiscing elit' }\n    ] \n}\">\n\n    <section class=\"py-28 bg-gray-900\">\n        <div class=\"relative z-10 max-w-screen-xl mx-auto px-4 md:px-8\">\n            <div class=\"max-w-2xl xl:mx-auto xl: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-wrap gap-x-12 gap-y-10 items-center space-y-8 sm:space-y-0 sm:flex xl:justify-center\">\n                    <template x-for=\"(item, index) in stats\" :key=\"index\">\n                        <li class=\"sm:max-w-[15rem]\">\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.desc\"></p>\n                        </li>\n                    </template>\n                </ul>\n            </div>\n        </div>\n        <div class=\"absolute inset-0 max-w-md mx-auto h-80 blur-[118px] sm:h-72\" style=\"background: linear-gradient(152.92deg, rgba(192, 132, 252, 0.2) 4.54%, rgba(232, 121, 249, 0.26) 34.2%, rgba(192, 132, 252, 0.1) 77.55%)\"></div>\n    </section>\n</div>\n"}]}}
slug: /stats
id: 5356d18d-342d-4dff-887b-7f0b9d26569a
created_at: 1671316814468
---

<FUIDarkStats />