### HTML Supporter Table Structure

Source: https://context7.com/opentofu/manifesto/llms.txt

Defines the HTML structure for a responsive table to display categorized supporters and their contribution details. Includes example rows for companies, individuals, and projects, along with basic CSS for styling and responsiveness.

```html
<table class="co-signed">
  <thead>
    <th>Name</th>
    <th>Type</th>
    <th>How you'd like to help</th>
  </thead>
  <tbody>
    <!-- Company Example -->
    <tr>
      <td><a href="https://www.harness.io/">Harness</a></td>
      <td>Company</td>
      <td>Cover the cost of 5 FTEs for at least 5 years</td>
    </tr>

    <!-- Individual Example -->
    <tr>
      <td><a href="https://github.com/username">John Doe</a></td>
      <td>Individual</td>
      <td>Development; open-source community efforts</td>
    </tr>

    <!-- Project Example -->
    <tr>
      <td><a href="https://github.com/terraform-docs/terraform-docs">terraform-docs</a></td>
      <td>Project</td>
      <td>Development; open-source community efforts</td>
    </tr>
  </tbody>
</table>

/* Responsive table styling */
.Info {
  overflow-x: auto;
}

.co-signed th,
.co-signed td {
  text-align: left;
  padding: 5px;
}
```

--------------------------------

### Display Current Date using JavaScript

Source: https://github.com/opentofu/manifesto/blob/main/index.html

This JavaScript code snippet gets the current date and formats it into a human-readable string. It then updates the content of an HTML element with the ID 'currentDate'. This requires a corresponding HTML element in the page.

```javascript
let today = new Date();
let dateString = today.toDateString();
document.getElementById("currentDate").innerHTML = dateString;
```

--------------------------------

### JavaScript Dynamic Date Display

Source: https://context7.com/opentofu/manifesto/llms.txt

Renders the current date dynamically on the page using JavaScript. It gets the current date, formats it into a readable string, and inserts it into a designated HTML element. The date updates automatically when the page loads.

```html
<p id="currentDate"></p>

<script>
  let today = new Date();
  let dateString = today.toDateString();
  document.getElementById("currentDate").innerHTML = dateString;
</script>

<!-- Output example: "Fri Nov 29 2025" -->
<!-- Updates automatically when page loads -->
```

--------------------------------

### CSS Responsive Container System

Source: https://context7.com/opentofu/manifesto/llms.txt

Implements a CSS-based responsive layout system using mobile-first breakpoints for adaptability across devices. It defines base container styles and progressively larger max-widths for tablet and desktop views, along with specific mobile layout adjustments for elements like social media sharing.

```css
/* Base container */
.container {
  padding: 0 1rem 0 1rem;
}

/* Tablet breakpoint */
@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

/* Desktop breakpoint */
@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

/* Mobile-specific social media layout */
@media (max-width: 480px) {
  .share-social-media {
    flex-direction: column;
  }
}

/* Usage example */
<div class="container mx-auto">
  <h1>OpenTF Manifesto</h1>
  <p>Content adapts to screen size...</p>
</div>
```

--------------------------------

### HTML Responsive Logo with Dark Mode Variants

Source: https://context7.com/opentofu/manifesto/llms.txt

Displays a responsive logo that automatically adapts to the user's system theme (light or dark mode). It uses the HTML `<picture>` element with `<source>` tags to specify different image files for dark and light modes, ensuring optimal display. Includes basic CSS for centering the logo.

```html
<picture>
  <source srcset="images/on-dark%402x.png" media="(prefers-color-scheme: dark)">
  <img width="342px"
       height="200px"
       src="images/on-light%402x.png"
       class="logo mx-auto"
       alt="OpenTF Foundation">
</picture>

/* Styling */
.logo {
  display: flex;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* Browser automatically selects correct image based on theme */
/* Retina-ready with @2x images */
```

--------------------------------

### HTML GitHub Star Button Integration

Source: https://context7.com/opentofu/manifesto/llms.txt

Embeds an interactive GitHub star button for the OpenTF manifesto repository. It utilizes the official GitHub buttons.js script, requiring no API keys. The button automatically fetches and displays the current star count and supports light/dark schemes.

```html
<script async defer src="https://buttons.github.io/buttons.js"></script>

<a class="github-button"
   href="https://github.com/opentffoundation/manifesto"
   data-color-scheme="no-preference: light; light: light; dark: dark;"
   data-icon="octicon-star"
   data-size="large"
   data-show-count="true"
   aria-label="Star opentffoundation/manifesto on GitHub">
  Star
</a>

<!-- The button automatically fetches and displays the current star count -->
<!-- No API key required, automatically updates -->
```

--------------------------------

### JavaScript Supporter Count Tracker

Source: https://context7.com/opentofu/manifesto/llms.txt

Dynamically calculates and displays the number of supporters categorized as Company, Project, Foundation, and Individual. It iterates through table rows on page load to tally counts and updates specific HTML elements. No external dependencies are required beyond standard browser JavaScript.

