learning
/
tailwind-ai
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

adding layout

Browse Source
drew/test-it
Drew Bednar 3 months ago
parent 6e8ab2c8a2
commit bfc201b7a4
38 changed files with 633 additions and 0 deletions
Show Stats Download Patch File Download Diff File

5
application_ui/layout/cards/basic_card.html
Unescape Escape View File

@ -0,0 +1,5 @@
<div class="overflow-hidden rounded-lg bg-white shadow-sm">
<div class="px-4 py-5 sm:p-6">
<!-- Content goes here -->
</div>
</div>

6
application_ui/layout/cards/card_edge_to_edge_on_mobile.html
Unescape Escape View File

@ -0,0 +1,6 @@
<!-- Be sure to use this with a layout container that is full-width on mobile -->
<div class="overflow-hidden bg-white shadow-sm sm:rounded-lg">
<div class="px-4 py-5 sm:p-6">
<!-- Content goes here -->
</div>
</div>

11
application_ui/layout/cards/card_with_footer.html
Unescape Escape View File

@ -0,0 +1,11 @@
<div
class="divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow-sm"
>
<div class="px-4 py-5 sm:p-6">
<!-- Content goes here -->
</div>
<div class="px-4 py-4 sm:px-6">
<!-- Content goes here -->
<!-- We use less vertical padding on card footers at all sizes than on headers or body sections -->
</div>
</div>

9
application_ui/layout/cards/card_with_gray_body.html
Unescape Escape View File

@ -0,0 +1,9 @@
<div class="overflow-hidden rounded-lg bg-white shadow-sm">
<div class="px-4 py-5 sm:px-6">
<!-- Content goes here -->
<!-- We use less vertical padding on card headers on desktop than on body sections -->
</div>
<div class="bg-gray-50 px-4 py-5 sm:p-6">
<!-- Content goes here -->
</div>
</div>

9
application_ui/layout/cards/card_with_gray_footer.html
Unescape Escape View File

@ -0,0 +1,9 @@
<div class="overflow-hidden rounded-lg bg-white shadow-sm">
<div class="px-4 py-5 sm:p-6">
<!-- Content goes here -->
</div>
<div class="bg-gray-50 px-4 py-4 sm:px-6">
<!-- Content goes here -->
<!-- We use less vertical padding on card footers at all sizes than on headers or body sections -->
</div>
</div>

11
application_ui/layout/cards/card_with_header.html
Unescape Escape View File

@ -0,0 +1,11 @@
<div
class="divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow-sm"
>
<div class="px-4 py-5 sm:px-6">
<!-- Content goes here -->
<!-- We use less vertical padding on card headers on desktop than on body sections -->
</div>
<div class="px-4 py-5 sm:p-6">
<!-- Content goes here -->
</div>
</div>

15
application_ui/layout/cards/card_with_heeader_and_footer.html
Unescape Escape View File

@ -0,0 +1,15 @@
<div
class="divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow-sm"
>
<div class="px-4 py-5 sm:px-6">
<!-- Content goes here -->
<!-- We use less vertical padding on card headers on desktop than on body sections -->
</div>
<div class="px-4 py-5 sm:p-6">
<!-- Content goes here -->
</div>
<div class="px-4 py-4 sm:px-6">
<!-- Content goes here -->
<!-- We use less vertical padding on card footers at all sizes than on headers or body sections -->
</div>
</div>

5
application_ui/layout/cards/well.html
Unescape Escape View File

@ -0,0 +1,5 @@
<div class="overflow-hidden rounded-lg bg-gray-50">
<div class="px-4 py-5 sm:p-6">
<!-- Content goes here -->
</div>
</div>

6
application_ui/layout/cards/well_edge_to_edge_on_mobile.html
Unescape Escape View File

@ -0,0 +1,6 @@
<!-- Be sure to use this with a layout container that is full-width on mobile -->
<div class="overflow-hidden bg-gray-50 sm:rounded-lg">
<div class="px-4 py-5 sm:p-6">
<!-- Content goes here -->
</div>
</div>

5
application_ui/layout/cards/well_on_gray.html
Unescape Escape View File

