counterweight/kuotata
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

decent looking inputs, must make compon.

Browse source
This commit is contained in:
Pablo Martin 2025-05-22 17:53:03 +02:00
parent 9e47fa7dcf
commit 5a775f156e
1 changed files with 43 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

46
src/App.jsx
View file

@ -3,8 +3,8 @@ import AppSubHeader from "./components/AppSubHeader";
const App = () => { const App = () => {
return ( return (
<div className="flex flex-col justify-center items-center "> <div className="flex flex-col min-h-screen justify-center items-center ">
<div className="flex flex-col justify-center items-center my-5"> <div className="flex flex-col justify-center items-center my-5 text-white bg-blue-600 p-5 rounded-3xl shadow-[0_4px_0_rgba(0,255,255,1)]">
<div> <div>
<AppHeader /> <AppHeader />
</div> </div>
@ -12,18 +12,48 @@ const App = () => {
<AppSubHeader /> <AppSubHeader />
</div> </div>
</div> </div>
<div></div> <div className="p-5 bg-gray-50 rounded-3xl border border-gray-400">
<form className="flex flex-col justify-end items-end my-5"> <form className="flex flex-col justify-end items-end my-5 text-white bg-blue-600 p-5 rounded-3xl shadow-[0_4px_0_rgba(0,255,255,1)]">
<label htmlFor=""> <div className="flex">
<label className="my-1" htmlFor="">
Capital prestado Capital prestado
<input type="number" /> <input
className="ml-3 bg-white rounded-tl-md rounded-bl-md text-black text-right p-1"
placeholder="Introduce cuánto te prestan"
/>
</label> </label>
<label htmlFor=""> <div className="w-[80px] place-self-center p-1 rounded-tr-md rounded-br bg-gray-600 font-light">
€
</div>
</div>
<div className="flex">
<label className="my-1" htmlFor="">
Duración
<input
className="ml-3 bg-white rounded-tl-md rounded-bl-md text-black text-right p-1"
defaultValue={12}
/>
</label>
<div className="w-[80px] place-self-center p-1 rounded-tr-md rounded-br bg-gray-600 font-light">
Meses Meses
<input type="number" /> </div>
</div>
<div className="flex">
<label className="my-1" htmlFor="">
Interés (TIN)
<input
className="ml-3 bg-white rounded-tl-md rounded-bl-md text-black text-right p-1"
defaultValue={5}
/>
</label> </label>
<div className="w-[80px] place-self-center p-1 rounded-tr-md rounded-br bg-gray-600 font-light">
%
</div>
</div>
</form> </form>
</div> </div>
<p className="mt-auto mb-5">Made by me, with lots of love</p>
</div>
); );
}; };