<script>
</script>

<div class="w-full h-full bg-red-100 dark:bg-slate-800 rounded-xl dark:text-slate-200">
	<div class="p-3 rounded-t-xl bg-indigo-200 dark:bg-slate-700">
		<h1 class="font-semibold">Profile:</h1>
	</div>
	<div class="p-2">
		<p><span class="font-bold">Name: </span>DutchEllie</p>
		<p><span class="font-bold">Country: </span>The Netherlands</p>
		<p><span class="font-bold">Occupation: </span>Student</p>
		<div>
			<span class="font-bold">Languages:</span>
			<ul class="grid grid-cols-10 list-none">
				<div class="col-start-2 col-span-3">
					<p>🌍</p>
					<p>Dutch</p>
					<p>English</p>
					<p>Japanese</p>
					<p>💻</p>
					<p>Go</p>
					<p>C/C++</p>
					<p>JS</p>
				</div>
				<div class="col-span-5">
					<div class="mb-1 h-5 flex-grow rounded-xl">
						<div class="h-5 w-7/12  rounded-xl" />
					</div>
					<div class="mb-1 h-5 flex-grow bg-indigo-900 rounded-xl">
						<div class="h-5 w-12/12 bg-indigo-300 rounded-xl" />
					</div>
					<div class="mb-1 h-5 flex-grow bg-indigo-900 rounded-xl">
						<div class="h-5 w-11/12 bg-indigo-300 rounded-xl" />
					</div>
					<div class="mb-1 h-5 flex-grow bg-indigo-900 rounded-xl">
						<div class="h-5 w-2/12 bg-indigo-300 rounded-xl" />
					</div>
					<div class="mb-1 h-5 flex-grow rounded-xl">
						<div class="h-5 w-7/12  rounded-xl" />
					</div>
					<div class="mb-1 h-5 flex-grow bg-indigo-900 rounded-xl">
						<div class="h-5 w-11/12 bg-indigo-300 rounded-xl" />
					</div>
					<div class="mb-1 h-5 flex-grow bg-indigo-900 rounded-xl">
						<div class="h-5 w-8/12 bg-indigo-300 rounded-xl" />
					</div>
					<div class="mb-1 h-5 flex-grow bg-indigo-900 rounded-xl">
						<div class="h-5 w-4/12 bg-indigo-300 rounded-xl" />
					</div>
				</div>
			</ul>
		</div>
	</div>
</div>

<style>
	.break {
		width: 0;
	}
</style>