@ -0,0 +1,5 @@
<div class="overflow-hidden rounded-lg bg-gray-200">
<div class="px-4 py-5 sm:p-6">
<!-- Content goes here -->
</div>
</div>

3
application_ui/layout/containers/constrained_to_br_with_padded_content.html
Unescape Escape View File

@ -0,0 +1,3 @@
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<!-- Content goes here -->
</div>

3
application_ui/layout/containers/constrained_with_padded_content.html
Unescape Escape View File

@ -0,0 +1,3 @@
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<!-- Content goes here -->
</div>

4
application_ui/layout/containers/full_mobil_constrained_to_br_with_padded_content.html
Unescape Escape View File

@ -0,0 +1,4 @@
<!-- Full-width on mobile, constrained to breakpoint with padded content above mobile -->
<div class="container mx-auto sm:px-6 lg:px-8">
<!-- Content goes here -->
</div>

3
application_ui/layout/containers/full_mobile_constrained_with_padded_content_above.html
Unescape Escape View File

@ -0,0 +1,3 @@
<div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
<!-- Content goes here -->
</div>

6
application_ui/layout/containers/narrow_constrained_with_padded_content.html
Unescape Escape View File

@ -0,0 +1,6 @@
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<!-- We've used 3xl here, but feel free to try other max-widths based on your needs -->
<div class="mx-auto max-w-3xl">
<!-- Content goes here -->
</div>
</div>

24
application_ui/layout/dividers/with_button.html
Unescape Escape View File

@ -0,0 +1,24 @@
<div class="relative">
<div aria-hidden="true" class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-300"></div>
</div>
<div class="relative flex justify-center">
<button
type="button"
class="inline-flex items-center gap-x-1.5 rounded-full bg-white px-3 py-1.5 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-0.5 -ml-1 size-5 text-gray-400"
>
<path
d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z"
/>
</svg>
Button text
</button>
</div>
</div>

20
application_ui/layout/dividers/with_icon.html
Unescape Escape View File

@ -0,0 +1,20 @@
<div class="relative">
<div aria-hidden="true" class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-300"></div>
</div>
<div class="relative flex justify-center">
<span class="bg-white px-2 text-gray-500">
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="size-5 text-gray-500"
>
<path
d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z"
/>
</svg>
</span>
</div>
</div>

8
application_ui/layout/dividers/with_label.html
Unescape Escape View File

@ -0,0 +1,8 @@
<div class="relative">
<div aria-hidden="true" class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-300"></div>
</div>
<div class="relative flex justify-center">
<span class="bg-white px-2 text-sm text-gray-500">Continue</span>
</div>
</div>

8
application_ui/layout/dividers/with_label_on_left.html
Unescape Escape View File

@ -0,0 +1,8 @@
<div class="relative">
<div aria-hidden="true" class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-300"></div>
</div>
<div class="relative flex justify-start">
<span class="bg-white pr-2 text-sm text-gray-500">Continue</span>
</div>
</div>

10
application_ui/layout/dividers/with_title.html
Unescape Escape View File

@ -0,0 +1,10 @@
<div class="relative">
<div aria-hidden="true" class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-300"></div>
</div>
<div class="relative flex justify-center">
<span class="bg-white px-3 text-base font-semibold text-gray-900"
>Projects</span
>
</div>
</div>

27
application_ui/layout/dividers/with_title_and_button.html
Unescape Escape View File

@ -0,0 +1,27 @@
<div class="relative">
<div aria-hidden="true" class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-300"></div>
</div>
<div class="relative flex items-center justify-between">
<span class="bg-white pr-3 text-base font-semibold text-gray-900"
>Projects</span
>
<button
type="button"
class="inline-flex items-center gap-x-1.5 rounded-full bg-white px-3 py-1.5 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-0.5 -ml-1 size-5 text-gray-400"
>
<path
d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z"
/>
</svg>
<span>Button text</span>
</button>
</div>
</div>

10
application_ui/layout/dividers/with_title_on_left.html
Unescape Escape View File

