⭐ Update README.md

Author: StaffV77

docs/css/design/README.md

@@ -1 +1,256 @@
-# Lasted
+# Components Documentation - Sstudiosdev-lib
+
+This repository contains a set of CSS components for building user interfaces. Below is a list of components along with their descriptions and example code.
+
+# .container
+A container class for wrapping the content with a maximum width and centered alignment.
+
+## Example:
+
+```html
+<div class="container">
+    <!-- Your content goes here -->
+</div>
+```
+
+# .btn
+A button component with basic styling for interactive elements.
+
+## Example:
+
+```html
+<button class="btn">Click me</button>
+```
+
+# .card
+A card component with a subtle box-shadow effect for displaying content.
+
+## Example:
+
+```html
+<div class="card">
+    <!-- Card content -->
+</div>
+```
+
+# .card-header
+Header section for the card component.
+
+## Example:
+
+```html
+<div class="card">
+    <div class="card-header">
+        <!-- Card header content -->
+    </div>
+    <div class="card-body">
+        <!-- Card body content -->
+    </div>
+</div>
+```
+
+# .card-body
+Body section for the card component.
+
+## Example:
+
+```html
+<div class="card">
+    <div class="card-header">
+        <!-- Card header content -->
+    </div>
+    <div class="card-body">
+        <!-- Card body content -->
+    </div>
+</div>
+```
+
+# .form-group
+Grouping class for form elements.
+
+## Example:
+
+```html
+<div class="form-group">
+    <!-- Form elements -->
+</div>
+```
+
+# .form-label
+Label class for form inputs.
+
+## Example:
+
+```html
+<label class="form-label" for="example-input">Label:</label>
+```
+
+# .form-input
+Styling for form inputs.
+
+## Example:
+
+```html
+<input type="text" class="form-input" id="example-input" placeholder="Enter text">
+```
+
+# .h1
+Styling for heading level 1.
+
+## Example:
+
+```html
+<h1 class="h1">Heading 1</h1>
+```
+
+# .navbar
+Navigation bar component with basic styling.
+
+## Example:
+
+```html
+<nav class="navbar">
+    <div class="container">
+        <!-- Navbar content -->
+    </div>
+</nav>
+```
+
+# .navbar-brand
+Styling for the navigation bar brand/logo.
+
+## Example:
+
+```html
+<a href="#" class="navbar-brand">Brand</a>
+```
+
+# .navbar-menu
+Styling for the navigation bar menu items.
+
+## Example:
+
+```html
+<ul class="navbar-menu">
+    <li><a href="#">Menu Item 1</a></li>
+    <li><a href="#">Menu Item 2</a></li>
+</ul>
+```
+
+# .alert
+Alert component for displaying messages to the user.
+
+## Example:
+
+```html
+<div class="alert">
+    <!-- Alert content -->
+</div>
+```
+
+# .alert-success
+Success variant of the alert component.
+
+## Example:
+
+```html
+<div class="alert alert-success">
+    <!-- Success alert content -->
+</div>
+```
+
+# .alert-warning
+Warning variant of the alert component.
+
+## Example:
+
+```html
+<div class="alert alert-warning">
+    <!-- Warning alert content -->
+</div>
+```
+
+# .alert-error
+Error variant of the alert component.
+
+## Example:
+
+```html
+<div class="alert alert-error">
+    <!-- Error alert content -->
+</div>
+```
+
+# .progress-bar
+Styling for a progress bar.
+
+## Example:
+
+```html
+<div class="progress-bar">
+    <div class="progress-bar-fill" style="width: 50%;"></div>
+</div>
+```
+
+# .progress-bar-fill
+Fill class for the progress bar.
+
+## Example:
+
+### NONE 😒
+
+# .tab
+Tab component for displaying tabbed content.
+
+## Example:
+
+```html
+<div class="tab">
+    <button class="tablinks">Tab 1</button>
+    <button class="tablinks">Tab 2</button>
+</div>
+```
+
+# .tabcontent
+Content section for tabs.
+
+## Example:
+
+```html
+<div class="tabcontent">
+    <!-- Tab content -->
+</div>
+```
+
+# .custom-list
+Custom list styling.
+
+## Example:
+
+```html
+<ul class="custom-list">
+    <li>List item 1</li>
+    <li>List item 2</li>
+</ul>
+```
+
+# .tags-container
+Container for displaying tags.
+
+## Example:
+
+```html
+<div class="tags-container">
+    <span class="tag">Tag 1</span>
+    <span class="tag">Tag 2</span>
+</div>
+```
+
+# .tag
+Styling for individual tags.
+
+## Example:
+
+```html
+<span class="tag">Tag</span>
+```