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.
120 lines
5.1 KiB
HTML
120 lines
5.1 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> -->
|
|
<form action="#">
|
|
<el-tab-group>
|
|
<div class="group flex items-center">
|
|
<el-tab-list class="flex gap-2">
|
|
<button
|
|
class="rounded-md border border-transparent bg-white px-3 py-1.5 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-900 aria-selected:bg-gray-100 aria-selected:text-gray-900 aria-selected:hover:bg-gray-200"
|
|
>
|
|
Write
|
|
</button>
|
|
<button
|
|
class="rounded-md border border-transparent bg-white px-3 py-1.5 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-900 aria-selected:bg-gray-100 aria-selected:text-gray-900 aria-selected:hover:bg-gray-200"
|
|
>
|
|
Preview
|
|
</button>
|
|
</el-tab-list>
|
|
|
|
<!-- These buttons are here simply as examples and don't actually do anything. -->
|
|
<div
|
|
class="ml-auto hidden items-center space-x-5 group-has-[*:first-child[aria-selected='true']]:flex"
|
|
>
|
|
<div class="flex items-center">
|
|
<button
|
|
type="button"
|
|
class="-m-2.5 inline-flex size-10 items-center justify-center rounded-full text-gray-400 hover:text-gray-500"
|
|
>
|
|
<span class="sr-only">Insert link</span>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-5"
|
|
>
|
|
<path
|
|
d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"
|
|
/>
|
|
<path
|
|
d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<button
|
|
type="button"
|
|
class="-m-2.5 inline-flex size-10 items-center justify-center rounded-full text-gray-400 hover:text-gray-500"
|
|
>
|
|
<span class="sr-only">Insert code</span>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-5"
|
|
>
|
|
<path
|
|
d="M6.28 5.22a.75.75 0 0 1 0 1.06L2.56 10l3.72 3.72a.75.75 0 0 1-1.06 1.06L.97 10.53a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Zm7.44 0a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L17.44 10l-3.72-3.72a.75.75 0 0 1 0-1.06ZM11.377 2.011a.75.75 0 0 1 .612.867l-2.5 14.5a.75.75 0 0 1-1.478-.255l2.5-14.5a.75.75 0 0 1 .866-.612Z"
|
|
clip-rule="evenodd"
|
|
fill-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<button
|
|
type="button"
|
|
class="-m-2.5 inline-flex size-10 items-center justify-center rounded-full text-gray-400 hover:text-gray-500"
|
|
>
|
|
<span class="sr-only">Mention someone</span>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-5"
|
|
>
|
|
<path
|
|
d="M5.404 14.596A6.5 6.5 0 1 1 16.5 10a1.25 1.25 0 0 1-2.5 0 4 4 0 1 0-.571 2.06A2.75 2.75 0 0 0 18 10a8 8 0 1 0-2.343 5.657.75.75 0 0 0-1.06-1.06 6.5 6.5 0 0 1-9.193 0ZM10 7.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5Z"
|
|
clip-rule="evenodd"
|
|
fill-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<el-tab-panels class="mt-2 block">
|
|
<div class="-m-0.5 rounded-lg p-0.5">
|
|
<label for="comment" class="sr-only">Comment</label>
|
|
<div>
|
|
<textarea
|
|
id="comment"
|
|
name="comment"
|
|
rows="5"
|
|
placeholder="Add your comment..."
|
|
class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
|
|
></textarea>
|
|
</div>
|
|
</div>
|
|
<div hidden class="-m-0.5 rounded-lg p-0.5">
|
|
<div class="border-b border-gray-200">
|
|
<div class="mx-px mt-px px-3 pt-2 pb-12 text-sm text-gray-800">
|
|
Preview content will render here.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-tab-panels>
|
|
</el-tab-group>
|
|
<div class="mt-2 flex justify-end">
|
|
<button
|
|
type="submit"
|
|
class="inline-flex items-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"
|
|
>
|
|
Post
|
|
</button>
|
|
</div>
|
|
</form>
|