@ -0,0 +1,10 @@
<div class="relative">
<div aria-hidden="true" class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-300"></div>
</div>
<div class="relative flex justify-start">
<span class="bg-white pr-3 text-base font-semibold text-gray-900"
>Projects</span
>
</div>
</div>

83
application_ui/layout/dividers/with_toolbar.html
Unescape Escape View File

@ -0,0 +1,83 @@
<div class="relative">
<div aria-hidden="true" class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-300"></div>
</div>
<div class="relative flex justify-center">
<span class="isolate inline-flex -space-x-px rounded-md shadow-xs">
<button
type="button"
class="relative inline-flex items-center rounded-l-md bg-white px-3 py-2 text-gray-400 ring-1 ring-gray-300 ring-inset hover:bg-gray-50 focus:z-10"
>
<span class="sr-only">Edit</span>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="size-5"
>
<path
d="m2.695 14.762-1.262 3.155a.5.5 0 0 0 .65.65l3.155-1.262a4 4 0 0 0 1.343-.886L17.5 5.501a2.121 2.121 0 0 0-3-3L3.58 13.419a4 4 0 0 0-.885 1.343Z"
/>
</svg>
</button>
<button
type="button"
class="relative inline-flex items-center bg-white px-3 py-2 text-gray-400 ring-1 ring-gray-300 ring-inset hover:bg-gray-50 focus:z-10"
>
<span class="sr-only">Attachment</span>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="size-5"
>
<path
d="M15.621 4.379a3 3 0 0 0-4.242 0l-7 7a3 3 0 0 0 4.241 4.243h.001l.497-.5a.75.75 0 0 1 1.064 1.057l-.498.501-.002.002a4.5 4.5 0 0 1-6.364-6.364l7-7a4.5 4.5 0 0 1 6.368 6.36l-3.455 3.553A2.625 2.625 0 1 1 9.52 9.52l3.45-3.451a.75.75 0 1 1 1.061 1.06l-3.45 3.451a1.125 1.125 0 0 0 1.587 1.595l3.454-3.553a3 3 0 0 0 0-4.242Z"
clip-rule="evenodd"
fill-rule="evenodd"
/>
</svg>
</button>
<button
type="button"
class="relative inline-flex items-center bg-white px-3 py-2 text-gray-400 ring-1 ring-gray-300 ring-inset hover:bg-gray-50 focus:z-10"
>
<span class="sr-only">Annotate</span>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="size-5"
>
<path
d="M10 2c-2.236 0-4.43.18-6.57.524C1.993 2.755 1 4.014 1 5.426v5.148c0 1.413.993 2.67 2.43 2.902 1.168.188 2.352.327 3.55.414.28.02.521.18.642.413l1.713 3.293a.75.75 0 0 0 1.33 0l1.713-3.293a.783.783 0 0 1 .642-.413 41.102 41.102 0 0 0 3.55-.414c1.437-.231 2.43-1.49 2.43-2.902V5.426c0-1.413-.993-2.67-2.43-2.902A41.289 41.289 0 0 0 10 2ZM6.75 6a.75.75 0 0 0 0 1.5h6.5a.75.75 0 0 0 0-1.5h-6.5Zm0 2.5a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5h-3.5Z"
clip-rule="evenodd"
fill-rule="evenodd"
/>
</svg>
</button>
<button
type="button"
class="relative inline-flex items-center rounded-r-md bg-white px-3 py-2 text-gray-400 ring-1 ring-gray-300 ring-inset hover:bg-gray-50 focus:z-10"
>
<span class="sr-only">Delete</span>
<svg
viewBox="0 0 20 20"
fill="currentColor"
data-slot="icon"
aria-hidden="true"
class="size-5"
>
<path
d="M8.75 1A2.75 2.75 0 0 0 6 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 1 0 .23 1.482l.149-.022.841 10.518A2.75 2.75 0 0 0 7.596 19h4.807a2.75 2.75 0 0 0 2.742-2.53l.841-10.52.149.023a.75.75 0 0 0 .23-1.482A41.03 41.03 0 0 0 14 4.193V3.75A2.75 2.75 0 0 0 11.25 1h-2.5ZM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4ZM8.58 7.72a.75.75 0 0 0-1.5.06l.3 7.5a.75.75 0 1 0 1.5-.06l-.3-7.5Zm4.34.06a.75.75 0 1 0-1.5-.06l-.3 7.5a.75.75 0 1 0 1.5.06l.3-7.5Z"
clip-rule="evenodd"
fill-rule="evenodd"
/>
</svg>
</button>
</span>
</div>
</div>

