262 lines
17 KiB
PHP
262 lines
17 KiB
PHP
<nav class="h-full overflow-y-auto mt-3" aria-label="Directory">
|
|
<div class="relative">
|
|
|
|
<div class="sticky top-0 z-10 border-y border-b-gray-200 border-t-gray-100 bg-gray-50 px-3 py-1.5 text-sm font-semibold leading-6 text-gray-900">
|
|
<h3>Instrument Name Here</h3>
|
|
</div>
|
|
|
|
<ul role="list" class="divide-y divide-gray-100">
|
|
|
|
<li class="flex gap-x-4 px-3 py-5 justify-between">
|
|
<div>
|
|
Wind Ensemble 1
|
|
</div>
|
|
<div class="min-w-0 text-right">
|
|
<p class="text-sm font-semibold leading-6 text-gray-900">Student Name</p>
|
|
<p class="mt-1 truncate text-xs leading-5 text-gray-500">School Name</p>
|
|
</div>
|
|
</li>
|
|
|
|
|
|
<li class="flex gap-x-4 px-3 py-5">
|
|
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
|
<div class="min-w-0">
|
|
<p class="text-sm font-semibold leading-6 text-gray-900">Hector Adams</p>
|
|
<p class="mt-1 truncate text-xs leading-5 text-gray-500">hector.adams@example.com</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex gap-x-4 px-3 py-5">
|
|
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1520785643438-5bf77931f493?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
|
<div class="min-w-0">
|
|
<p class="text-sm font-semibold leading-6 text-gray-900">Blake Alexander</p>
|
|
<p class="mt-1 truncate text-xs leading-5 text-gray-500">blake.alexander@example.com</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex gap-x-4 px-3 py-5">
|
|
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
|
<div class="min-w-0">
|
|
<p class="text-sm font-semibold leading-6 text-gray-900">Fabricio Andrews</p>
|
|
<p class="mt-1 truncate text-xs leading-5 text-gray-500">fabricio.andrews@example.com</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="relative">
|
|
<div class="sticky top-0 z-10 border-y border-b-gray-200 border-t-gray-100 bg-gray-50 px-3 py-1.5 text-sm font-semibold leading-6 text-gray-900">
|
|
<h3>B</h3>
|
|
</div>
|
|
<ul role="list" class="divide-y divide-gray-100">
|
|
<li class="flex gap-x-4 px-3 py-5">
|
|
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1501031170107-cfd33f0cbdcc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
|
<div class="min-w-0">
|
|
<p class="text-sm font-semibold leading-6 text-gray-900">Angela Beaver</p>
|
|
<p class="mt-1 truncate text-xs leading-5 text-gray-500">angela.beaver@example.com</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex gap-x-4 px-3 py-5">
|
|
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1506980595904-70325b7fdd90?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
|
<div class="min-w-0">
|
|
<p class="text-sm font-semibold leading-6 text-gray-900">Yvette Blanchard</p>
|
|
<p class="mt-1 truncate text-xs leading-5 text-gray-500">yvette.blanchard@example.com</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex gap-x-4 px-3 py-5">
|
|
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1513910367299-bce8d8a0ebf6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
|
<div class="min-w-0">
|
|
<p class="text-sm font-semibold leading-6 text-gray-900">Lawrence Brooks</p>
|
|
<p class="mt-1 truncate text-xs leading-5 text-gray-500">lawrence.brooks@example.com</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="relative">
|
|
<div class="sticky top-0 z-10 border-y border-b-gray-200 border-t-gray-100 bg-gray-50 px-3 py-1.5 text-sm font-semibold leading-6 text-gray-900">
|
|
<h3>C</h3>
|
|
</div>
|
|
<ul role="list" class="divide-y divide-gray-100">
|
|
<li class="flex gap-x-4 px-3 py-5">
|
|
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1517070208541-6ddc4d3efbcb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
|
<div class="min-w-0">
|
|
<p class="text-sm font-semibold leading-6 text-gray-900">Jeffrey Clark</p>
|
|
<p class="mt-1 truncate text-xs leading-5 text-gray-500">jeffrey.clark@example.com</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex gap-x-4 px-3 py-5">
|
|
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
|
<div class="min-w-0">
|
|
<p class="text-sm font-semibold leading-6 text-gray-900">Kathryn Cooper</p>
|
|
<p class="mt-1 truncate text-xs leading-5 text-gray-500">kathryn.cooper@example.com</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="relative">
|
|
<div class="sticky top-0 z-10 border-y border-b-gray-200 border-t-gray-100 bg-gray-50 px-3 py-1.5 text-sm font-semibold leading-6 text-gray-900">
|
|
<h3>E</h3>
|
|
</div>
|
|
<ul role="list" class="divide-y divide-gray-100">
|
|
<li class="flex gap-x-4 px-3 py-5">
|
|
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1509783236416-c9ad59bae472?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
|
<div class="min-w-0">
|
|
<p class="text-sm font-semibold leading-6 text-gray-900">Alicia Edwards</p>
|
|
<p class="mt-1 truncate text-xs leading-5 text-gray-500">alicia.edwards@example.com</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex gap-x-4 px-3 py-5">
|
|
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
|
<div class="min-w-0">
|
|
<p class="text-sm font-semibold leading-6 text-gray-900">Benjamin Emerson</p>
|
|
<p class="mt-1 truncate text-xs leading-5 text-gray-500">benjamin.emerson@example.com</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex gap-x-4 px-3 py-5">
|
|
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1504703395950-b89145a5425b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
|
<div class="min-w-0">
|
|
<p class="text-sm font-semibold leading-6 text-gray-900">Jillian Erics</p>
|
|
<p class="mt-1 truncate text-xs leading-5 text-gray-500">jillian.erics@example.com</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex gap-x-4 px-3 py-5">
|
|
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
|
<div class="min-w-0">
|
|
<p class="text-sm font-semibold leading-6 text-gray-900">Chelsea Evans</p>
|
|
<p class="mt-1 truncate text-xs leading-5 text-gray-500">chelsea.evans@example.com</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="relative">
|
|
<div class="sticky top-0 z-10 border-y border-b-gray-200 border-t-gray-100 bg-gray-50 px-3 py-1.5 text-sm font-semibold leading-6 text-gray-900">
|
|
<h3>G</h3>
|
|
</div>
|
|
<ul role="list" class="divide-y divide-gray-100">
|
|
<li class="flex gap-x-4 px-3 py-5">
|
|
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
|
<div class="min-w-0">
|
|
<p class="text-sm font-semibold leading-6 text-gray-900">Michael Gillard</p>
|
|
<p class="mt-1 truncate text-xs leading-5 text-gray-500">micheal.gillard@example.com</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex gap-x-4 px-3 py-5">
|
|
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
|
<div class="min-w-0">
|
|
<p class="text-sm font-semibold leading-6 text-gray-900">Dries Giuessepe</p>
|
|
<p class="mt-1 truncate text-xs leading-5 text-gray-500">dries.giuessepe@example.com</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="relative">
|
|
<div class="sticky top-0 z-10 border-y border-b-gray-200 border-t-gray-100 bg-gray-50 px-3 py-1.5 text-sm font-semibold leading-6 text-gray-900">
|
|
<h3>M</h3>
|
|
</div>
|
|
<ul role="list" class="divide-y divide-gray-100">
|
|
<li class="flex gap-x-4 px-3 py-5">
|
|
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1507101105822-7472b28e22ac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
|
<div class="min-w-0">
|
|
<p class="text-sm font-semibold leading-6 text-gray-900">Jenny Harrison</p>
|
|
<p class="mt-1 truncate text-xs leading-5 text-gray-500">jenny.harrison@example.com</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex gap-x-4 px-3 py-5">
|
|
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
|
<div class="min-w-0">
|
|
<p class="text-sm font-semibold leading-6 text-gray-900">Lindsay Hatley</p>
|
|
<p class="mt-1 truncate text-xs leading-5 text-gray-500">lindsay.hatley@example.com</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex gap-x-4 px-3 py-5">
|
|
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
|
<div class="min-w-0">
|
|
<p class="text-sm font-semibold leading-6 text-gray-900">Anna Hill</p>
|
|
<p class="mt-1 truncate text-xs leading-5 text-gray-500">anna.hill@example.com</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="relative">
|
|
<div class="sticky top-0 z-10 border-y border-b-gray-200 border-t-gray-100 bg-gray-50 px-3 py-1.5 text-sm font-semibold leading-6 text-gray-900">
|
|
<h3>S</h3>
|
|
</div>
|
|
<ul role="list" class="divide-y divide-gray-100">
|
|
<li class="flex gap-x-4 px-3 py-5">
|
|
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
|
<div class="min-w-0">
|
|
<p class="text-sm font-semibold leading-6 text-gray-900">Courtney Samuels</p>
|
|
<p class="mt-1 truncate text-xs leading-5 text-gray-500">courtney.samuels@example.com</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex gap-x-4 px-3 py-5">
|
|
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
|
<div class="min-w-0">
|
|
<p class="text-sm font-semibold leading-6 text-gray-900">Tom Simpson</p>
|
|
<p class="mt-1 truncate text-xs leading-5 text-gray-500">tom.simpson@example.com</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="relative">
|
|
<div class="sticky top-0 z-10 border-y border-b-gray-200 border-t-gray-100 bg-gray-50 px-3 py-1.5 text-sm font-semibold leading-6 text-gray-900">
|
|
<h3>T</h3>
|
|
</div>
|
|
<ul role="list" class="divide-y divide-gray-100">
|
|
<li class="flex gap-x-4 px-3 py-5">
|
|
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
|
<div class="min-w-0">
|
|
<p class="text-sm font-semibold leading-6 text-gray-900">Floyd Thompson</p>
|
|
<p class="mt-1 truncate text-xs leading-5 text-gray-500">floyd.thompson@example.com</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex gap-x-4 px-3 py-5">
|
|
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
|
<div class="min-w-0">
|
|
<p class="text-sm font-semibold leading-6 text-gray-900">Leonard Timmons</p>
|
|
<p class="mt-1 truncate text-xs leading-5 text-gray-500">leonard.timmons@example.com</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex gap-x-4 px-3 py-5">
|
|
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
|
<div class="min-w-0">
|
|
<p class="text-sm font-semibold leading-6 text-gray-900">Whitney Trudeau</p>
|
|
<p class="mt-1 truncate text-xs leading-5 text-gray-500">whitney.trudeau@example.com</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="relative">
|
|
<div class="sticky top-0 z-10 border-y border-b-gray-200 border-t-gray-100 bg-gray-50 px-3 py-1.5 text-sm font-semibold leading-6 text-gray-900">
|
|
<h3>W</h3>
|
|
</div>
|
|
<ul role="list" class="divide-y divide-gray-100">
|
|
<li class="flex gap-x-4 px-3 py-5">
|
|
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
|
<div class="min-w-0">
|
|
<p class="text-sm font-semibold leading-6 text-gray-900">Kristin Watson</p>
|
|
<p class="mt-1 truncate text-xs leading-5 text-gray-500">kristin.watson@example.com</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex gap-x-4 px-3 py-5">
|
|
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
|
<div class="min-w-0">
|
|
<p class="text-sm font-semibold leading-6 text-gray-900">Emily Wilson</p>
|
|
<p class="mt-1 truncate text-xs leading-5 text-gray-500">emily.wilson@example.com</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="relative">
|
|
<div class="sticky top-0 z-10 border-y border-b-gray-200 border-t-gray-100 bg-gray-50 px-3 py-1.5 text-sm font-semibold leading-6 text-gray-900">
|
|
<h3>Y</h3>
|
|
</div>
|
|
<ul role="list" class="divide-y divide-gray-100">
|
|
<li class="flex gap-x-4 px-3 py-5">
|
|
<img class="h-12 w-12 flex-none rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1505840717430-882ce147ef2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
|
<div class="min-w-0">
|
|
<p class="text-sm font-semibold leading-6 text-gray-900">Emma Young</p>
|
|
<p class="mt-1 truncate text-xs leading-5 text-gray-500">emma.young@example.com</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|