Horizontal Scroll of Students

.svelte

<script>
	let name = 'world';

	const students = [
		{ avatarUrl: 'https://images.unsplash.com/photo-1599566150163-29194dcaad36?auto=format&fit=crop&q=60&w=800&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8YXZhdGFyc3xlbnwwfHwwfHx8Mg%3D%3D', name: 'Ifeanyi' },
		{ avatarUrl: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&q=60&w=800&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8YXZhdGFyc3xlbnwwfHwwfHx8Mg%3D%3D', name: 'John' },
		{ avatarUrl: '', name: 'Tunji' },
		{ avatarUrl: '', name: 'Trump' },
		{ avatarUrl: '', name: 'Buhari' },
	]

	let studentSelected = 0;
</script>

<svelte:head>
<script src="https://cdn.tailwindcss.com"></script>
</svelte:head>

<div class="flex items-center gap-2">
	{#each students as student, i}
	<button on:click={() => (studentSelected = i)}>
		<img src={student.avatarUrl} class="w-10 h-10 rounded-full" />
		<p>{student.name}</p>
	</button>
{/each}
</div>

<h1 class="text-3xl mt-5">Hello {students[studentSelected].name}!</h1>