---
title: Section Header with buttons
category: Application
paid: false
isActive: true
ltr: {"preview":"function App() {\n    return (\n        <div className=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n            <div className=\"items-start justify-between py-4 border-b md:flex\">\n                <div>\n                    <h3 className=\"text-gray-800 text-2xl font-bold\">\n                        Analytics\n                    </h3>\n                </div>\n                <div className=\"items-center gap-x-3 mt-6 md:mt-0 sm:flex\">\n                    <a\n                        href=\"javascript:void(0)\"\n                        className=\"block px-4 py-2 text-center text-white duration-150 font-medium bg-indigo-600 rounded-lg hover:bg-indigo-500 active:bg-indigo-700 md:text-sm\"\n                    >\n                        Browse reports\n                    </a>\n                    <a\n                        href=\"javascript:void(0)\"\n                        className=\"block px-4 py-2 mt-3 text-center text-gray-700 duration-150 font-medium rounded-lg border hover:bg-gray-50 active:bg-gray-100 sm:mt-0 md:text-sm\"\n                    >\n                        Engagement\n                    </a>\n                </div>\n            </div>\n        </div>\n    )\n}","html":{"htmlTail":[{"label":"index.html","code":"<div class=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n    <div class=\"items-start justify-between py-4 border-b md:flex\">\n        <div>\n            <h3 class=\"text-gray-800 text-2xl font-bold\">\n                Analytics\n            </h3>\n        </div>\n        <div class=\"items-center gap-x-3 mt-6 md:mt-0 sm:flex\">\n            <a\n                href=\"javascript:void(0)\"\n                class=\"block px-4 py-2 text-center text-white duration-150 font-medium bg-indigo-600 rounded-lg hover:bg-indigo-500 active:bg-indigo-700 md:text-sm\"\n            >\n                Browse reports\n            </a>\n            <a\n                href=\"javascript:void(0)\"\n                class=\"block px-4 py-2 mt-3 text-center text-gray-700 duration-150 font-medium rounded-lg border hover:bg-gray-50 active:bg-gray-100 sm:mt-0 md:text-sm\"\n            >\n                Engagement\n            </a>\n        </div>\n    </div>\n</div>"}]},"react":{"jsxCss":[],"jsxTail":[{"code":"export default () => {\n    return (\n        <div className=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n            <div className=\"items-start justify-between py-4 border-b md:flex\">\n                <div>\n                    <h3 className=\"text-gray-800 text-2xl font-bold\">\n                        Analytics\n                    </h3>\n                </div>\n                <div className=\"items-center gap-x-3 mt-6 md:mt-0 sm:flex\">\n                    <a\n                        href=\"javascript:void(0)\"\n                        className=\"block px-4 py-2 text-center text-white duration-150 font-medium bg-indigo-600 rounded-lg hover:bg-indigo-500 active:bg-indigo-700 md:text-sm\"\n                    >\n                        Browse reports\n                    </a>\n                    <a\n                        href=\"javascript:void(0)\"\n                        className=\"block px-4 py-2 mt-3 text-center text-gray-700 duration-150 font-medium rounded-lg border hover:bg-gray-50 active:bg-gray-100 sm:mt-0 md:text-sm\"\n                    >\n                        Engagement\n                    </a>\n                </div>\n            </div>\n        </div>\n    )\n}","label":"App.jsx"}]},"vue":{"vueCss":[],"vueTail":[{"code":"<template>\n  <div class=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n    <div class=\"items-start justify-between py-4 border-b md:flex\">\n        <div>\n            <h3 class=\"text-gray-800 text-2xl font-bold\">\n                Analytics\n            </h3>\n        </div>\n        <div class=\"items-center gap-x-3 mt-6 md:mt-0 sm:flex\">\n            <a\n                href=\"javascript:void(0)\"\n                class=\"block px-4 py-2 text-center text-white duration-150 font-medium bg-indigo-600 rounded-lg hover:bg-indigo-500 active:bg-indigo-700 md:text-sm\"\n            >\n                Browse reports\n            </a>\n            <a\n                href=\"javascript:void(0)\"\n                class=\"block px-4 py-2 mt-3 text-center text-gray-700 duration-150 font-medium rounded-lg border hover:bg-gray-50 active:bg-gray-100 sm:mt-0 md:text-sm\"\n            >\n                Engagement\n            </a>\n        </div>\n    </div>\n  </div>\n</template>","label":"App.vue"}]},"svelte":{"svelteTail":[{"code":"<div class=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n    <div class=\"items-start justify-between py-4 border-b md:flex\">\n        <div>\n            <h3 class=\"text-gray-800 text-2xl font-bold\">\n                Analytics\n            </h3>\n        </div>\n        <div class=\"items-center gap-x-3 mt-6 md:mt-0 sm:flex\">\n            <a\n                href=\"javascript:void(0)\"\n                class=\"block px-4 py-2 text-center text-white duration-150 font-medium bg-indigo-600 rounded-lg hover:bg-indigo-500 active:bg-indigo-700 md:text-sm\"\n            >\n                Browse reports\n            </a>\n            <a\n                href=\"javascript:void(0)\"\n                class=\"block px-4 py-2 mt-3 text-center text-gray-700 duration-150 font-medium rounded-lg border hover:bg-gray-50 active:bg-gray-100 sm:mt-0 md:text-sm\"\n            >\n                Engagement\n            </a>\n        </div>\n    </div>\n</div>","label":"App.svelte"}]}}
slug: /section-headers
id: 4e9c860b-00b5-41b7-b1ba-1bb6aac58666
created_at: 1668950730048
---

<FUISectionHeaderWithButtons />