13
application_ui/layout/list_containers/card_with_dividers.html
Unescape Escape View File

@ -0,0 +1,13 @@
<div class="overflow-hidden rounded-md bg-white shadow-sm">
<ul role="list" class="divide-y divide-gray-200">
<li class="px-6 py-4">
<!-- Your content -->
</li>
<li class="px-6 py-4">
<!-- Your content -->
</li>
<li class="px-6 py-4">
<!-- Your content -->
</li>
</ul>
</div>

13
application_ui/layout/list_containers/card_with_dividers_full_width_on_mobile.html
Unescape Escape View File

@ -0,0 +1,13 @@
<div class="overflow-hidden bg-white shadow-sm sm:rounded-md">
<ul role="list" class="divide-y divide-gray-200">
<li class="px-4 py-4 sm:px-6">
<!-- Your content -->
</li>
<li class="px-4 py-4 sm:px-6">
<!-- Your content -->
</li>
<li class="px-4 py-4 sm:px-6">
<!-- Your content -->
</li>
</ul>
</div>

13
application_ui/layout/list_containers/flat_card_with_dividers.html
Unescape Escape View File

@ -0,0 +1,13 @@
<div class="overflow-hidden rounded-md border border-gray-300 bg-white">
<ul role="list" class="divide-y divide-gray-300">
<li class="px-6 py-4">
<!-- Your content -->
</li>
<li class="px-6 py-4">
<!-- Your content -->
</li>
<li class="px-6 py-4">
<!-- Your content -->
</li>
</ul>
</div>

11
application_ui/layout/list_containers/separate_cards.html
Unescape Escape View File

@ -0,0 +1,11 @@
<ul role="list" class="space-y-3">
<li class="overflow-hidden rounded-md bg-white px-6 py-4 shadow-sm">
<!-- Your content -->
</li>
<li class="overflow-hidden rounded-md bg-white px-6 py-4 shadow-sm">
<!-- Your content -->
</li>
<li class="overflow-hidden rounded-md bg-white px-6 py-4 shadow-sm">
<!-- Your content -->
</li>
</ul>

17
application_ui/layout/list_containers/separate_cards_full_width_on_mobile.html
Unescape Escape View File

@ -0,0 +1,17 @@
<ul role="list" class="space-y-3">
<li
class="overflow-hidden bg-white px-4 py-4 shadow-sm sm:rounded-md sm:px-6"
>
<!-- Your content -->
</li>
<li
class="overflow-hidden bg-white px-4 py-4 shadow-sm sm:rounded-md sm:px-6"
>
<!-- Your content -->
</li>
<li
class="overflow-hidden bg-white px-4 py-4 shadow-sm sm:rounded-md sm:px-6"
>
<!-- Your content -->
</li>
</ul>

11
application_ui/layout/list_containers/simple_with_dividers.html
Unescape Escape View File

@ -0,0 +1,11 @@
<ul role="list" class="divide-y divide-gray-200">
<li class="py-4">
<!-- Your content -->
</li>
<li class="py-4">
<!-- Your content -->
</li>
<li class="py-4">
<!-- Your content -->
</li>
</ul>

11
application_ui/layout/list_containers/simple_with_dividers_full_width_on_mobile.html
Unescape Escape View File

@ -0,0 +1,11 @@
<ul role="list" class="divide-y divide-gray-200">
<li class="px-4 py-4 sm:px-0">
<!-- Your content -->
</li>
<li class="px-4 py-4 sm:px-0">
<!-- Your content -->
</li>
<li class="px-4 py-4 sm:px-0">
<!-- Your content -->
</li>
</ul>

25
application_ui/layout/media_objects/aligned_to_bottom.html
Unescape Escape View File

