# sreyleak-deth/html-css-tailwind architecture

> Architecture diagram of the GitHub repository sreyleak-deth/html-css-tailwind, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-10-01). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/sreyleak-deth/html-css-tailwind
- Repository: https://github.com/sreyleak-deth/html-css-tailwind

## Overview

This repository is a collection of standalone HTML and CSS learning examples, not an application with a shared runtime workflow. Its examples cover HTML basics, forms, media, tables, exercises, and CSS styling and layout. The tree supports grouping these examples by subject, but no README or source excerpts are available to establish imports, links, or other runtime relationships, so no edges are asserted.

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_html["HTML examples"]
  node_html_exercise1["Exercise 1<br/>[exercise1.html]"]
  node_html_exercise2["Exercise 2<br/>[exercise2.html]"]
  node_html_exercise3["Exercise 3<br/>[exercise3.html]"]
  node_html_exercise4["Exercise 4<br/>[exercise4.html]"]
  node_html_exercise5["Exercise 5<br/>[exercise5.html]"]
  node_html_form["Form example<br/>[form.html]"]
  node_html_hello["Hello page<br/>[hello.html]"]
  node_html_image["Image example<br/>[image.html]"]
  node_html_link["Link page<br/>[link_page.html]"]
  node_html_table["Table example<br/>[table.html]"]
  node_html_video["Video example<br/>[video.html]"]
end

subgraph group_css["CSS examples"]
  node_css_opacity["Opacity practice<br/>[opacity_iamge.html]"]
  node_css_practice["CSS practice<br/>[practice1.html]"]
  node_css_external_page["External style page"]
  node_css_external_sheet["External stylesheet<br/>[external_style.css]"]
  node_css_internal["Internal styles"]
  node_css_display["Display layout<br/>[display.html]"]
  node_css_flexbox["Flexbox layout<br/>[flix_box.html]"]
  node_css_nav_page["Navigation bar page<br/>[nav_bar.html]"]
  node_css_nav_sheet["Navigation bar styles<br/>[nav_bar.css]"]
  node_css_position["Position example<br/>[position.html]"]
  node_css_position1["Position practice<br/>[position1.html]"]
end

