Full Functionality HTML Component
in measure ments integrate this style and remove the bar in it and keep min alert and max alert in it <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <!-- Temperature --> <div class="space-y-4 p-4 rounded-xl bg-blue-50/50 border border-blue-100"> <div class="flex items-center justify-between"> <h3 class="font-semibold text-slate-800">Temperature</h3> <div class="relative inline-block w-12 h-6"> <input type="checkbox" class="peer sr-only" id="tempAlert"> <label for="tempAlert" class="absolute inset-0 rounded-full bg-slate-300 peer-checked:bg-blue-500 transition-colors cursor-pointer"></label> <div class="absolute left-1 top-1 w-4 h-4 rounded-full bg-white transition-transform peer-checked:translate-x-6"></div> </div> </div> <div class="flex gap-2"> <div class="flex-1"> <input type="number" placeholder="Value" class="w-full px-3 py-2 rounded-lg border border-slate-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> </div> <select class="px-3 py-2 rounded-lg border border-slate-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> <option>°C</option> <option>°F</option> </select> </div> <div class="space-y-2"> <input type="range" min="0" max="100" value="50" class="w-full h-2 rounded-lg appearance-none cursor-pointer bg-blue-200"> <div class="flex justify-between text-sm text-slate-600"> <span>Min: 0°C</span> <span>Max: 100°C</span> </div> </div> </div> <!-- Pressure --> <div class="space-y-4 p-4 rounded-xl bg-emerald-50/50 border border-emerald-100"> <div class="flex items-center justify-between"> <h3 class="font-semibold text-slate-800">Pressure</h3> <div class="relative inline-block w-12 h-6"> <input type="checkbox" class="peer sr-only" id="pressureAlert"> <label for="pressureAlert" class="absolute inset-0 rounded-full bg-slate-300 peer-checked:bg-emerald-500 transition-colors cursor-pointer"></label> <div class="absolute left-1 top-1 w-4 h-4 rounded-full bg-white transition-transform peer-checked:translate-x-6"></div> </div> </div> <div class="flex gap-2"> <div class="flex-1"> <input type="number" placeholder="Value" class="w-full px-3 py-2 rounded-lg border border-slate-300 focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500"> </div> <select class="px-3 py-2 rounded-lg border border-slate-300 focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500"> <option>Bar</option> <option>PSI</option> </select> </div> <div class="space-y-2"> <input type="range" min="0" max="100" value="50" class="w-full h-2 rounded-lg appearance-none cursor-pointer bg-emerald-200"> <div class="flex justify-between text-sm text-slate-600"> <span>Min: 0 Bar</span> <span>Max: 100 Bar</span> </div> </div> </div> <!-- Humidity --> <div class="space-y-4 p-4 rounded-xl bg-purple-50/50 border border-purple-100"> <div class="flex items-center justify-between"> <h3 class="font-semibold text-slate-800">Humidity</h3> <div class="relative inline-block w-12 h-6"> <input type="checkbox" class="peer sr-only" id="humidityAlert"> <label for="humidityAlert" class="absolute inset-0 rounded-full bg-slate-300 peer-checked:bg-purple-500 transition-colors cursor-pointer"></label> <div class="absolute left-1 top-1 w-4 h-4 rounded-full bg-white transition-transform peer-checked:translate-x-6"></div> </div> </div> <div class="flex gap-2"> <div class="flex-1"> <input type="number" placeholder="Value" class="w-full px-3 py-2 rounded-lg border border-slate-300 focus:ring-2 focus:ring-purple-500 focus:border-purple-500"> </div> <select class="px-3 py-2 rounded-lg border border-slate-300 focus:ring-2 focus:ring-purple-500 focus:border-purple-500"> <option>%RH</option> </select> </div> <div class="space-y-2"> <input type="range" min="0" max="100" value="50" class="w-full h-2 rounded-lg appearance-none cursor-pointer bg-purple-200"> <div class="flex justify-between text-sm text-slate-600"> <span>Min: 0%</span> <span>Max: 100%</span> </div> </div> </div> in tegrate