@ -0,0 +1,25 @@
<div class="flex">
<div class="mr-4 shrink-0 self-end">
<svg
viewBox="0 0 200 200"
fill="none"
stroke="currentColor"
preserveAspectRatio="none"
aria-hidden="true"
class="size-16 border border-gray-300 bg-white text-gray-300"
>
<path
d="M0 0l200 200M0 200L200 0"
stroke-width="1"
vector-effect="non-scaling-stroke"
/>
</svg>
</div>
<div>
<h4 class="text-lg font-bold">Lorem ipsum</h4>
<p class="mt-1">
Repudiandae sint consequuntur vel. Amet ut nobis explicabo numquam
expedita quia omnis voluptatem. Minus quidem ipsam quia iusto.
</p>
</div>
</div>

25
application_ui/layout/media_objects/aligned_to_center.html
Unescape Escape View File

@ -0,0 +1,25 @@
<div class="flex">
<div class="mr-4 shrink-0 self-center">
<svg
viewBox="0 0 200 200"
fill="none"
stroke="currentColor"
preserveAspectRatio="none"
aria-hidden="true"
class="size-16 border border-gray-300 bg-white text-gray-300"
>
<path
d="M0 0l200 200M0 200L200 0"
stroke-width="1"
vector-effect="non-scaling-stroke"
/>
</svg>
</div>
<div>
<h4 class="text-lg font-bold">Lorem ipsum</h4>
<p class="mt-1">
Repudiandae sint consequuntur vel. Amet ut nobis explicabo numquam
expedita quia omnis voluptatem. Minus quidem ipsam quia iusto.
</p>
</div>
</div>

25
application_ui/layout/media_objects/basic.html
Unescape Escape View File

@ -0,0 +1,25 @@
<div class="flex">
<div class="mr-4 shrink-0">
<svg
viewBox="0 0 200 200"
fill="none"
stroke="currentColor"
preserveAspectRatio="none"
aria-hidden="true"
class="size-16 border border-gray-300 bg-white text-gray-300"
>
<path
d="M0 0l200 200M0 200L200 0"
stroke-width="1"
vector-effect="non-scaling-stroke"
/>
</svg>
</div>
<div>
<h4 class="text-lg font-bold">Lorem ipsum</h4>
<p class="mt-1">
Repudiandae sint consequuntur vel. Amet ut nobis explicabo numquam
expedita quia omnis voluptatem. Minus quidem ipsam quia iusto.
</p>
</div>
</div>

25
application_ui/layout/media_objects/basic_responsive.html
Unescape Escape View File

@ -0,0 +1,25 @@
<div class="sm:flex">
<div class="mb-4 shrink-0 sm:mr-4 sm:mb-0">
<svg
viewBox="0 0 200 200"
fill="none"
stroke="currentColor"
preserveAspectRatio="none"
aria-hidden="true"
class="size-16 border border-gray-300 bg-white text-gray-300"
>
<path
d="M0 0l200 200M0 200L200 0"
stroke-width="1"
vector-effect="non-scaling-stroke"
/>
</svg>
</div>
<div>
<h4 class="text-lg font-bold">Lorem ipsum</h4>
<p class="mt-1">
Repudiandae sint consequuntur vel. Amet ut nobis explicabo numquam
expedita quia omnis voluptatem. Minus quidem ipsam quia iusto.
</p>
</div>
</div>

25
application_ui/layout/media_objects/media_on_right.html
Unescape Escape View File

@ -0,0 +1,25 @@
<div class="flex">
<div>
<h4 class="text-lg font-bold">Lorem ipsum</h4>
<p class="mt-1">
Repudiandae sint consequuntur vel. Amet ut nobis explicabo numquam
expedita quia omnis voluptatem. Minus quidem ipsam quia iusto.
</p>
</div>
<div class="ml-4 shrink-0">
<svg
viewBox="0 0 200 200"
fill="none"
stroke="currentColor"
preserveAspectRatio="none"
aria-hidden="true"
class="size-16 border border-gray-300 bg-white text-gray-300"
>
<path
d="M0 0l200 200M0 200L200 0"
stroke-width="1"
vector-effect="non-scaling-stroke"
/>
</svg>
</div>
</div>

