Skip to content

Instantly share code, notes, and snippets.

@maykbrito

maykbrito/index.html

Last active March 26, 2022 18:20
Show Gist options
  • Save maykbrito/4541dd9f623a434d3697247ca4683ea5 to your computer and use it in GitHub Desktop.
Save maykbrito/4541dd9f623a434d3697247ca4683ea5 to your computer and use it in GitHub Desktop.
Download ZIP
Live Carreira Front-end Exterior na Prática
Raw
index.html
<html class="h-full bg-white">
<head>
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="h-full overflow-hidden">
<form class="mt-6 flex space-x-4" action="#">
<div class="flex-1 min-w-0">
<label for="search" class="sr-only">Search</label>
<div class="relative rounded-md shadow-sm">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<!-- Heroicon name: solid/search -->
<svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
</svg>
</div>
<input type="search" name="search" id="search" class="focus:ring-pink-500 focus:border-pink-500 block w-full p-3 pl-10 sm:text-sm border-gray-300 rounded-md" placeholder="Search">
</div>
</div>
</form>
<ul role="list" class="relative z-0 divide-y divide-gray-200">
<li>
<div class="relative px-6 py-5 flex items-center space-x-3 hover:bg-gray-50 focus-within:ring-2 focus-within:ring-inset focus-within:ring-pink-500">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
</div>
<div class="flex-1 min-w-0">
<a href="#" class="focus:outline-none">
<!-- Extend touch target to entire panel -->
<span class="absolute inset-0" aria-hidden="true"></span>
<p class="text-sm font-medium text-gray-900">Leslie Abbott</p>
<p class="text-sm text-gray-500 truncate">Co-Founder / CEO</p>
</a>
</div>
</div>
</li>
<li>
<div class="relative px-6 py-5 flex items-center space-x-3 hover:bg-gray-50 focus-within:ring-2 focus-within:ring-inset focus-within:ring-pink-500">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
</div>
<div class="flex-1 min-w-0">
<a href="#" class="focus:outline-none">
<!-- Extend touch target to entire panel -->
<span class="absolute inset-0" aria-hidden="true"></span>
<p class="text-sm font-medium text-gray-900">Leslie Abbott</p>
<p class="text-sm text-gray-500 truncate">Co-Founder / CEO</p>
</a>
</div>
</div>
</li>
<li>
<div class="relative px-6 py-5 flex items-center space-x-3 hover:bg-gray-50 focus-within:ring-2 focus-within:ring-inset focus-within:ring-pink-500">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
</div>
<div class="flex-1 min-w-0">
<a href="#" class="focus:outline-none">
<!-- Extend touch target to entire panel -->
<span class="absolute inset-0" aria-hidden="true"></span>
<p class="text-sm font-medium text-gray-900">Leslie Abbott</p>
<p class="text-sm text-gray-500 truncate">Co-Founder / CEO</p>
</a>
</div>
</div>
</li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment