Input
This component is still in work in progress stage in terms of styling. We are open for sugesstions on how can this be customised.
Currently it can be used as a simple component as shown below and comes with very minimal stlying
import {Input} from '@adiranids/react-tailwind'
function App() {
const [name, setName] = useState("")
return ( <Input type="text" value={name} onChange={(e)=>setName(e.target.value)} /> )
}
function App() {
const [name, setName] = useState("")
return ( <Input type="text" value={name} onChange={(e)=>setName(e.target.value)} /> )
}
Like most of the components, you can beautify it by adding some tailwind classes as shown below
function App() {
const [name, setName] = useState("")
return ( <Input type="text" value={name} onChange={(e)=>setName(e.target.value)}
className="border border-gray-200 p-3 w-2/3 bg-gray-100"
placeholder="Enter your name"
/> )
}
const [name, setName] = useState("")
return ( <Input type="text" value={name} onChange={(e)=>setName(e.target.value)}
className="border border-gray-200 p-3 w-2/3 bg-gray-100"
placeholder="Enter your name"
/> )
}
Which will produce
Copyright © 2021 Adirani Digital Solutions Ltd