Raloux Nouebissie nraloux

E-commerce Product Page list / grid option

This is a UX design for a product page and again minimalism is key here so that the focus is all on the product images.

	<div>
	<input id="passInput" type="password" placeholder="Enter password">
	<p>
	Password should contain at least
	<span id="length" class="invalid">8 characters</span>,
	<span id="capital" class="invalid">1 upper case letter</span>,
	<span id="letter" class="invalid">1 lower case letter</span>,
	<span id="number" class="invalid">1 number</span>, and
	<span id="character" class="invalid">1 special character</span>
	</p>

	<body class="font-mono bg-gray-400">
	<!-- Container -->
	<div class="container mx-auto">
	<div class="flex justify-center px-6 my-12">
	<!-- Row -->
	<div class="w-full xl:w-3/4 lg:w-11/12 flex">
	<!-- Col -->
	<div
	class="w-full h-auto bg-gray-400 hidden lg:block lg:w-5/12 bg-cover rounded-l-lg"
	style="background-image: url('https://source.unsplash.com/Mv9hjnEUHR4/600x800')"

	<div class="flex flex-col">
	<div class="flex bg-yellow-lighter max-w-sm mb-4">
	<div class="w-16 bg-yellow">
	<div class="p-4">
	<svg class="h-8 w-8 text-white fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M503.191 381.957c-.055-.096-.111-.19-.168-.286L312.267 63.218l-.059-.098c-9.104-15.01-23.51-25.577-40.561-29.752-17.053-4.178-34.709-1.461-49.72 7.644a66 66 0 0 0-22.108 22.109l-.058.097L9.004 381.669c-.057.096-.113.191-.168.287-8.779 15.203-11.112 32.915-6.569 49.872 4.543 16.958 15.416 31.131 30.62 39.91a65.88 65.88 0 0 0 32.143 8.804l.228.001h381.513l.227.001c36.237-.399 65.395-30.205 64.997-66.444a65.86 65.86 0 0 0-8.804-32.143zm-56.552 57.224H65.389a24.397 24.397 0 0 1-11.82-3.263c-5.635-3.253-9.665-8.507-11.349-14.792a24.196 24.196 0 0 1 2.365-18.364L235.211 84.53a24.453 24.453 0 0 1 8.169-8.154c5.564-3.374 12.11-4.381 18.429-2.833 6.305 1.544 11.633 5.444 15.009 10.986L467.44 402.76a24.402 24.402 0 0 1 3.194 11.793c.149 13.401-10.608 24.4

	<div class="flex items-start">
	<div class="flex-shrink-0">
	<div class="inline-block relative">
	<div class="relative w-16 h-16 rounded-full overflow-hidden">
	<img class="absolute top-0 left-0 w-full h-full bg-cover object-fit object-cover" src="https://picsum.photos/id/646/200/200" alt="Profile picture">
	<div class="absolute top-0 left-0 w-full h-full rounded-full shadow-inner"></div>
	</div>
	<svg class="fill-current text-white bg-green-600 rounded-full p-1 absolute bottom-0 right-0 w-6 h-6 -mx-1 -my-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
	<path d="M19 11a7.5 7.5 0 0 1-3.5 5.94L10 20l-5.5-3.06A7.5 7.5 0 0 1 1 11V3c3.38 0 6.5-1.12 9-3 2.5 1.89 5.62 3 9 3v8zm-9 1.08l2.92 2.04-1.03-3.41 2.84-2.15-3.56-.08L10 5.12 8.83 8.48l-3.56.08L8.1 10.7l-1.03 3.4L10 12.09z"/>
	</svg>

	<style>
	.custom-label input:checked + svg {
	display: block !important;
	}
	</style>
	<label class="custom-label flex">
	<div class="bg-white shadow w-6 h-6 p-1 flex justify-center items-center mr-2">
	<input type="checkbox" class="hidden" checked>
	<svg class="hidden w-4 h-4 text-green-600 pointer-events-none" viewBox="0 0 172 172"><g fill="none" stroke-width="none" stroke-miterlimit="10" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode:normal"><path d="M0 172V0h172v172z"/><path d="M145.433 37.933L64.5 118.8658 33.7337 88.0996l-10.134 10.1341L64.5 139.1341l91.067-91.067z" fill="currentColor" stroke-width="1"/></g></svg>
	</div>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://unpkg.com/[email protected]/dist/tailwind.min.css" rel="stylesheet">
	</head>
	<body class="h-screen overflow-hidden flex items-center justify-center" style="background: #edf2f7;">
	<div class="flex w-full h-screen items-center justify-center bg-grey-lighter">