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

56
src/App.jsx
View file

@ -3,8 +3,8 @@ import AppSubHeader from "./components/AppSubHeader";
const App = () => {
return (
<div className="flex flex-col justify-center items-center ">
<div className="flex flex-col justify-center items-center my-5">
<div className="flex flex-col min-h-screen justify-center items-center ">
<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>
<AppHeader />
</div>
@ -12,17 +12,47 @@ const App = () => {
<AppSubHeader />
</div>
</div>
<div></div>
<form className="flex flex-col justify-end items-end my-5">
<label htmlFor="">
Capital prestado
<input type="number" />
</label>
<label htmlFor="">
Meses
<input type="number" />
</label>
</form>
<div className="p-5 bg-gray-50 rounded-3xl border border-gray-400">
<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)]">
<div className="flex">
<label className="my-1" htmlFor="">
Capital prestado
<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>
<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
</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>
<div className="w-[80px] place-self-center p-1 rounded-tr-md rounded-br bg-gray-600 font-light">
%
</div>
</div>
</form>
</div>
<p className="mt-auto mb-5">Made by me, with lots of love</p>
</div>
);
};