---
title: Section Header with description and button
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 className=\"max-w-lg\">\n                    <h3 className=\"text-gray-800 text-2xl font-bold\">\n                        Team members\n                    </h3>\n                    <p className=\"text-gray-600 mt-2\">\n                        Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n                    </p>\n                </div>\n                <div className=\"mt-6 md:mt-0\">\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                        New member\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 class=\"max-w-lg\">\n            <h3 class=\"text-gray-800 text-2xl font-bold\">\n                Team members\n            </h3>\n            <p class=\"text-gray-600 mt-2\">\n                Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n            </p>\n        </div>\n        <div class=\"mt-6 md:mt-0\">\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                New member\n            </a>\n        </div>\n    </div>\n</div>"}]},"vue":{"vueTail":[{"label":"App.vue","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 class=\"max-w-lg\">\n              <h3 class=\"text-gray-800 text-2xl font-bold\">\n                  Team members\n              </h3>\n              <p class=\"text-gray-600 mt-2\">\n                  Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n              </p>\n          </div>\n          <div class=\"mt-6 md:mt-0\">\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                  New member\n              </a>\n          </div>\n      </div>\n  </div>\n</template>"}],"vueCss":[]},"react":{"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 className=\"max-w-lg\">\n                    <h3 className=\"text-gray-800 text-2xl font-bold\">\n                        Team members\n                    </h3>\n                    <p className=\"text-gray-600 mt-2\">\n                        Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n                    </p>\n                </div>\n                <div className=\"mt-6 md:mt-0\">\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                        New member\n                    </a>\n                </div>\n            </div>\n        </div>\n    )\n}","label":"App.jsx"}],"jsxCss":[]},"svelte":{"svelteTail":[{"label":"App.svelte","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 class=\"max-w-lg\">\n            <h3 class=\"text-gray-800 text-2xl font-bold\">\n                Team members\n            </h3>\n            <p class=\"text-gray-600 mt-2\">\n                Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n            </p>\n        </div>\n        <div class=\"mt-6 md:mt-0\">\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                New member\n            </a>\n        </div>\n    </div>\n</div>"}]}}
slug: /section-headers
id: d27d0691-2e78-4c62-8f59-0e48b8f61cbf
created_at: 1668950814230
---

<FUISectionHeaderWithDescriptionAndButton />