```javascript
window.onload = function() {
    let counts = {
        'Company': 0,
        'Project': 0,
        'Foundation': 0,
        'Individual': 0
    };

    let rows = document.querySelectorAll('table tr');

    rows.forEach(row => {
        let cells = row.querySelectorAll('td');
        cells.forEach(cell => {
            if (counts.hasOwnProperty(cell.textContent)) {
                counts[cell.textContent]++;
            }
        });
    });

    document.querySelector('#companyOutput .count').textContent = counts['Company'];
    document.querySelector('#projectOutput .count').textContent = counts['Project'];
    document.querySelector('#foundationOutput .count').textContent = counts['Foundation'];
    document.querySelector('#individualOutput .count').textContent = counts['Individual'];
};

// Expected output on page load:
// Companies: 150
// Projects: 12
// Foundations: 1
// Individuals: 2000+
```

--------------------------------

### HTML/CSS Social Media Sharing Integration

Source: https://context7.com/opentofu/manifesto/llms.txt

Provides pre-configured HTML anchor tags and associated CSS for social media sharing buttons (Twitter, LinkedIn). It includes platform-specific URLs and basic styling for visual appeal and hover effects. This requires the HTML structure and CSS to be present on the page.

```html
<!-- Twitter Sharing Example -->
<a class="resp-sharing-button__link"
   href="https://twitter.com/intent/tweet/?text=I%20support%20the%20OpenTF%20manifesto%20to%20preserve%20an%20impartial%20and%20community-driven%20path%20for%20%23Terraform.%20%23opentf&amp;url=https%3A%2F%2Fopentf.org"
   target="_blank" rel="noopener" aria-label="Share on Twitter">
  <div class="resp-sharing-button resp-sharing-button--twitter resp-sharing-button--small">
    <div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M23.44 4.83c-.8.37-1.5.38-2.22.02..."/>
      </svg>
    </div>
  </div>
</a>

<!-- LinkedIn Sharing Example -->
<a class="resp-sharing-button__link"
   href="https://www.linkedin.com/shareArticle?mini=true&amp;url=https%3A%2F%2Fopentf.org&amp;title=I%20support%20the%20OpenTF%20manifesto..."
   target="_blank" rel="noopener">
  <div class="resp-sharing-button resp-sharing-button--linkedin resp-sharing-button--small">
    <!-- Icon SVG -->
  </div>
</a>

/* Styling for hover effects */
.resp-sharing-button--twitter:hover {
  background-color: #2795e9;
  transform: scale(1.1);
}
```

--------------------------------

### CSS Modular Scale Typography

Source: https://context7.com/opentofu/manifesto/llms.txt

Establishes a modular scale for typography, defining responsive heading hierarchy and base font styles. It uses relative units (rem) for font sizes, ensuring scalability and maintainability. Includes base styles for the HTML and body, as well as distinct sizes for h1 through h5.

```css
/* Base typography */
html {
  font-size: 100%; /* 16px */
}

body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  line-height: 1.75;
}

/* Heading scale */
h1 {
  font-size: 2.488rem; /* ~40px */
  text-align: center;
  margin-top: 0;
}

h2 {
  font-size: 2.074rem; /* ~33px */
}

h3 {
  font-size: 1.728rem; /* ~28px */
}

h4 {
  font-size: 1.44rem; /* ~23px */
}

h5 {
  font-size: 1.2rem; /* ~19px */
}

/* Usage example */
<h1>The OpenTF Manifesto</h1>
<h2>Contact us</h2>
<p>Content with optimal readability...</p>
```

--------------------------------

### CSS Banner Notification System

Source: https://context7.com/opentofu/manifesto/llms.txt

Implements a prominent, full-width banner notification system with hover effects for important updates. The CSS defines a clickable banner with a purple background and transitions for a smooth hover state. The HTML shows how to implement the banner as a link at the top of the page.

```css
.purple-banner {
  display: block;
  background-color: #8a2be2;
  color: white;
  text-align: center;
  padding: 0.75rem 0.5rem;
  font-size: 20px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.purple-banner:hover {
  background-color: purple;
}

/* HTML implementation */
<a href="/fork" class="purple-banner">
  [September 5, 2023] The OpenTF fork is now available! Read more >> 
</a>

/* Displays full-width banner at top of page */
/* Clickable to navigate to fork announcement */
```

--------------------------------

### CSS Dark Mode Toggle

Source: https://context7.com/opentofu/manifesto/llms.txt

Implements automatic dark mode styling based on user system preferences using CSS media queries. No JavaScript is required, as the browser handles theme detection automatically. This provides a seamless user experience across different operating systems and browser settings.

```css
/* Light mode (default) */
body {
  background: white;
  color: rgb(75 85 99);
}

a {
  color: #5569ff;
}

/* Dark mode activation */
@media (prefers-color-scheme: dark) {
  body {
    background: rgb(33 37 43);
    color: rgb(228 228 228);
  }

  a {
    color: #7b8bff;
  }

  .link-svg path {
    stroke: white;
  }
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.