78
application_ui/layout/media_objects/nested.html
Unescape Escape View File

@ -0,0 +1,78 @@
<div class="flex">
<div class="mr-4 shrink-0">
<svg
viewBox="0 0 200 200"
fill="none"
stroke="currentColor"
preserveAspectRatio="none"
aria-hidden="true"
class="size-16 border border-gray-300 bg-white text-gray-300"
>
<path
d="M0 0l200 200M0 200L200 0"
stroke-width="1"
vector-effect="non-scaling-stroke"
/>
</svg>
</div>
<div>
<h4 class="text-lg font-bold">Lorem ipsum</h4>
<p class="mt-1">
Repudiandae sint consequuntur vel. Amet ut nobis explicabo numquam
expedita quia omnis voluptatem. Minus quidem ipsam quia iusto.
</p>
<div class="mt-6 flex">
<div class="mr-4 shrink-0">
<svg
viewBox="0 0 200 200"
fill="none"
stroke="currentColor"
preserveAspectRatio="none"
aria-hidden="true"
class="size-12 border border-gray-300 bg-white text-gray-300"
>
<path
d="M0 0l200 200M0 200L200 0"
stroke-width="1"
vector-effect="non-scaling-stroke"
/>
</svg>
</div>
<div>
<h4 class="text-lg font-bold">Lorem ipsum</h4>
<p class="mt-1">
Repudiandae sint consequuntur vel. Amet ut nobis explicabo
numquam expedita quia omnis voluptatem. Minus quidem ipsam
quia iusto.
</p>
</div>
</div>
<div class="mt-6 flex">
<div class="mr-4 shrink-0">
<svg
viewBox="0 0 200 200"
fill="none"
stroke="currentColor"
preserveAspectRatio="none"
aria-hidden="true"
class="size-12 border border-gray-300 bg-white text-gray-300"
>
<path
d="M0 0l200 200M0 200L200 0"
stroke-width="1"
vector-effect="non-scaling-stroke"
/>
</svg>
</div>
<div>
<h4 class="text-lg font-bold">Lorem ipsum</h4>
<p class="mt-1">
Repudiandae sint consequuntur vel. Amet ut nobis explicabo
numquam expedita quia omnis voluptatem. Minus quidem ipsam
quia iusto.
</p>
</div>
</div>
</div>
</div>

25
application_ui/layout/media_objects/stretched_to_fit.html
Unescape Escape View File

@ -0,0 +1,25 @@
<div class="flex">
<div class="mr-4 shrink-0">
<svg
viewBox="0 0 200 200"
fill="none"
stroke="currentColor"
preserveAspectRatio="none"
aria-hidden="true"
class="h-full w-16 border border-gray-300 bg-white text-gray-300"
>
<path
d="M0 0l200 200M0 200L200 0"
stroke-width="1"
vector-effect="non-scaling-stroke"
/>
</svg>
</div>
<div>
<h4 class="text-lg font-bold">Lorem ipsum</h4>
<p class="mt-1">
Repudiandae sint consequuntur vel. Amet ut nobis explicabo numquam
expedita quia omnis voluptatem. Minus quidem ipsam quia iusto.
</p>
</div>
</div>

25
application_ui/layout/media_objects/wide_responsive.html
Unescape Escape View File

@ -0,0 +1,25 @@
<div class="sm:flex">
<div class="mb-4 shrink-0 sm:mr-4 sm:mb-0">
<svg
viewBox="0 0 200 200"
fill="none"
stroke="currentColor"
preserveAspectRatio="none"
aria-hidden="true"
class="h-32 w-full border border-gray-300 bg-white text-gray-300 sm:w-32"
>
<path
d="M0 0l200 200M0 200L200 0"
stroke-width="1"
vector-effect="non-scaling-stroke"
/>
</svg>
</div>
<div>
<h4 class="text-lg font-bold">Lorem ipsum</h4>
<p class="mt-1">
Repudiandae sint consequuntur vel. Amet ut nobis explicabo numquam
expedita quia omnis voluptatem. Minus quidem ipsam quia iusto.
</p>
</div>
</div>
Write Preview
Loading…
Cancel
Save