---
title: Hero Section With Gradient and Image 
category: Application
paid: false
isActive: true
ltr: {"preview":"function App() {\n    return (\n        <div className=\"max-w-md px-4 mx-auto mt-12\">\n            <label for=\"website-url\" className=\"block py-2 text-gray-500\">\n                Website URL\n            </label>\n            <div className=\"flex items-center text-gray-400 border rounded-md\">\n                <div className=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n                    https://\n                </div>\n                <input \n                    type=\"text\"\n                    placeholder=\"www.example.com\"\n                    id=\"website-url\"\n                    className=\"w-full p-2.5 ml-2 bg-transparent outline-none\"\n                />\n            </div>\n        </div>\n    )\n}","react":{"jsxTail":[{"label":"App.jsx","code":"export default () => {\n    return (\n        <div className=\"max-w-md px-4 mx-auto mt-12\">\n            <label for=\"website-url\" className=\"block py-2 text-gray-500\">\n                Website URL\n            </label>\n            <div className=\"flex items-center text-gray-400 border rounded-md\">\n                <div className=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n                    https://\n                </div>\n                <input \n                    type=\"text\"\n                    placeholder=\"www.example.com\"\n                    id=\"website-url\"\n                    className=\"w-full p-2.5 ml-2 bg-transparent outline-none\"\n                />\n            </div>\n        </div>\n    )\n}"}],"jsxCss":[{"code":"export default () => {\n    return (\n        <div className=\"website-url-input\">\n            <label for=\"website-url\">\n                Website URL\n            </label>\n            <div className=\"input-container\">\n                <div className=\"website-protocol\">\n                    https://\n                </div>\n                <input \n                    type=\"text\"\n                    placeholder=\"www.example.com\"\n                    id=\"website-url\"\n                    className=\"input\"\n                />\n            </div>\n        </div>\n    )\n}\n","label":"App.jsx"},{"label":"style.css","code":".website-url-input {\n  max-width: 28rem;\n  padding: 0px 1rem 0px 1rem;\n  margin: 3rem auto 0px auto;\n}\n.website-url-input label {\n  display: block;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  color: #6b7280;\n}\n.website-url-input .input-container {\n  display: flex;\n  align-items: center;\n  color: #9ca3af;\n  border: solid 1px #e5e7eb;\n  border-radius: 0.375rem;\n}\n.website-url-input .input-container .website-protocol {\n  padding: 0.625rem 0.75rem 0.625rem 0.75rem;\n  background-color: #f9fafb;\n  border-top-left-radius: 0.375rem;\n  border-bottom-left-radius: 0.375rem;\n  border-right: solid 1px #e5e7eb;\n}\n.website-url-input .input-container .input {\n  width: 100%;\n  padding: 0.625rem;\n  margin-left: 0.5rem;\n  background-color: transparent;\n  outline: none;\n}\n"}]},"vue":{"vueTail":[{"code":"<template>\n  <div class=\"max-w-md px-4 mx-auto mt-12\">\n    <label for=\"website-url\" class=\"block text-left py-2 text-gray-500\">\n      Website URL\n    </label>\n    <div class=\"flex items-center text-gray-400 border rounded-md\">\n      <div class=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n        https://\n      </div>\n      <input type=\"text\" placeholder=\"www.example.com\" id=\"website-url\"\n        class=\"w-full p-2.5 ml-2 bg-transparent outline-none\" />\n    </div>\n  </div>\n</template>","label":"App.vue"}],"vueCss":[{"label":"App.vue","code":"<template>\n  <div class=\"input-container\">\n    <label for=\"website-url\" class=\"input-label\">\n      Website URL\n    </label>\n    <div class=\"input-parent\">\n      <div class=\"left-input bg-gray-50\">\n        https://\n      </div>\n      <input type=\"text\" placeholder=\"www.example.com\" id=\"website-url\" class=\"website-url\" />\n    </div>\n  </div>\n</template>"},{"code":"  .input-container {\n    max-width: 28rem;\n    padding-left: 1rem;\n    padding-right: 1rem;\n    margin-left: auto;\n    margin-right: auto;\n    margin-top: 3rem;\n  }\n  .input-label {\n    color: #6b7280;\n    text-align: left;\n    padding-top: 0.5rem;\n    padding-bottom: 0.5rem;\n    display: block;\n  }\n  .input-parent {\n    border-radius: 0.375rem;\n    display: flex;\n    align-items: center;\n    color: #9ca3af;\n    border-width: 1px;\n  }\n  .left-input {\n    padding-top: 0.625rem;\n    padding-bottom: 0.625rem;\n    padding-left: 0.75rem;\n    padding-right: 0.75rem;\n    border-right-width: 1px;\n    border-top-left-radius: 0.375rem;\n    border-bottom-left-radius: 0.375rem;\n    background-color: #f9fafb;\n  }\n  .website-url {\n    padding: 0.625rem;\n    outline: 2px solid transparent;\n    outline-offset: 2px;\n    background-color: transparent;\n    width: 100%;\n    margin-left: 0.5rem;\n  }","label":"style.css"}]},"html":{"htmlTail":[{"label":"index.html","code":"<div class=\"max-w-md px-4 mx-auto mt-12\">\n    <label for=\"website-url\" class=\"block py-2 text-gray-500\">\n        Website URL\n    </label>\n    <div class=\"flex items-center text-gray-400 border rounded-md\">\n        <div class=\"px-3 py-2.5 rounded-l-md bg-gray-50 border-r\">\n            https://\n        </div>\n        <input \n            type=\"text\"\n            placeholder=\"www.example.com\"\n            id=\"website-url\"\n            class=\"w-full p-2.5 ml-2 bg-transparent outline-none\"\n        />\n    </div>\n</div>\n"}]}}
slug: /hero-section
id: "farmui-hero-04"
created_at: 1
---

<FUIHeroWithGrid />