Styled Card - Copy this React, Mui Component to your project
<html-lang="en">-<head>-<meta-charset="UTF-8">-<meta-name="viewport"-content="width=device-width,-initial-scale=1.0">-<title>Quiz-Result</title>-<script-src="https://cdn.tailwindcss.com"></script>-<link-rel="stylesheet"-href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">-</head>-<body-class="bg-gray-100">-<div-class="max-w-2xl-mx-auto-mt-8-bg-white-rounded-lg-shadow-md">-<div-class="p-6-border-b-border-gray-200">-<div-class="flex-items-center-mb-4">-<div-class="w-12-h-12-rounded-full-bg-blue-500-flex-items-center-justify-center-text-white-mr-4">-AI-</div>-<div>-<h2-class="text-lg-font-bold">Adit-Irawan</h2>-<span-class="text-sm-text-gray-600-bg-gray-200-py-1-px-2-rounded">Design</span>-<span-class="text-sm-text-gray-600">Jr-UI/UX-Designer</span>-</div>-</div>-<h1-class="text-xl-font-bold-mb-1">Figma-skill---How-to-make-great-design</h1>-<div-class="flex-items-center-justify-between-text-gray-500">-<div-class="flex-items-center-space-x-3">-<span>Finished</span>-<span>Aug-03,-2023</span>-<span>•</span>-<span>10:00-AM</span>-<span>•</span>-<span>20-Questions</span>-</div>-<div-class="flex-items-center-space-x-6">-<div-class="flex-items-center-space-x-1-text-green-500">-<i-class="fas-fa-check-circle"></i>-<span>Accuracy-85%</span>-</div>-<div-class="flex-items-center-space-x-1-text-yellow-500">-<i-class="fas-fa-star"></i>-<span>Point-145</span>-</div>-<div-class="flex-items-center-space-x-1-text-gray-500">-<span>Answered-19/20</span>-</div>-</div>-</div>-</div>-<div-class="flex-flex-wrap-items-center-mx-6-my-4-space-x-2">-<!---Quiz-Answer-Markers--->-<div-class="p-2-bg-green-500-text-white-rounded-md">1</div>-<div-class="p-2-bg-green-500-text-white-rounded-md">2</div>-<div-class="p-2-bg-green-500-text-white-rounded-md">3</div>-<div-class="p-2-bg-green-500-text-white-rounded-md">4</div>-<div-class="p-2-bg-green-500-text-white-rounded-md">5</div>-<div-class="p-2-bg-green-500-text-white-rounded-md">6</div>-<div-class="p-2-bg-green-500-text-white-rounded-md">7</div>-<div-class="p-2-bg-green-500-text-white-rounded-md">8</div>-<div-class="p-2-bg-green-500-text-white-rounded-md">9</div>-<div-class="p-2-bg-green-500-text-white-rounded-md">10</div>-<div-class="p-2-bg-gray-400-text-white-rounded-md">11</div>-<div-class="p-2-bg-green-500-text-white-rounded-md">12</div>-<div-class="p-2-bg-green-500-text-white-rounded-md">13</div>-<div-class="p-2-bg-red-500-text-white-rounded-md">14</div>-<div-class="p-2-bg-green-500-text-white-rounded-md">15</div>-<div-class="p-2-bg-red-500-text-white-rounded-md">16</div>-<div-class="p-2-bg-green-500-text-white-rounded-md">17</div>-<div-class="p-2-bg-green-500-text-white-rounded-md">18</div>-<div-class="p-2-bg-gray-400-text-white-rounded-md">19</div>-<div-class="p-2-bg-green-500-text-white-rounded-md">20</div>-</div>-<div-class="mx-6-mb-4-space-y-2-text-sm-text-gray-600">-<div><span-class="text-green-500">●-Correct</span>-24-•-72%</div>-<div><span-class="text-yellow-500">●-Half-Correct</span>-1-•-3%</div>-<div><span-class="text-blue-500">●-Need-Review</span>-1-•-3%</div>-<div><span-class="text-red-500">●-Incorrect</span>-4-•-12%</div>-<div><span-class="text-gray-500">●-Skipped</span>-1-•-3%</div>-</div>-<div-class="mx-6-my-4-rounded-lg-shadow-bg-white">-<!---Question-1--->-<div-class="p-4-border-b-border-gray-200">-<div-class="flex-items-center-justify-between">-<div-class="flex-items-center-text-lg-font-semibold">-<span-class="mr-2">❓-Question-1</span>-<span-class="text-green-500">✔-Correct</span>-</div>-<div-class="flex-items-center-space-x-4">-<div-class="text-gray-600">📄-Multiple-Choice</div>-<div-class="text-gray-600">⏱️-Time-32s</div>-<div-class="text-orange-500">🟡-1-point</div>-</div>-</div>-<p-class="mt-2">What-does-UI-stand-for-in-the-context-of-design?</p>-</div>-<!---Question-2--->-<div-class="p-4-border-b-border-gray-200">-<div-class="flex-items-center-justify-between">-<div-class="flex-items-center-text-lg-font-semibold">-<span-class="mr-2">❓-Question-2</span>-<span-class="text-green-500">✔-Correct</span>-</div>-<div-class="flex-items-center-space-x-4">-<div-class="text-gray-600">📄-Multiple-Choice</div>-<div-class="text-gray-600">⏱️-Time-32s</div>-<div-class="text-orange-500">🟡-1-point</div>-</div>-</div>-<p-class="mt-2">Which-aspect-of-UI-design-involves-choosing-colors,-typography,-and-creating-icons-for-a-digital-interface?</p>-</div>-<!---Question-3--->-<div-class="p-4">-<div-class="flex-items-center-justify-between">-<div-class="flex-items-center-text-lg-font-semibold">-<span-class="mr-2">❓-Question-3</span>-<span-class="text-gray-500">⚪-Skipped</span>-</div>-<div-class="flex-items-center-space-x-4">-<div-class="text-gray-600">📝-Fill-the-blank</div>-<div-class="text-orange-500">🟡-1-point</div>-</div>-</div>-</div>-</div>-</div>-</body>-</html>
