public-ui-kolibri

<h1>HTML elements</h1> <div class="mt-10 flex flex-col w-1/3 gap-5"> <div *ngFor="let input of numberOfInputs" class="flex flex-col"> <label class="block mb-2 text-sm font-medium">TextInput #{{ input }}</label> <div class="w-full max-w-sm min-w-[200px]"> <input class="w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-300 shadow-sm focus:shadow" placeholder="Type here..." /> </div> </div> <div *ngFor="let input of numberOfInputs" class="flex flex-col"> <label class="block mb-2 text-sm font-medium">NumberInput #{{ input }}</label> <div class="w-full max-w-sm min-w-[200px]"> <input class="w-full bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-300 shadow-sm focus:shadow" type="number" /> </div> </div> <div *ngFor="let check of numberOfInputs"> <label for="checkbox{{ check }}">Checkbox #{{ check }}</label> <input type="checkbox" id="checkbox{{ check }}" name="checkbox{{ check }}" (change)="onValueChange($event)" /> </div> </div>