---
title: Section Header with search box
category: Application
paid: false
isActive: true
ltr: {"svelte":{"svelteTail":[{"code":"<div class=\"max-w-screen-xl mx-auto px-4 pt-4 md:px-8\">\n    <div class=\"items-start justify-between gap-x-4 py-4 border-b sm: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 text of the printing and typesetting industry.\n            </p>\n        </div>\n        <div class=\"mt-6 sm:mt-0\">\n            <div class=\"relative\">\n                <svg class=\"w-6 h-6 text-gray-400 absolute left-3 inset-y-0 my-auto\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                    <path fillRule=\"evenodd\" d=\"M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z\" clipRule=\"evenodd\" />\n                </svg>\n                <input\n                    type=\"text\"\n                    placeholder=\"Enter your email\"\n                    class=\"w-full pl-12 pr-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 rounded-lg sm:max-w-xs\"\n                />\n            </div>\n        </div>\n    </div>\n</div>","label":"App.svelte"}]},"vue":{"vueCss":[],"vueTail":[{"code":"<template>\n  <div class=\"max-w-screen-xl mx-auto px-4 pt-4 md:px-8\">\n      <div class=\"items-start justify-between gap-x-4 py-4 border-b sm: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 text of the printing and typesetting industry.\n              </p>\n          </div>\n          <div class=\"mt-6 sm:mt-0\">\n              <div class=\"relative\">\n                  <svg class=\"w-6 h-6 text-gray-400 absolute left-3 inset-y-0 my-auto\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                      <path fillRule=\"evenodd\" d=\"M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z\" clipRule=\"evenodd\" />\n                  </svg>\n                  <input\n                      type=\"text\"\n                      placeholder=\"Enter your email\"\n                      class=\"w-full pl-12 pr-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 rounded-lg sm:max-w-xs\"\n                  />\n              </div>\n          </div>\n      </div>\n  </div>\n</template>","label":"App.vue"}]},"react":{"jsxCss":[],"jsxTail":[{"code":"export default () => {\n    return (\n        <div className=\"max-w-screen-xl mx-auto px-4 pt-4 md:px-8\">\n            <div className=\"items-start justify-between gap-x-4 py-4 border-b sm: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 text of the printing and typesetting industry.\n                    </p>\n                </div>\n                <div className=\"mt-6 sm:mt-0\">\n                    <div className=\"relative\">\n                        <svg className=\"w-6 h-6 text-gray-400 absolute left-3 inset-y-0 my-auto\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                            <path fillRule=\"evenodd\" d=\"M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z\" clipRule=\"evenodd\" />\n                        </svg>\n                        <input\n                            type=\"text\"\n                            placeholder=\"Enter your email\"\n                            className=\"w-full pl-12 pr-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 rounded-lg sm:max-w-xs\"\n                        />\n                    </div>\n                </div>\n            </div>\n        </div>\n    )\n}","label":"App.jsx"}]},"preview":"function App() {\n    return (\n        <div className=\"max-w-screen-xl mx-auto px-4 pt-4 md:px-8\">\n            <div className=\"items-start justify-between gap-x-4 py-4 border-b sm: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 text of the printing and typesetting industry.\n                    </p>\n                </div>\n                <div className=\"mt-6 sm:mt-0\">\n                    <div className=\"relative\">\n                        <svg className=\"w-6 h-6 text-gray-400 absolute left-3 inset-y-0 my-auto\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                            <path fillRule=\"evenodd\" d=\"M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z\" clipRule=\"evenodd\" />\n                        </svg>\n                        <input\n                            type=\"text\"\n                            placeholder=\"Enter your email\"\n                            className=\"w-full pl-12 pr-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 rounded-lg sm:max-w-xs\"\n                        />\n                    </div>\n                </div>\n            </div>\n        </div>\n    )\n}","html":{"htmlTail":[{"code":"<div class=\"max-w-screen-xl mx-auto px-4 pt-4 md:px-8\">\n    <div class=\"items-start justify-between gap-x-4 py-4 border-b sm: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 text of the printing and typesetting industry.\n            </p>\n        </div>\n        <div class=\"mt-6 sm:mt-0\">\n            <div class=\"relative\">\n                <svg class=\"w-6 h-6 text-gray-400 absolute left-3 inset-y-0 my-auto\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                    <path fillRule=\"evenodd\" d=\"M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z\" clipRule=\"evenodd\" />\n                </svg>\n                <input\n                    type=\"text\"\n                    placeholder=\"Enter your email\"\n                    class=\"w-full pl-12 pr-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 rounded-lg sm:max-w-xs\"\n                />\n            </div>\n        </div>\n    </div>\n</div>","label":"index.html"}]}}
slug: /section-headers
id: 98c3c98f-1b9b-43f3-901a-cad019ac8b7d
created_at: 1668950983090
---

<FUISectionHeaderWithSearchBox />