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.
199 lines
8.6 KiB
HTML
199 lines
8.6 KiB
HTML
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
|
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
|
<button
|
|
command="show-modal"
|
|
commandfor="drawer"
|
|
class="rounded-md bg-gray-950/5 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-gray-950/10"
|
|
>
|
|
Open drawer
|
|
</button>
|
|
<el-dialog>
|
|
<dialog
|
|
id="drawer"
|
|
class="fixed inset-0 size-auto max-h-none max-w-none overflow-hidden bg-transparent backdrop:bg-transparent"
|
|
>
|
|
<div
|
|
tabindex="0"
|
|
class="absolute inset-0 pl-10 focus:outline-none sm:pl-16"
|
|
>
|
|
<el-dialog-panel
|
|
class="group/dialog-panel ml-auto block size-full max-w-md transform transition duration-500 ease-in-out data-closed:translate-x-full sm:duration-700"
|
|
>
|
|
<div class="flex h-full flex-col overflow-y-auto bg-white shadow-xl">
|
|
<div class="px-4 py-6 sm:px-6">
|
|
<div class="flex items-start justify-between">
|
|
<h2
|
|
id="slide-over-heading"
|
|
class="text-base font-semibold text-gray-900"
|
|
>
|
|
Profile
|
|
</h2>
|
|
<div class="ml-3 flex h-7 items-center">
|
|
<button
|
|
type="button"
|
|
command="close"
|
|
commandfor="drawer"
|
|
class="relative rounded-md bg-white text-gray-400 hover:text-gray-500 focus-visible:ring-2 focus-visible:ring-indigo-500"
|
|
>
|
|
<span class="absolute -inset-2.5"></span>
|
|
<span class="sr-only">Close panel</span>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-6"
|
|
>
|
|
<path
|
|
d="M6 18 18 6M6 6l12 12"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Main -->
|
|
<div>
|
|
<div class="pb-1 sm:pb-6">
|
|
<div>
|
|
<div class="relative h-40 sm:h-56">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1501031170107-cfd33f0cbdcc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&h=600&q=80"
|
|
alt=""
|
|
class="absolute size-full object-cover"
|
|
/>
|
|
</div>
|
|
<div class="mt-6 px-4 sm:mt-8 sm:flex sm:items-end sm:px-6">
|
|
<div class="sm:flex-1">
|
|
<div>
|
|
<div class="flex items-center">
|
|
<h3 class="text-xl font-bold text-gray-900 sm:text-2xl">
|
|
Ashley Porter
|
|
</h3>
|
|
<span
|
|
class="ml-2.5 inline-block size-2 shrink-0 rounded-full bg-green-400"
|
|
>
|
|
<span class="sr-only">Online</span>
|
|
</span>
|
|
</div>
|
|
<p class="text-sm text-gray-500">@ashleyporter</p>
|
|
</div>
|
|
<div
|
|
class="mt-5 flex flex-wrap space-y-3 sm:space-y-0 sm:space-x-3"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="inline-flex w-full shrink-0 items-center justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:flex-1"
|
|
>
|
|
Message
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="inline-flex w-full flex-1 items-center 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"
|
|
>
|
|
Call
|
|
</button>
|
|
<div class="ml-3 inline-flex sm:ml-0">
|
|
<el-dropdown class="relative inline-block text-left">
|
|
<button
|
|
class="relative inline-flex items-center rounded-md bg-white p-2 text-gray-400 shadow-xs ring-1 ring-gray-300 ring-inset hover:bg-gray-50"
|
|
>
|
|
<span class="absolute -inset-1"></span>
|
|
<span class="sr-only">Open options menu</span>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-5"
|
|
>
|
|
<path
|
|
d="M10 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 8.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM11.5 15.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<el-menu
|
|
anchor="bottom end"
|
|
popover
|
|
class="w-48 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(2)] focus-visible:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
|
|
>
|
|
<div class="py-1">
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
|
>View profile</a
|
|
>
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
|
>Copy profile link</a
|
|
>
|
|
</div>
|
|
</el-menu>
|
|
</el-dropdown>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="px-4 pt-5 pb-5 sm:px-0 sm:pt-0">
|
|
<dl class="space-y-8 px-4 sm:space-y-6 sm:px-6">
|
|
<div>
|
|
<dt
|
|
class="text-sm font-medium text-gray-500 sm:w-40 sm:shrink-0"
|
|
>
|
|
Bio
|
|
</dt>
|
|
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2">
|
|
<p>
|
|
Enim feugiat ut ipsum, neque ut. Tristique mi id elementum
|
|
praesent. Gravida in tempus feugiat netus enim aliquet a,
|
|
quam scelerisque. Dictumst in convallis nec in bibendum
|
|
aenean arcu.
|
|
</p>
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt
|
|
class="text-sm font-medium text-gray-500 sm:w-40 sm:shrink-0"
|
|
>
|
|
Location
|
|
</dt>
|
|
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2">
|
|
New York, NY, USA
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt
|
|
class="text-sm font-medium text-gray-500 sm:w-40 sm:shrink-0"
|
|
>
|
|
Website
|
|
</dt>
|
|
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2">
|
|
ashleyporter.com
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt
|
|
class="text-sm font-medium text-gray-500 sm:w-40 sm:shrink-0"
|
|
>
|
|
Birthday
|
|
</dt>
|
|
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2">
|
|
<time datetime="1988-06-23">June 23, 1988</time>
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-dialog-panel>
|
|
</div>
|
|
</dialog>
|
|
</el-dialog>
|