---
title: Stats with image
category: Marketing
paid: false
isActive: true
ltr: {"svelte":{"svelteTail":[{"code":"<script>\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</script>\n\n<section class=\"py-14\">\n  <div class=\"max-w-screen-xl mx-auto px-4 text-gray-600 gap-x-12 items-start justify-between lg:flex md:px-8\">\n    <div class=\"sm:hidden lg:block lg:max-w-xl\">\n      <img src=\"https://images.unsplash.com/photo-1622675363311-3e1904dc1885?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80\" class=\"rounded-lg\" alt=\"\" />\n    </div>\n    <div class=\"mt-6 gap-12 sm:mt-0 md:flex lg:block\">\n      <div class=\"max-w-2xl\">\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\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis sollicitudin quam ut tincidunt.\n        </p>\n      </div>\n      <div class=\"flex-none mt-6 md:mt-0 lg:mt-6\">\n        <ul class=\"inline-grid gap-y-8 gap-x-14 grid-cols-2\">\n          {#each stats as item, idx}\n            <li key={idx}>\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  </div>\n</section>\n","label":"App.svelte"}]},"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 items-start justify-between lg:flex md:px-8\">\n                <div className=\"sm:hidden lg:block lg:max-w-xl\">\n                    <img src=\"https://images.unsplash.com/photo-1622675363311-3e1904dc1885?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80\" className=\"rounded-lg\" alt=\"\" />\n                </div>\n                <div className=\"mt-6 gap-12 sm:mt-0 md:flex lg:block\">\n                    <div className=\"max-w-2xl\">\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\">\n                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis sollicitudin quam ut tincidunt.\n                        </p>\n                    </div>\n                    <div className=\"flex-none mt-6 md:mt-0 lg:mt-6\">\n                        <ul className=\"inline-grid gap-y-8 gap-x-14 grid-cols-2\">\n                            {\n                                stats.map((item, idx) => (\n                                    <li key={idx} className=\"\">\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            </div>\n        </section>\n    )\n}"}]},"vue":{"vueTail":[{"label":"App.vue","code":"<template>\n  <section class=\"py-14\">\n    <div class=\"max-w-screen-xl mx-auto px-4 text-gray-600 gap-x-12 items-start justify-between lg:flex md:px-8\">\n      <div class=\"sm:hidden lg:block lg:max-w-xl\">\n        <img src=\"https://images.unsplash.com/photo-1622675363311-3e1904dc1885?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80\" class=\"rounded-lg\" alt=\"\" />\n      </div>\n      <div class=\"mt-6 gap-12 sm:mt-0 md:flex lg:block\">\n        <div class=\"max-w-2xl\">\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\">\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis sollicitudin quam ut tincidunt.\n          </p>\n        </div>\n        <div class=\"flex-none mt-6 md:mt-0 lg:mt-6\">\n          <ul class=\"inline-grid gap-y-8 gap-x-14 grid-cols-2\">\n            <li v-for=\"(item, idx) in stats\" :key=\"idx\">\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    </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"}],"vueCss":[]},"html":{"htmlTail":[{"label":"index.html","code":"<section 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    ] }\" class=\"py-14\">\n    <div class=\"max-w-screen-xl mx-auto px-4 text-gray-600 gap-x-12 items-start justify-between lg:flex md:px-8\">\n        <div class=\"sm:hidden lg:block lg:max-w-xl\">\n            <img src=\"https://images.unsplash.com/photo-1622675363311-3e1904dc1885?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80\" class=\"rounded-lg\" alt=\"\" />\n        </div>\n        <div class=\"mt-6 gap-12 sm:mt-0 md:flex lg:block\">\n            <div class=\"max-w-2xl\">\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\">\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis sollicitudin quam ut tincidunt.\n                </p>\n            </div>\n            <div class=\"flex-none mt-6 md:mt-0 lg:mt-6\">\n                <ul class=\"inline-grid gap-y-8 gap-x-14 grid-cols-2\">\n                    <template x-for=\"(item, idx) in stats\" :key=\"idx\">\n                        <li>\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    </div>\n</section>\n"}]},"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 items-start justify-between lg:flex md:px-8\">\n                <div className=\"sm:hidden lg:block lg:max-w-xl\">\n                    <img src=\"https://images.unsplash.com/photo-1622675363311-3e1904dc1885?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80\" className=\"rounded-lg\" alt=\"\" />\n                </div>\n                <div className=\"mt-6 gap-12 sm:mt-0 md:flex lg:block\">\n                    <div className=\"max-w-2xl\">\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\">\n                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis sollicitudin quam ut tincidunt.\n                        </p>\n                    </div>\n                    <div className=\"flex-none mt-6 md:mt-0 lg:mt-6\">\n                        <ul className=\"inline-grid gap-y-8 gap-x-14 grid-cols-2\">\n                            {\n                                stats.map((item, idx) => (\n                                    <li key={idx} className=\"\">\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            </div>\n        </section>\n    )\n}"}
slug: /stats
id: 37ac48c2-a51d-4dc7-98be-107fcab08c89
created_at: 1671315039452
---

<FUIStatsWithImage />