Cool 3D card example.

tests/reset.css

@@ -8,17 +8,16 @@ button,input,select,textarea {
 	margin: 0;
 	font: inherit;
 }
-
 html {
 	font-size: 10px; /* 1.8 rem = 18px */
 	text-size-adjust: none; /* Fixes chrome on mobile. */
 	-webkit-text-size-adjust: none; /* Fixes safari on mobile. */
 	-moz-text-size-adjust: none; /* Firefox works fine, but for consistency. */
 	background: #adadad;
 }
-
 /* Custom for showcase. */
 body {
+	font-family: system-ui, sans-serif;
 	font-size: 2rem;
 	padding: 1rem;
 	background: #adadad;
@@ -83,3 +82,36 @@ button.close:disabled {
 	border-bottom: 0.5rem solid hsl(345deg 0% 18%);
 	transform: translateY(0.2rem);
 }
+.card {
+	position: relative;
+	width: 300px;
+	height: 400px;
+	padding: 1em;
+	margin: 2em;
+	font-weight: bold;
+	text-align: right;
+	text-shadow: 0 0 4px #000;
+	color: #ddd;
+	box-shadow: 0 1px 5px #00000099;
+	border-radius: 10px;
+	background: url(https://i.postimg.cc/MHKFqnq6/1679116297740936.png) center;
+	background-size: cover;
+	cursor: pointer;
+	transition-duration: 300ms;
+	transition-property: transform, box-shadow;
+	transition-timing-function: ease-out;
+	transform: rotate3d(0);
+}
+.card :hover {
+	transition-duration: 150ms;
+	box-shadow: 0 5px 20px 5px #00000044;
+}
+.card > div {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	left: 0;
+	top: 0;
+	border-radius: 10px;
+	background-image: radial-gradient(circle at 90% -20%, #ffffff33, #0000000f);
+}