Tailwind CSS textareas

Default Textarea

This pretty input makes your users want to type lots of stuff! ⌨️ ⌨️

Preview

</div></div></div><div><div class="font-head text-xl font-medium mb-1">Code</div><div class="border relative rounded p-4 bg-[#222222] text-zinc-200"><pre><pre class="relative"><button class="font-head text-xs absolute top-2 right-2 px-4 py-1 bg-primary-400 text-black border-2 border-black shadow-md hover:shadow-xs">Copy</button><code class="language-html"><textarea
    placeholder="Enter text..."
    rows="4"
    class="px-4 py-2 w-full border-2 border-black shadow-md transition focus:outline-none focus:shadow-xs"
/></code></pre></pre></div></div></div></div></div></div></div><script src="/_next/static/chunks/webpack-4445393cd7c553f5.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/_next/static/media/409f897b497f3fab-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n2:HL[\"/_next/static/media/78b756c5b9139e81-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n3:HL[\"/_next/static/media/982ceffe7b733b3b-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n4:HL[\"/_next/static/css/58a7ceceb9af616e.css\",\"style\"]\n5:HL[\"/_next/static/css/b40c3cf2f4f7eb74.css\",\"style\"]\n6:HL[\"/_next/static/css/24d4fc2ae2f95b35.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"7:I[6305,[],\"\"]\na:I[696,[],\"\"]\nc:I[8276,[],\"\"]\nd:I[5790,[\"790\",\"static/chunks/790-7bc2933c814d4324.js\",\"686\",\"static/chunks/app/components/layout-67c7f5e4cca10a8d.js\"],\"\"]\ne:I[8440,[\"903\",\"static/chunks/903-0730641d7f208caa.js\",\"790\",\"static/chunks/790-7bc2933c814d4324.js\",\"185\",\"static/chunks/app/layout-0c7c20b8387b7014.js\"],\"default\"]\n10:I[8831,[],\"\"]\nb:[\"slug\",\"textareas\",\"d\"]\n11:[]\n"])</script><script>self.__next_f.push([1,"0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/58a7ceceb9af616e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/b40c3cf2f4f7eb74.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"2\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/24d4fc2ae2f95b35.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L7\",null,{\"buildId\":\"JjvXm9ldx4BKi-ZMnoO6y\",\"assetPrefix\":\"\",\"initialCanonicalUrl\":\"/components/textareas\",\"initialTree\":[\"\",{\"children\":[\"components\",{\"children\":[[\"slug\",\"textareas\",\"d\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[\"components\",{\"children\":[[\"slug\",\"textareas\",\"d\"],{\"children\":[\"__PAGE__\",{},[[\"$L8\",\"$L9\"],null],null]},[\"$\",\"$La\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"components\",\"children\",\"$b\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lc\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[[\"$\",\"div\",null,{\"className\":\"relative\",\"children\":[[\"$\",\"div\",null,{\"className\":\"hidden lg:block\",\"children\":[\"$\",\"div\",null,{\"className\":\"fixed top-16 left-0 border-r-2 border-black h-full transition-transform transform md:translate-x-0 w-64 bg-white z-50\",\"children\":[\"$\",\"nav\",null,{\"className\":\"flex flex-col items-start p-6 space-y-2\",\"children\":[[\"$\",\"$Ld\",\"/components\",{\"href\":\"/components\",\"children\":\"Getting Started\"}],[\"$\",\"$Ld\",\"/components/accordions\",{\"href\":\"/components/accordions\",\"children\":\"Accordions\"}],[\"$\",\"$Ld\",\"/components/avatars\",{\"href\":\"/components/avatars\",\"children\":\"Avatars\"}],[\"$\",\"$Ld\",\"/components/buttons\",{\"href\":\"/components/buttons\",\"children\":\"Buttons\"}],[\"$\",\"$Ld\",\"/components/cards\",{\"href\":\"/components/cards\",\"children\":\"Cards\"}],[\"$\",\"$Ld\",\"/components/inputs\",{\"href\":\"/components/inputs\",\"children\":\"Inputs\"}],[\"$\",\"$Ld\",\"/components/textareas\",{\"href\":\"/components/textareas\",\"children\":\"Textareas\"}],[\"$\",\"$Ld\",\"/components/typography\",{\"href\":\"/components/typography\",\"children\":\"Typography\"}]]}]}]}],[\"$\",\"div\",null,{\"className\":\"lg:ml-72 mt-20 px-4\",\"children\":[\"$\",\"$La\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"components\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lc\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}]}]]}],null],null]},[[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[[\"$\",\"head\",null,{\"children\":[\"$\",\"script\",null,{\"defer\":true,\"src\":\"https://cloud.umami.is/script.js\",\"data-website-id\":\"97dd6182-c656-4265-97e0-ee9613b88078\"}]}],[\"$\",\"body\",null,{\"className\":\"__className_252b6c __variable_925659 __variable_252b6c __variable_3ec33c\",\"children\":[[\"$\",\"div\",null,{\"className\":\"mb-8 relative z-10\",\"children\":[\"$\",\"nav\",null,{\"className\":\"fixed top-0 h-16 left-0 right-0 w-full border-b-2 border-black bg-white\",\"children\":[\"$\",\"div\",null,{\"className\":\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex justify-between items-center h-16\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex-shrink-0\",\"children\":[\"$\",\"a\",null,{\"href\":\"/\",\"className\":\"text-black font-head text-2xl flex items-end\",\"children\":[[\"$\",\"img\",null,{\"src\":\"/logo_full.png\",\"alt\":\"retro ui logo\",\"className\":\"w-16 mr-2\"}],\"RetroUI\"]}]}],[\"$\",\"div\",null,{\"className\":\"hidden md:flex space-x-8\",\"children\":[[\"$\",\"a\",null,{\"href\":\"/components\",\"className\":\"hover:text-primary-500 transition-all\",\"children\":\"Documentation\"}],[\"$\",\"a\",null,{\"href\":\"/components/buttons\",\"className\":\"hover:text-primary-500 transition-all\",\"children\":\"Components\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center space-x-4 lg:hidden\",\"children\":[[\"$\",\"$Ld\",null,{\"href\":\"https://github.com/ariflogs/retroui\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-github\",\"children\":[[\"$\",\"path\",\"tonef\",{\"d\":\"M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4\"}],[\"$\",\"path\",\"9comsn\",{\"d\":\"M9 18c-4.51 2-5-2-7-2\"}],\"$undefined\"]}]}],[\"$\",\"$Le\",null,{}]]}],[\"$\",\"div\",null,{\"className\":\"hidden lg:flex items-center\",\"children\":[\"$\",\"$Ld\",null,{\"href\":\"https://github.com/ariflogs/retroui\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":[\"$\",\"button\",null,{\"className\":\"font-head border-2 shadow-md hover:shadow-xs transition-all flex px-4 py-1 text-sm bg-transparent text-black border-2 border-black\",\"children\":[\"$undefined\",[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"fill\":\"currentColor\",\"className\":\"w-4 h-4 mr-2\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"path\",null,{\"d\":\"M12 0a12 12 0 00-3.8 23.4c.6.1.8-.3.8-.6v-2.2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1.1-.8.1-.8.1-.8 1.2.1 1.8 1.3 1.8 1.3 1.1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.4-1.3-5.4-5.9 0-1.3.5-2.3 1.2-3.2 0-.3-.5-1.3.1-2.7 0 0 1-.3 3.2 1.2.9-.3 1.8-.4 2.8-.4.9 0 1.9.1 2.8.4 2.2-1.5 3.2-1.2 3.2-1.2.6 1.4.1 2.4 0 2.7.8.9 1.2 1.9 1.2 3.2 0 4.6-2.8 5.6-5.4 5.9.4.3.7 1 .7 2v3c0 .3.2.7.8.6A12 12 0 0012 0\"}]}],\"Star on GitHub\"],\"$undefined\"]}]}]}]]}]}]}]}],[\"$\",\"$La\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lc\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[],\"styles\":null}]]}]]}],null],null],\"couldBeIntercepted\":false,\"initialHead\":[null,\"$Lf\"],\"globalErrorComponent\":\"$10\",\"missingSlots\":\"$W11\"}]]\n"])</script><script>self.__next_f.push([1,"12:I[8860,[\"903\",\"static/chunks/903-0730641d7f208caa.js\",\"858\",\"static/chunks/app/components/%5Bslug%5D/page-3f9eeb7ba172e196.js\"],\"default\"]\n9:[\"$\",\"div\",null,{\"children\":[[\"$\",\"div\",\"727f6f9827df4d13a716a90028cebab6\",{\"children\":[[\"$\",\"$L12\",null,{\"header\":\"Default Textarea\",\"description\":\"This pretty input makes your users want to type lots of stuff! ⌨️ ⌨️\",\"isPrivate\":false,\"code\":\"\u003ctextarea\\r\\n    placeholder=\\\"Enter text...\\\"\\r\\n    rows=\\\"4\\\"\\r\\n    class=\\\"px-4 py-2 w-full border-2 border-black shadow-md transition focus:outline-none focus:shadow-xs\\\"\\r\\n/\u003e\",\"children\":[\"$\",\"div\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"\u003ctextarea\\r\\n    placeholder=\\\"Enter text...\\\"\\r\\n    rows=\\\"4\\\"\\r\\n    class=\\\"px-4 py-2 w-full border-2 border-black shadow-md transition focus:outline-none focus:shadow-xs\\\"\\r\\n/\u003e\"}}]}],false]}]]}]\nf:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Tailwind CSS textareas | RetroUI\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"RetroUI - Retro styled TailwindCSS component library for modern web apps.\"}],[\"$\",\"meta\",\"4\",{\"property\":\"og:title\",\"content\":\"Tailwind CSS textareas | RetroUI\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:description\",\"content\":\"RetroUI - Retro styled TailwindCSS component library for modern web apps.\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:image\",\"content\":\"http://localhost:3000/banner.png\"}],[\"$\",\"meta\",\"7\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"8\",{\"name\":\"twitter:title\",\"content\":\"Tailwind CSS textareas | RetroUI\"}],[\"$\",\"meta\",\"9\",{\"name\":\"twitter:description\",\"content\":\"RetroUI - Retro styled TailwindCSS component library for modern web apps.\"}],[\"$\",\"meta\",\"10\",{\"name\":\"twitter:image\",\"content\":\"http://localhost:3000/banner.png\"}],[\"$\",\"link\",\"11\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"16x16\"}],[\"$\",\"meta\",\"12\",{\"name\":\"next-size-adjust\"}]]\n8:null\n"])</script></body></html>