You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
3.1 KiB
HTML
76 lines
3.1 KiB
HTML
<div>
|
|
<div>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1444628838545-ac4016a5418a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80"
|
|
alt=""
|
|
class="h-32 w-full object-cover lg:h-48"
|
|
/>
|
|
</div>
|
|
<div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
|
|
<div class="-mt-12 sm:-mt-16 sm:flex sm:items-end sm:space-x-5">
|
|
<div class="flex">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80"
|
|
alt=""
|
|
class="size-24 rounded-full ring-4 ring-white sm:size-32"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="mt-6 sm:flex sm:min-w-0 sm:flex-1 sm:items-center sm:justify-end sm:space-x-6 sm:pb-1"
|
|
>
|
|
<div class="mt-6 min-w-0 flex-1 sm:hidden md:block">
|
|
<h1 class="truncate text-2xl font-bold text-gray-900">
|
|
Ricardo Cooper
|
|
</h1>
|
|
</div>
|
|
<div
|
|
class="mt-6 flex flex-col justify-stretch space-y-3 sm:flex-row sm:space-y-0 sm:space-x-4"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="inline-flex justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset hover:bg-gray-50"
|
|
>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="mr-1.5 -ml-0.5 size-5 text-gray-400"
|
|
>
|
|
<path
|
|
d="M3 4a2 2 0 0 0-2 2v1.161l8.441 4.221a1.25 1.25 0 0 0 1.118 0L19 7.162V6a2 2 0 0 0-2-2H3Z"
|
|
/>
|
|
<path
|
|
d="m19 8.839-7.77 3.885a2.75 2.75 0 0 1-2.46 0L1 8.839V14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8.839Z"
|
|
/>
|
|
</svg>
|
|
<span>Message</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="inline-flex justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset hover:bg-gray-50"
|
|
>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="mr-1.5 -ml-0.5 size-5 text-gray-400"
|
|
>
|
|
<path
|
|
d="M2 3.5A1.5 1.5 0 0 1 3.5 2h1.148a1.5 1.5 0 0 1 1.465 1.175l.716 3.223a1.5 1.5 0 0 1-1.052 1.767l-.933.267c-.41.117-.643.555-.48.95a11.542 11.542 0 0 0 6.254 6.254c.395.163.833-.07.95-.48l.267-.933a1.5 1.5 0 0 1 1.767-1.052l3.223.716A1.5 1.5 0 0 1 18 15.352V16.5a1.5 1.5 0 0 1-1.5 1.5H15c-1.149 0-2.263-.15-3.326-.43A13.022 13.022 0 0 1 2.43 8.326 13.019 13.019 0 0 1 2 5V3.5Z"
|
|
clip-rule="evenodd"
|
|
fill-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span>Call</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-6 hidden min-w-0 flex-1 sm:block md:hidden">
|
|
<h1 class="truncate text-2xl font-bold text-gray-900">Ricardo Cooper</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|