From 0b1e6f33cfdfacd99e81051c5cfee961146be658 Mon Sep 17 00:00:00 2001 From: Drew Bednar Date: Sun, 27 Jul 2025 12:30:51 -0400 Subject: [PATCH] Separating this out some more --- .gitignore | 2 + FINDINGS.md | 4 + GEMINI.md | 485 ++++ Makefile | 6 + README.md | 18 + basic_html.html | 12 - .../page_examples/detail_screens/index.html | 2117 ++++++++--------- playground/.gitkeep | 0 template/README.md | 9 + template/src/css/input.css | 3 + template/src/css/main.css | 3 + template/src/index.html | 20 + 12 files changed, 1549 insertions(+), 1130 deletions(-) create mode 100644 .gitignore create mode 100644 FINDINGS.md create mode 100644 GEMINI.md create mode 100644 Makefile create mode 100644 README.md delete mode 100644 basic_html.html create mode 100644 playground/.gitkeep create mode 100644 template/README.md create mode 100644 template/src/css/input.css create mode 100644 template/src/css/main.css create mode 100644 template/src/index.html diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..4ff7e73 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +/playground/** +!playground/.gitkeep diff --git a/FINDINGS.md b/FINDINGS.md new file mode 100644 index 0000000..a1c3f22 --- /dev/null +++ b/FINDINGS.md @@ -0,0 +1,4 @@ +# Findings + +## Gemini CLI +- Didn't understand that the goal was to create a compliant HTML webpages. It just copy and pasted components from ./components together. diff --git a/GEMINI.md b/GEMINI.md new file mode 100644 index 0000000..5a7f94f --- /dev/null +++ b/GEMINI.md @@ -0,0 +1,485 @@ +# Gemini CLI Configuration for Project Components + +This document provides context and instructions for the Gemini CLI when working with this project. + +--- + +## Project Context + +This project utilizes a `components/` directory at its root, which contains a collection of Tailwind CSS-based HTML partials. These components are organized hierarchically by their intended purpose (e.g., `application_ui`, `marketing`). + +**The files within the `components/` directory are intended as a library of examples and building blocks.** They should **never be directly modified or edited** by the Gemini CLI. + +--- + +## Component Utilization Strategy + +When generating or modifying HTML, the Gemini CLI should refer to the examples provided in the `components/` directory to understand patterns, styles, and structures for various UI elements. + +**For any request involving a UI element that closely resembles a component in `components/`, the CLI should:** + +1. **Identify relevant component(s):** Search the `components/` directory for the most appropriate and similar HTML partials. +2. **Adapt and integrate:** Extract the necessary HTML and Tailwind classes from the identified component(s) and adapt them to fit the specific requirements of the user's request. This involves: + * Copying and pasting relevant HTML structures. + * Applying or adjusting Tailwind classes as needed. + * Modifying content (text, images, links) to match the request. + * Combining elements from multiple components if necessary to fulfill a complex request. +3. **Generate new code:** The adapted code should be generated in the target file specified by the user's request, *not* within the `components/` directory. + +--- + +## Component Directory Structure + +The following is an overview of the `components/` directory structure for reference: + +``` +components/ +├── application_ui +│   ├── application_shells +│   │   ├── multi_column_layouts +│   │   │   ├── constrained_three_column.html +│   │   │   ├── constrained_with_sticky_columns.html +│   │   │   ├── full_width_secondary_column_on_right.html +│   │   │   ├── full_width_three_column.html +│   │   │   ├── full_width_with_narrow_sidebar_and_header.html +│   │   │   └── full_width_with_narrow_sidebar.html +│   │   ├── sidebar_layouts +│   │   │   ├── brand_sidebar.html +│   │   │   ├── brand_sidebar_with_headers.html +│   │   │   ├── dark_sidebar.html +│   │   │   ├── dark_sidebar_with_header.html +│   │   │   ├── light_sidebar.html +│   │   │   ├── light_sidebar_with_constrained_content_area.html +│   │   │   ├── light_sidebar_with_header.html +│   │   │   └── light_sidebar_with_off_white_background.html +│   │   └── stacked_layouts +│   │   ├── branded_nav_with_compact_page_header.html +│   │   ├── branded_nav_with_white_page_header.html +│   │   ├── brand_nav_with_overlap.html +│   │   ├── dark_nav_with_compact_white_page_header.html +│   │   ├── dark_nav_with_overlap.html +│   │   ├── dark_nav_with_white_page_header.html +│   │   ├── light_nav_on_gray_background.html +│   │   ├── light_nav_with_bottom_border.html +│   │   └── two_row_navigation_with_overlap.html +│   ├── data_display +│   │   ├── calendars +│   │   │   ├── borderless_side_by_side.html +│   │   │   ├── bordlerless_stacked.html +│   │   │   ├── day_view.html +│   │   │   ├── double.html +│   │   │   ├── month_view.html +│   │   │   ├── small_with_meetings.html +│   │   │   ├── week_view.html +│   │   │   └── year_view.html +│   │   ├── description_lists +│   │   │   ├── left_aligned.html +│   │   │   ├── left_aligned_in_card.html +│   │   │   ├── left_aligned_on_dark.html +│   │   │   ├── left_aligned_striped.html +│   │   │   ├── left_aligned_with_inline_actions.html +│   │   │   ├── narrow_with_hidden_labels.html +│   │   │   └── two_column.html +│   │   └── stats +│   │   ├── simple.html +│   │   ├── simple_in_cards.html +│   │   ├── with_brand_icon.html +│   │   ├── with_shared_borders.html +│   │   └── with_trending.html +│   ├── elements +│   │   ├── avatars +│   │   │   ├── avatar_group_stacked_botton_to_top.html +│   │   │   ├── avatar_group_stacked_top_to_bottom.html +│   │   │   ├── circular_avatars.html +│   │   │   ├── circular_avatars_with_bottom_notification.html +│   │   │   ├── circular_avatars_with_placeholder_icon.html +│   │   │   ├── circular_avatars_with_placeholder_initials.html +│   │   │   ├── circular_avatars_with_top_notification.html +│   │   │   ├── rounded_avatars.html +│   │   │   ├── rounded_avatars_with_bottom_notification.html +│   │   │   ├── rounded_avatars_with_top_notification.html +│   │   │   └── with_text.html +│   │   ├── badges +│   │   │   ├── flat.html +│   │   │   ├── flat_pill.html +│   │   │   ├── flat_pill_with_dot.html +│   │   │   ├── flat_with_dot.html +│   │   │   ├── flat_with_remove_button.html +│   │   │   ├── pill_with_border_and_dot.html +│   │   │   ├── pill_with_border.html +│   │   │   ├── small_flat.html +│   │   │   ├── small_flat_pill.html +│   │   │   ├── small_flat_pill_with_dot.html +│   │   │   ├── small_flat_with_dot.html +│   │   │   ├── small_pill_with_border.html +│   │   │   ├── small_with_border.html +│   │   │   ├── with_border_and_dot.html +│   │   │   ├── with_border_and_dot_on_dark.html +│   │   │   ├── with_border_and_remove_button.html +│   │   │   ├── with_border.html +│   │   │   └── with_border_on_dark.html +│   │   ├── button_groups +│   │   │   ├── basic.html +│   │   │   ├── icon_only.html +│   │   │   ├── with_checkbox_and_dropdown.html +│   │   │   ├── with_dropdown.html +│   │   │   └── with_stat.html +│   │   ├── buttons +│   │   │   ├── buttons_with_leading_icon.html +│   │   │   ├── buttons_with_trailing_icon.html +│   │   │   ├── circular_buttons.html +│   │   │   ├── primary_buttons.html +│   │   │   ├── primary_buttons_on_dark.html +│   │   │   ├── rounded_primary_buttons.html +│   │   │   ├── rounded_secondary_buttons.html +│   │   │   ├── secondary_buttons.html +│   │   │   ├── secondary_buttons_on_dark.html +│   │   │   └── soft_buttons.html +│   │   └── dropdowns +│   │   ├── simple.html +│   │   ├── with_dividers.html +│   │   ├── with_icons.html +│   │   ├── with_minimal_menu_icon.html +│   │   └── with_simple_header.html +│   ├── feedback +│   │   ├── alerts +│   │   │   ├── with_accent_border.html +│   │   │   ├── with_actions.html +│   │   │   ├── with_description.html +│   │   │   ├── with_dismiss_button.html +│   │   │   ├── with_link_on_right.html +│   │   │   └── with_list.html +│   │   └── empty_states +│   │   ├── simple.html +│   │   ├── with_dashed_border.html +│   │   ├── with_recommendation_grids.html +│   │   ├── with_recommendations.html +│   │   ├── with_starting_points.html +│   │   └── with_templates.html +│   ├── forms +│   │   ├── action_panels +│   │   │   ├── simple.html +│   │   │   ├── simple_well.html +│   │   │   ├── with_button_at_top_right.html +│   │   │   ├── with_button_on_right.html +│   │   │   ├── with_input.html +│   │   │   ├── with_link.html +│   │   │   ├── with_toggle.html +│   │   │   └── with_well.html +│   │   ├── checkboxes +│   │   │   ├── list_with_checkbox_on_right.html +│   │   │   ├── list_with_description.html +│   │   │   ├── list_with_inline_description.html +│   │   │   └── simple_list_with_heading.html +│   │   ├── comboboxes +│   │   │   ├── simple.html +│   │   │   ├── with_image.html +│   │   │   ├── with_secondary_text.html +│   │   │   └── with_status_indicator.html +│   │   ├── form_layouts +│   │   │   ├── labels_on_left.html +│   │   │   ├── stacked.html +│   │   │   ├── stacked_on_dark.html +│   │   │   ├── two_column.html +│   │   │   └── two_column_with_cards.html +│   │   ├── input_groups +│   │   │   ├── inpout_with_disabled_state.html +│   │   │   ├── inputs_with_inset_labels_and_shared_borders.html +│   │   │   ├── inputs_with_shared_borders.html +│   │   │   ├── input_with_addon.html +│   │   │   ├── input_with_corner_hint.html +│   │   │   ├── input_with_gray_background_and_bottom_border.html +│   │   │   ├── input_with_hidden_label.html +│   │   │   ├── input_with_inline_addon.html +│   │   │   ├── input_with_inline_leading_addon_and_trailing_dropdown.html +│   │   │   ├── input_with_inline_leading_and_trailing_addons.html +│   │   │   ├── input_with_inline_leading_dropdown.html +│   │   │   ├── input_with_inset_label.html +│   │   │   ├── input_with_keyboard_shortcut.html +│   │   │   ├── input_with_label_and_help_text.html +│   │   │   ├── input_with_label.html +│   │   │   ├── input_with_leading_icon_and_trailing_button.html +│   │   │   ├── input_with_leading_icon.html +│   │   │   ├── input_with_overlapping_label.html +│   │   │   ├── input_with_pill_shape.html +│   │   │   ├── input_with_trailing_icon.html +│   │   │   └── input_with_validation_error.html +│   │   ├── radio_groups +│   │   │   ├── cards.html +│   │   │   ├── color_picker.html +│   │   │   ├── list_with_description.html +│   │   │   ├── list_with_descriptions_in_panel.html +│   │   │   ├── list_with_inline_description.html +│   │   │   ├── list_with_radio_on_right.html +│   │   │   ├── simple_inline_list.html +│   │   │   ├── simple_list.html +│   │   │   ├── simple_list_with_radio_on_right.html +│   │   │   ├── simple_table.html +│   │   │   ├── small_cards.html +│   │   │   └── stacked_cards.html +│   │   ├── select_menus +│   │   │   ├── branded_with_supported_text.html +│   │   │   ├── custom_with_avatar.html +│   │   │   ├── custom_with_check_on_left.html +│   │   │   ├── custom_with_status_indicator.html +│   │   │   ├── simple_custom.html +│   │   │   ├── simple_native.html +│   │   │   └── with_secondary_text.html +│   │   ├── signin_and_registration +│   │   │   ├── simple_card.html +│   │   │   ├── simple.html +│   │   │   ├── simple_no_labels.html +│   │   │   ├── simple_on_dark.html +│   │   │   └── split_screen.html +│   │   ├── textareas +│   │   │   ├── simple.html +│   │   │   ├── with_avatar_and_actions.html +│   │   │   ├── with_preview_button.html +│   │   │   ├── with_title_and_pill_actions.html +│   │   │   └── with_underline_and_actions.html +│   │   └── toggles +│   │   ├── short_toggle.html +│   │   ├── simple_toggle.html +│   │   ├── toggle_with_icon.html +│   │   ├── with_left_label_and_description.html +│   │   └── with_right_label.html +│   ├── headings +│   │   ├── card_headings +│   │   │   ├── simple.html +│   │   │   ├── with_action.html +│   │   │   ├── with_avatar_and_actions.html +│   │   │   ├── with_avatar_meta_and_dropdown.html +│   │   │   ├── with_description_and_action.html +│   │   │   └── with_description.html +│   │   ├── page_headings +│   │   │   ├── card_with_avatar_and_stats.html +│   │   │   ├── with_actions_and_breadcrumbs.html +│   │   │   ├── with_actions_and_breadcrumbs_on_dark.html +│   │   │   ├── with_actions.html +│   │   │   ├── with_actions_on_dark.html +│   │   │   ├── with_avatar_and_actions.html +│   │   │   ├── with_banner_image.html +│   │   │   ├── with_filters_and_action.html +│   │   │   ├── with_logo_meta_and_actions.html +│   │   │   ├── with_meta_actions_and_breadcrumbs.html +│   │   │   ├── with_meta_actions_and_breadcrumbs_on_dark.html +│   │   │   ├── with_meta_and_actions.html +│   │   │   └── with_meta_and_actions_on_dark.html +│   │   └── section_headings +│   ├── layout +│   │   ├── cards +│   │   │   ├── basic_card.html +│   │   │   ├── card_edge_to_edge_on_mobile.html +│   │   │   ├── card_with_footer.html +│   │   │   ├── card_with_gray_body.html +│   │   │   ├── card_with_gray_footer.html +│   │   │   ├── card_with_header.html +│   │   │   ├── card_with_heeader_and_footer.html +│   │   │   ├── well_edge_to_edge_on_mobile.html +│   │   │   ├── well.html +│   │   │   └── well_on_gray.html +│   │   ├── containers +│   │   │   ├── constrained_to_br_with_padded_content.html +│   │   │   ├── constrained_with_padded_content.html +│   │   │   ├── full_mobil_constrained_to_br_with_padded_content.html +│   │   │   ├── full_mobile_constrained_with_padded_content_above.html +│   │   │   └── narrow_constrained_with_padded_content.html +│   │   ├── dividers +│   │   │   ├── with_button.html +│   │   │   ├── with_icon.html +│   │   │   ├── with_label.html +│   │   │   ├── with_label_on_left.html +│   │   │   ├── with_title_and_button.html +│   │   │   ├── with_title.html +│   │   │   ├── with_title_on_left.html +│   │   │   └── with_toolbar.html +│   │   ├── list_containers +│   │   │   ├── card_with_dividers_full_width_on_mobile.html +│   │   │   ├── card_with_dividers.html +│   │   │   ├── flat_card_with_dividers.html +│   │   │   ├── separate_cards_full_width_on_mobile.html +│   │   │   ├── separate_cards.html +│   │   │   ├── simple_with_dividers_full_width_on_mobile.html +│   │   │   └── simple_with_dividers.html +│   │   └── media_objects +│   │   ├── aligned_to_bottom.html +│   │   ├── aligned_to_center.html +│   │   ├── basic.html +│   │   ├── basic_responsive.html +│   │   ├── media_on_right.html +│   │   ├── nested.html +│   │   ├── stretched_to_fit.html +│   │   └── wide_responsive.html +│   ├── lists +│   │   ├── feeds +│   │   │   ├── simple_with_icons.html +│   │   │   ├── with_comments.html +│   │   │   └── with_multiple_items_types.html +│   │   ├── grid_lists +│   │   │   ├── actions_with_shared_borders.html +│   │   │   ├── contact_cards.html +│   │   │   ├── contact_cards_with_small_portraits.html +│   │   │   ├── horizontal_link_cards.html +│   │   │   ├── images_with_details.html +│   │   │   ├── logo_cards_with_description_list.html +│   │   │   └── simple_cards.html +│   │   ├── stacked_lists +│   │   │   ├── full_width_with_constrained_content.html +│   │   │   ├── full_width_with_links.html +│   │   │   ├── in_card_with_links.html +│   │   │   ├── narrow.html +│   │   │   ├── narrow_with_actions.html +│   │   │   ├── narrow_with_badges_on_dark.html +│   │   │   ├── narrow_with_small_avatars.html +│   │   │   ├── narrow_with_small_avatars_on_dark.html +│   │   │   ├── narrow_with_sticky_headings.html +│   │   │   ├── narrow_with_truncated_content.html +│   │   │   ├── simple.html +│   │   │   ├── simple_on_dark.html +│   │   │   ├── two_columns_with_links.html +│   │   │   ├── with_badges_buttons_and_action_menu.html +│   │   │   ├── with_inline_links_and_actions_menu.html +│   │   │   ├── with_inline_links_and_avatar_group.html +│   │   │   └── with_links.html +│   │   └── tables +│   │   ├── full_width.html +│   │   ├── full_width_with_avatars_on_dark.html +│   │   ├── full_width_with_constrained_content.html +│   │   ├── simple.html +│   │   ├── simple_in_card.html +│   │   ├── simple_on_dark.html +│   │   ├── with_avatars_and_multi_line_content.html +│   │   ├── with_border.html +│   │   ├── with_checkboxes.html +│   │   ├── with_condensed_content.html +│   │   ├── with_grouped_rows.html +│   │   ├── with_hidden_columns_on_mobile.html +│   │   ├── with_hidden_headings.html +│   │   ├── with_sortable_headings.html +│   │   ├── with_stacked_columns_on_mobile.html +│   │   ├── with_sticky_header.html +│   │   ├── with_striped_rows.html +│   │   ├── with_summary_rows.html +│   │   ├── with_uppercase_headings.html +│   │   └── with_veritcal_lines.html +│   ├── navigation +│   │   ├── breadcrumbs +│   │   │   ├── contained.html +│   │   │   ├── full_width_bar.html +│   │   │   ├── simple_with_chevrons.html +│   │   │   └── simple_with_slashes.html +│   │   ├── command_palettes +│   │   │   ├── dark_with_icons.html +│   │   │   ├── semi_transparent_with_icons.html +│   │   │   ├── simple.html +│   │   │   ├── simple_with_padding.html +│   │   │   ├── with_footer.html +│   │   │   ├── with_groups.html +│   │   │   ├── with_icons.html +│   │   │   ├── with_images_and_descriptions.html +│   │   │   └── with_preview.html +│   │   ├── navbars +│   │   │   ├── dark_with_quick_action.html +│   │   │   ├── dark_with_search.html +│   │   │   ├── simple_dark.html +│   │   │   ├── simple_dark_with_menu_button_on_left.html +│   │   │   ├── simple.html +│   │   │   ├── simple_with_menu_button_on_left.html +│   │   │   ├── with_centered_search_and_secondary_links_dark.html +│   │   │   ├── with_centered_search_and_secondary_links.html +│   │   │   ├── with_quick_action.html +│   │   │   ├── with_search.html +│   │   │   └── with_search_in_column_layout.html +│   │   ├── pagination +│   │   │   ├── card_footer_with_page_buttons.html +│   │   │   ├── centered_page_numbers.html +│   │   │   └── simple_card_footer.html +│   │   ├── progress_bars +│   │   │   ├── bullets_and_text.html +│   │   │   ├── bullets.html +│   │   │   ├── circles.html +│   │   │   ├── circles_with_text.html +│   │   │   ├── panels.html +│   │   │   ├── panels_with_border.html +│   │   │   ├── progress_bar.html +│   │   │   └── simple.html +│   │   ├── sidebar_navigation +│   │   │   ├── brand.html +│   │   │   ├── dark.html +│   │   │   ├── light.html +│   │   │   ├── with_expandable_sections.html +│   │   │   └── with_secondary_navigation.html +│   │   ├── tabs +│   │   │   ├── bar_with_underline.html +│   │   │   ├── full_width_tabs_with_underline.html +│   │   │   ├── simple_on_dark.html +│   │   │   ├── tabs_in_pills.html +│   │   │   ├── tabs_in_pills_on_gray.html +│   │   │   ├── tabs_in_pills_with_brand_color.html +│   │   │   ├── tabs_with_underline_and_badges.html +│   │   │   ├── tabs_with_underline_and_icons.html +│   │   │   └── tabs_with_underline.html +│   │   └── vertical_navigation +│   │   ├── on_gray.html +│   │   ├── simple.html +│   │   ├── with_badges.html +│   │   ├── with_icons_and_badges.html +│   │   ├── with_icons.html +│   │   └── with_secondary_navigation.html +│   ├── overlays +│   │   ├── drawers +│   │   │   ├── contact_list_example.html +│   │   │   ├── create_project_form_example.html +│   │   │   ├── empty.html +│   │   │   ├── file_details_example.html +│   │   │   ├── user_profile_example.html +│   │   │   ├── wide_create_project_from_example.html +│   │   │   ├── wide_empty.html +│   │   │   ├── wide_horizontal_user_profile_example.html +│   │   │   ├── with_background_overly.html +│   │   │   ├── with_branded_header.html +│   │   │   ├── with_clone_button_on_outside.html +│   │   │   └── with_sticky_footer.html +│   │   ├── modal_dialogs +│   │   │   ├── centered_with_sinlge_action.html +│   │   │   ├── centered_with_wide_buttons.html +│   │   │   ├── simple_alert.html +│   │   │   ├── simple_alerts_with_left_aligned_buttons.html +│   │   │   ├── simple_with_dismiss_button.html +│   │   │   └── simple_with_gray_footer.html +│   │   └── notifications +│   │   ├── condensed.html +│   │   ├── simple.html +│   │   ├── with_actions_below.html +│   │   ├── with_avatar.html +│   │   ├── with_buttons_below.html +│   │   └── with_split_buttons.html +│   └── page_examples +│   ├── detail_screens +│   │   ├── index.html +│   │   ├── sidebar_on_dark.html +│   │   └── stacked.html +│   ├── home_screens +│   │   ├── sidebar_on_dark.html +│   │   └── stacked.html +│   └── settings_screens +│   ├── sidebar_on_dark.html +│   └── stacked.html +└── marketing + └── page_sections + └── hero_sections + ├── simple_centered.html + ├── simple_centered_with_background_image.html + ├── split_with_bordered_screenshot.html + ├── split_with_code_example.html + ├── split_with_image.html + ├── split_with_screenshot.html + ├── with_angled_image_on_right.html + ├── with_app_screen_shot.html + ├── with_bordered_app_screenshot.html + ├── with_image_tiles.html + ├── with_offset_image.html + └── with_phone_mockup.html + +65 directories, 382 files +``` diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..fa141ef --- /dev/null +++ b/Makefile @@ -0,0 +1,6 @@ + +prepare: + cp -R ./template/* ./playground + +clean: + cd ./playground && find . ! -name '.gitkeep' -delete diff --git a/README.md b/README.md new file mode 100644 index 0000000..b399790 --- /dev/null +++ b/README.md @@ -0,0 +1,18 @@ +# Tailwind-AI + +An lab to run experiments using agentic coding tools to use Tailwind Plus Components. + +## Setup + +The setup assumes you have `tailwindcss` installed globally on your machine. + +## How to run an experiment + +A makefile is present with the commands `prepare` and `clean`. Note these are destructive commands and will wipe the current contents of the `./playground` directory. + +Each experiment you want to run should be done within the `./playground` directory. Simply `make prepare` the directory then run your agentic coding tool within that directory as the target for changes. + +## Resources + +- [Gemini-cli Cheatsheet](https://www.philschmid.de/gemini-cli-cheatsheet) +- [Tailwind 4 Features](https://tailwindcss.com/blog/tailwindcss-v4#css-first-configuration) diff --git a/basic_html.html b/basic_html.html deleted file mode 100644 index d1431ab..0000000 --- a/basic_html.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - Page Title - - - - - - diff --git a/components/application_ui/page_examples/detail_screens/index.html b/components/application_ui/page_examples/detail_screens/index.html index c1b4e4b..9e25b76 100644 --- a/components/application_ui/page_examples/detail_screens/index.html +++ b/components/application_ui/page_examples/detail_screens/index.html @@ -1,1158 +1,1039 @@ - - - - Stacked Tailwind Details Screen Example - - - - - - - - - -
+ + + Stacked Tailwind Details Screen Example + + + + + + + + + +
+
+
+ + Your Company +
+ +
+ + + + + + Your profile + + +
+
+ + +
+ +
+ +
+ + Your Company Your Company +
- -
- - - Your profile - - + Invoices + Clients + Expenses +
+ +
+
+ +
+ +
+
+ + +
+
+
+ +

+
+ Invoice + #00011 +
+
+ Tuple, Inc
+

- - + + + Send + + + + + -
- -
- -
- - Your Company - - -
-
-
- Home - Invoices - Clients - Expenses -
- -
- - -
+ + Edit + + + + + +
-
-
+
+
+ +
+

Summary

+
+
+
+
Amount
+
+ $10,560.00 +
+
+
+
Status
+
+ Paid +
+
- -
-
+
+ Due date +
- -

-
- Invoice - #00011 -
-
- Tuple, Inc -
-

-
-
- - - Send + + + +
+
+ +
+
+
+
+ Status + +
+
Paid with MasterCard
+
+
+
+ Download receipt +
+
+
- - + +
+

Invoice

+
+
+
Issued on
+
+ +
+
+
+
Due on
+
+ +
+
+
+
From
+
+ Acme, Inc.
7363 Cynthia Pass
Toronto, ON N3Y 4H8 +
+
+
+
To
+
+ Tuple, Inc
886 Walter Street
New York, NY 12345 +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Projects + Price +
+
+ Logo redesign +
+
+ New logo and digital asset playbook. +
+ 		+ $2,000.00 +
+
+ Website redesign +
+
+ Design and program new company website. +
+ 		+ $5,200.00 +
+
+ Business cards +
+
+ Design and production of 3.5" x 2.0" business + cards. +
+ 		+ $1,200.00 +
+
+ T-shirt design +
+
+ Three t-shirt design concepts. +
+ 		+ $400.00 +
+ Subtotal + + $8,800.00 +
+ Tax + + $1,760.00 +
+ Total + + $10,560.00 +
+
- - - Edit - - -
+
+ +

Activity

+
    +
  • +
    +
    +
    +
    +
    +
    +

    + Chelsea Hagon + created the invoice. +

    + +
    • +
  • +
    +
    +
    +
    +
    +
    +

    + Chelsea Hagon + edited the invoice. +

    + +
    • +
  • +
    +
    +
    +
    +
    +
    +

    + Chelsea Hagon + sent the invoice. +

    + +
    • +
  • +
    +
    +
    + +
    +
    +
    + Chelsea Hagon + commented
    + +
    +

    + Called client, they reassured me the invoice would be paid + by the 25th. +

    +
    +
    • +
  • +
    +
    +
    +
    +
    +
    +

    + Alex Curren + viewed the invoice. +

    + +
    • +
  • +
    +
    -
+
+ +
+

+ Alex Curren + paid the invoice. +

+ + + -
+ +
+ +
- -
-

Summary

-
-
-
-
- Amount -
-
- $10,560.00 -
-
-
-
Status
-
- Paid -
-
-
-
- Client - -
-
- Alex Curren -
-
-
-
- Due date - -
-
- -
-
-
-
- Status - -
-
- Paid with MasterCard -
-
-
-
- Download receipt - -
-
-
+ + +
- -
-

- Invoice -

-
+
+
+
- + + Attach a file + + +
+ +
- - - - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- Logo redesign -
-
- New logo and digital asset playbook. -
- 		- $2,000.00 -
-
- Website redesign -
-
- Design and program new company - website. -
- 		- $5,200.00 -
-
- Business cards -
-
- Design and production of 3.5" x - 2.0" business cards. -
- 		- $1,200.00 -
-
- T-shirt design -
-
- Three t-shirt design concepts. -
- 		- $400.00 -
- Subtotal - - $8,800.00 -
- Tax - - $1,760.00 -
- Total - - $10,560.00 -
-
+ + + Add your mood + + -
- -

- Activity -

-
    -
  • -
    -
    -
    -
    -
    -
    -

    - Chelsea Hagon - created the invoice. -

    - -
    • -
  • -
    -
    -
    -
    -
    -
    -

    - Chelsea Hagon - edited the invoice. -

    - -
    • -
  • -
    -
    -
    -
    -
    -
    -

    - Chelsea Hagon - sent the invoice. -

    - -
    • -
  • -
    -
    -
    - -
    -
    -
    - Chelsea Hagon - commented -
    - -
    -

    - Called client, they reassured me the - invoice would be paid by the 25th. -

    -
    -
    • -
  • -
    -
    -
    -
    -
    -
    -

    - Alex Curren - viewed the invoice. -

    - + +
    +
    +
    • -
  • -
    + +
    + Excited +
+ + +
+
+
-
-
+ +
+ Loved +
+ + +
+
+
-

+ +

+ Happy +
+ + +
+
+ Alex Curren - paid the invoice. -

- + +
+ Sad +
+ + +
+
+
- - -
+ +
+ Thumbsy +
+ + +
+
+
- -
+ +
+
- -
+ + + Add your mood + + I feel nothing +
+ + +
+ + + -
- + + + + + diff --git a/playground/.gitkeep b/playground/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/template/README.md b/template/README.md new file mode 100644 index 0000000..78aedc0 --- /dev/null +++ b/template/README.md @@ -0,0 +1,9 @@ +# Tailwind Template + +This is the basic setup necessary for configuring a tail page using the tailwind CSS 4.x version with the new Elements Javascript library for HTML based components. + +## Running + +``` +tailwindcss -i src/css/input.css -o src/css/main.css --watch +``` diff --git a/template/src/css/input.css b/template/src/css/input.css new file mode 100644 index 0000000..3475c39 --- /dev/null +++ b/template/src/css/input.css @@ -0,0 +1,3 @@ +@theme { + --font-sans: InterVariable, sans-serif; +} diff --git a/template/src/css/main.css b/template/src/css/main.css new file mode 100644 index 0000000..3475c39 --- /dev/null +++ b/template/src/css/main.css @@ -0,0 +1,3 @@ +@theme { + --font-sans: InterVariable, sans-serif; +} diff --git a/template/src/index.html b/template/src/index.html new file mode 100644 index 0000000..acf7370 --- /dev/null +++ b/template/src/index.html @@ -0,0 +1,20 @@ + + + + + + Stacked Tailwind Details Screen Example + + + + + + + +

Hello Tailwind

+ + +