click node_html_exercise1 "https://github.com/sreyleak-deth/html-css-tailwind/blob/main/HTML/exercise/exercise1.html"
click node_html_exercise2 "https://github.com/sreyleak-deth/html-css-tailwind/blob/main/HTML/exercise/exercise2.html"
click node_html_exercise3 "https://github.com/sreyleak-deth/html-css-tailwind/blob/main/HTML/exercise/exercise3.html"
click node_html_exercise4 "https://github.com/sreyleak-deth/html-css-tailwind/blob/main/HTML/exercise/exercise4.html"
click node_html_exercise5 "https://github.com/sreyleak-deth/html-css-tailwind/blob/main/HTML/exercise/exercise5.html"
click node_html_form "https://github.com/sreyleak-deth/html-css-tailwind/blob/main/HTML/form.html"
click node_html_hello "https://github.com/sreyleak-deth/html-css-tailwind/blob/main/HTML/hello.html"
click node_html_image "https://github.com/sreyleak-deth/html-css-tailwind/blob/main/HTML/image.html"
click node_html_link "https://github.com/sreyleak-deth/html-css-tailwind/blob/main/HTML/link_page.html"
click node_html_table "https://github.com/sreyleak-deth/html-css-tailwind/blob/main/HTML/table.html"
click node_html_video "https://github.com/sreyleak-deth/html-css-tailwind/blob/main/HTML/video.html"
click node_css_opacity "https://github.com/sreyleak-deth/html-css-tailwind/blob/main/css/exercise_practice/opacity_iamge.html"
click node_css_practice "https://github.com/sreyleak-deth/html-css-tailwind/blob/main/css/exercise_practice/practice1.html"
click node_css_external_page "https://github.com/sreyleak-deth/html-css-tailwind/blob/main/css/external_style/external_style.html"
click node_css_external_sheet "https://github.com/sreyleak-deth/html-css-tailwind/blob/main/css/external_style/external_style.css"
click node_css_internal "https://github.com/sreyleak-deth/html-css-tailwind/blob/main/css/internal_style.html"
click node_css_display "https://github.com/sreyleak-deth/html-css-tailwind/blob/main/css/position/display.html"
click node_css_flexbox "https://github.com/sreyleak-deth/html-css-tailwind/blob/main/css/position/flix_box.html"
click node_css_nav_page "https://github.com/sreyleak-deth/html-css-tailwind/blob/main/css/position/nav_bar/nav_bar.html"
click node_css_nav_sheet "https://github.com/sreyleak-deth/html-css-tailwind/blob/main/css/position/nav_bar/nav_bar.css"
click node_css_position "https://github.com/sreyleak-deth/html-css-tailwind/blob/main/css/position/position.html"
click node_css_position1 "https://github.com/sreyleak-deth/html-css-tailwind/blob/main/css/position/position1.html"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_html_exercise1,node_html_exercise2,node_html_exercise3,node_html_exercise4,node_html_exercise5,node_html_form,node_html_hello,node_html_image,node_html_link,node_html_table,node_html_video toneBlue
class node_css_opacity,node_css_practice,node_css_external_page,node_css_external_sheet,node_css_internal,node_css_display,node_css_flexbox,node_css_nav_page,node_css_nav_sheet,node_css_position,node_css_position1 toneAmber
```

## Components

### HTML examples

- [Exercise 1](https://github.com/sreyleak-deth/html-css-tailwind/blob/main/HTML/exercise/exercise1.html): `HTML/exercise/exercise1.html`
- [Exercise 2](https://github.com/sreyleak-deth/html-css-tailwind/blob/main/HTML/exercise/exercise2.html): `HTML/exercise/exercise2.html`
- [Exercise 3](https://github.com/sreyleak-deth/html-css-tailwind/blob/main/HTML/exercise/exercise3.html): `HTML/exercise/exercise3.html`
- [Exercise 4](https://github.com/sreyleak-deth/html-css-tailwind/blob/main/HTML/exercise/exercise4.html): `HTML/exercise/exercise4.html`
- [Exercise 5](https://github.com/sreyleak-deth/html-css-tailwind/blob/main/HTML/exercise/exercise5.html): `HTML/exercise/exercise5.html`
- [Form example](https://github.com/sreyleak-deth/html-css-tailwind/blob/main/HTML/form.html): `HTML/form.html`
- [Hello page](https://github.com/sreyleak-deth/html-css-tailwind/blob/main/HTML/hello.html): `HTML/hello.html`
- [Image example](https://github.com/sreyleak-deth/html-css-tailwind/blob/main/HTML/image.html): `HTML/image.html`
- [Link page](https://github.com/sreyleak-deth/html-css-tailwind/blob/main/HTML/link_page.html): `HTML/link_page.html`
- [Table example](https://github.com/sreyleak-deth/html-css-tailwind/blob/main/HTML/table.html): `HTML/table.html`
- [Video example](https://github.com/sreyleak-deth/html-css-tailwind/blob/main/HTML/video.html): `HTML/video.html`

### CSS examples

- [Opacity practice](https://github.com/sreyleak-deth/html-css-tailwind/blob/main/css/exercise_practice/opacity_iamge.html): `css/exercise_practice/opacity_iamge.html`
- [CSS practice](https://github.com/sreyleak-deth/html-css-tailwind/blob/main/css/exercise_practice/practice1.html): `css/exercise_practice/practice1.html`
- [External style page](https://github.com/sreyleak-deth/html-css-tailwind/blob/main/css/external_style/external_style.html): `css/external_style/external_style.html`
- [External stylesheet](https://github.com/sreyleak-deth/html-css-tailwind/blob/main/css/external_style/external_style.css): `css/external_style/external_style.css`
- [Internal styles](https://github.com/sreyleak-deth/html-css-tailwind/blob/main/css/internal_style.html): `css/internal_style.html`
- [Display layout](https://github.com/sreyleak-deth/html-css-tailwind/blob/main/css/position/display.html): `css/position/display.html`
- [Flexbox layout](https://github.com/sreyleak-deth/html-css-tailwind/blob/main/css/position/flix_box.html): `css/position/flix_box.html`
- [Navigation bar page](https://github.com/sreyleak-deth/html-css-tailwind/blob/main/css/position/nav_bar/nav_bar.html): `css/position/nav_bar/nav_bar.html`
- [Navigation bar styles](https://github.com/sreyleak-deth/html-css-tailwind/blob/main/css/position/nav_bar/nav_bar.css): `css/position/nav_bar/nav_bar.css`
- [Position example](https://github.com/sreyleak-deth/html-css-tailwind/blob/main/css/position/position.html): `css/position/position.html`
- [Position practice](https://github.com/sreyleak-deth/html-css-tailwind/blob/main/css/position/position1.html): `css/position/position1.html`