Basic input example with placeholder.
<input type="text" className="px-3 py-2 md:py-3 md:px-4 block w-full md:w-[18rem]
xl:w-[22rem] rounded-lg md:rounded-xl text-sm placeholder:text-gray-600
placeholder:font-normal border-2 ring-2 ring-transparent
border-gray-200 hover:border-blue-200 outline-none focus:ring-blue-300
dark:bg-gray-800 dark:hover:bg-slate-800 dark:border-gray-700
dark:text-gray-400 duration-300" placeholder="Basic input example." />
<textarea type="text" rows={3} className="px-3 py-2 md:py-3 md:px-4 block w-full
md:w-[18rem] xl:w-[22rem] rounded-lg md:rounded-xl text-sm placeholder:text-gray-600
placeholder:font-normal border-2 ring-2
ring-transparent border-gray-200 hover:border-blue-200 outline-none focus:ring-blue-300
dark:bg-gray-800 dark:hover:bg-slate-800
dark:border-gray-700 dark:text-gray-400 duration-300" placeholder="Basic textarea example." />
Basic input example with label.
<div className="flex flex-col space-y-1">
<label
className="text-xs md:text-sm font-medium">
First name
</label>
<input
type="text"
className="px-3 py-2 md:py-3 md:px-4 block w-full md:w-[18rem] xl:w-[22rem] rounded-lg md:rounded-xl text-sm border-2 ring-2ring-transparent border-gray-200 hover:border-blue-200 outline-none focus:ring-blue-300 dark:bg-gray-800 dark:hover:bg-slate-800dark:border-gray-700 dark:text-gray-400 duration-300"
placeholder="Mukhammadjohn"
/>
</div>
Label input with animations.
<div className="relative group">
<label
className="absolute top-0 left-0 w-full h-full flex items-center pl-[16px] duration-300 text-xs md:text-sm font-medium group-focus-within:text-xs md:group-focus-within:text-sm group-focus-within:-top-1 group-focus-within:h-1/2 group-focus-within:-translate-y-full group-focus-within:pl-0 cursor-text"
htmlFor="label1">
First name
</label>
<input
id="label1"
type="text"
className="px-3 py-2 md:py-3 md:px-4 block w-full md:w-[18rem] xl:w-[22rem] rounded-lg md:rounded-xl text-sm placeholder:opacity-0 placeholder:group-focus-within:opacity-100 placeholder:text-gray-600 placeholder:font-normal border-2 ring-2 ring-transparent border-gray-200 hover:border-blue-200 outline-none focus:ring-blue-300 dark:bg-gray-800 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 duration-300"
placeholder="Mukhammadjohn"
/>
</div>
<div className="relative group">
<label
className="absolute top-0 left-0 w-full h-full flex items-center pl-[16px] duration-200 text-xs md:text-sm font-medium group-focus-within:font-normal md:group-focus-within:text-[0.60rem] group-focus-within:-top-1 group-focus-within:h-1/2 group-focus-within:translate-y-1 group-focus-within:translate-x-4 group-focus-within:pl-0 group-focus-within:text-blue-500 cursor-text"
htmlFor="label2">
Last name
</label>
<input
id="label2"
type="text"
className="px-3 pt-3 pb-1 md:pt-4 md:pb-2 md:px-4 block w-full md:w-[18rem] xl:w-[22rem] rounded-lg md:rounded-xl text-sm placeholder:opacity-0 placeholder:group-focus-within:opacity-100 placeholder:text-gray-600 placeholder:font-normal border-2 ring-2 ring-transparent border-gray-200 hover:border-blue-200 outline-none focus:ring-blue-300 dark:bg-gray-800 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 duration-200"
placeholder="Zayniddinov"
/>
</div>
Basic input example with helper text.
We wll never share your details.
We wll never share your details.
<div className="flex flex-col space-y-1 md:space-y-2">
<label
className="text-xs md:text-sm font-medium">
Helper text
</label>
<input
type="text"
className="px-3 py-2 md:py-3 md:px-4 block w-full md:w-[18rem] xl:w-[22rem] rounded-lg md:rounded-xl text-sm border-2 ring-2ring-transparent border-gray-200 hover:border-blue-200 outline-none focus:ring-blue-300 dark:bg-gray-800 dark:hover:bg-slate-800dark:border-gray-700 dark:text-gray-400 duration-300"
placeholder="Example one"
/>
<p className='text-sm text-gray-500 mt-2'>We wll never share your details.</p>
</div>
<div className="flex flex-col md:flex-row md:items-center space-y-1 md:space-x-2">
<label
className="text-xs md:text-sm font-medium">
Inline helper text
</label>
<input
type="text"
className="px-3 py-2 md:py-3 md:px-4 block w-full md:w-[18rem] xl:w-[22rem] rounded-lg md:rounded-xl text-sm border-2 ring-2ring-transparent border-gray-200 hover:border-blue-200 outline-none focus:ring-blue-300 dark:bg-gray-800 dark:hover:bg-slate-800dark:border-gray-700 dark:text-gray-400 duration-300"
placeholder="Example two"
/>
<p className='text-sm text-gray-500 mt-2'>We wll never share your details.</p>
</div>
Ranglar va ikonkalar ixtiyoriy! O'zingizga ma'qul rangni qo'llashingiz mumkin. Kodni olmoqchi bo'sangiz Show code tugmasini bosing
import React from 'react';
import { BiUser, BiLockOpenAlt } from 'react-icons/bi';
export const Icon = () => {
return (
<div className='grid grid-cols-2 items-center space-x-2'>
<div className="relative group">
<div className="flex items-center rounded-xl bg-gray-200 dark:bg-[#141417]">
<input
id="username"
className="outline-none flex flex-grow p-3 bg-transparent rounded-l-xl px-4 text-xs duration-300"
type="text"
placeholder="username"
/>
<div className="absolute top-0 right-0 duration-300 rounded-xl bg-transparent p-2 group-focus-within:-top-2 group-focus-within:-right-2 group-focus-within:bg-[#18191c]">
<BiUser className="text-primary dark:text-white group-focus-within:text-white" />
</div>
</div>
</div>
<div className="relative group">
<div className="flex items-center rounded-xl bg-gray-200 dark:bg-[#141417]">
<input
id="password"
className="outline-none flex flex-grow p-3 bg-transparent rounded-l-xl px-4 text-xs duration-300"
type="password"
placeholder="password"
/>
<div className="absolute top-0 right-0 duration-300 rounded-xl bg-transparent p-2 group-focus-within:-top-2 group-focus-within:-right-2 group-focus-within:bg-[#18191c]">
<BiLockOpenAlt className="text-primary dark:text-white group-focus-within:text-white" />
</div>
</div>
</div>
</div>
);
};
Ranglar va ikonkalar ixtiyoriy! O'zingizga ma'qul rangni qo'llashingiz mumkin. Kodni olmoqchi bo'sangiz Show code tugmasini bosing
import React from 'react';
import { BiUser } from 'react-icons/bi';
export const Color = () => {
return (
<div className="grid grid-cols-3 grid-rows-2 gap-x-2">
<div className="group">
<input
className="rounded-xl bg-blue-200 dark:bg-[#1e2639] outline-none py-3 px-4 text-xs duration-200 group-focus-within:bg-opacity-60"
type="text"
placeholder="Default"
/>
</div>
<div className="relative group">
<label
className="absolute top-0 left-0 w-full h-full flex items-center pl-[10px] duration-300 text-xs group-focus-within:text-xs group-focus-within:h-1/2 group-focus-within:-translate-y-full group-focus-within:pl-0"
htmlFor="color">
Label
</label>
<input
id="color"
className="rounded-xl bg-red-200 dark:bg-[#352428] outline-none py-3 px-4 text-xs group-focus-within:bg-opacity-60"
type="text"
/>
</div>
<div className="relative group">
<div className="flex items-center rounded-xl text-[#46c93a] bg-green-200 dark:bg-[#223125]">
<input
id="username"
className="outline-none flex flex-grow p-3 bg-transparent rounded-l-xl px-4 text-xs duration-300"
type="text"
placeholder="username"
/>
<div className="absolute top-0 right-0 duration-300 rounded-xl bg-transparent p-2 group-focus-within:-top-2 group-focus-within:-right-2 group-focus-within:bg-[#264027] group-focus-within:bg-opacity-60">
<BiUser className="text-primary text-[#46c93a]" />
</div>
</div>
</div>
</div>
);
};
Ranglar va ikonkalar ixtiyoriy! O'zingizga ma'qul rangni qo'llashingiz mumkin. Kodni olmoqchi bo'sangiz Show code tugmasini bosing
import React from 'react';
export const Tailwind = () => {
return (
<div className="flex items-center rounded-md w-[15rem] md:w-[25rem] bg-gray-100 dark:bg-[#111827] px-2 ring-2 ring-gray-300 dark:ring-[#111827] focus-within:ring-blue-600 dark:focus-within:ring-blue-600">
<svg
className="w-[1.25rem] h-[1.25rem] fill-gray-400"
viewBox="0 0 512 512">
<path d="M464 4.3L16 262.7C-7 276-4.7 309.9 19.8 320L160 378v102c0 30.2 37.8 43.3 56.7 20.3l60.7-73.8 126.4 52.2c19.1 7.9 40.7-4.2 43.8-24.7l64-417.1C515.7 10.2 487-9 464 4.3zM192 480v-88.8l54.5 22.5L192 480zm224-30.9l-206.2-85.2 199.5-235.8c4.8-5.6-2.9-13.2-8.5-8.4L145.5 337.3 32 290.5 480 32l-64 417.1z"></path>
</svg>
<input
className="flex-grow bg-transparent outline-none text-xs font-medium px-2 py-4 text-gray-400"
type="email"
placeholder="Email address"
/>
<button className="text-xs text-blue-500 font-semibold py-3 px-4 rounded-2xl hover:bg-blue-300 hover:bg-opacity-30">
SUBSCRIBE
</button>
</div>
);
};
About Lazy.dev
Why Lazy.dev?
FAQ
Documentation
GitHUb
Privacy
Issues
FAQ
Copyright ©2023 Lazydev
Created By Anvarov