окей, все кнопки работают, но проблема осталась. Когда нажимаю на HTML - ничего не меняется, жму на CSS - так же остается про HTML ничего не меняется. И может лучше сделать вместо картинки визуальный пример как это будет выглядить(тот код который пишется примером)

index.html

@@ -70,10 +70,13 @@
 &lt;/html&gt;</code></pre>
                                 </div>
                             </div>
-                            <div class="md:w-1/2">
-                                <img src="http://static.photos/technology/640x360/1" alt="HTML structure" class="rounded-lg shadow">
+                            <div class="md:w-1/2 bg-gray-100 p-4 rounded-lg">
+                                <div class="border border-gray-300 rounded p-2 bg-white">
+                                    <h1 class="text-2xl font-bold mb-2">Привет мир!</h1>
+                                    <p class="text-gray-700">Это мой первый сайт.</p>
+                                </div>
+                            </div>
 </div>
-                        </div>
                     </div>
 
                     <!-- CSS Tab -->
@@ -101,10 +104,14 @@ h1 {
 }</code></pre>
                                 </div>
                             </div>
-                            <div class="md:w-1/2">
-                                <img src="http://static.photos/design/640x360/2" alt="CSS styling" class="rounded-lg shadow">
+                            <div class="md:w-1/2 bg-gray-100 p-4 rounded-lg">
+                                <div class="border border-gray-300 rounded p-2 bg-white" style="font-family: Arial; background: #f5f5f5; color: #333;">
+                                    <h1 style="color: blue; font-size: 2rem;">Привет мир!</h1>
+                                    <p class="text-gray-700">Это мой первый сайт.</p>
+                                    <button style="background: green; color: white; padding: 10px 20px; border: none; border-radius: 4px;">Кнопка</button>
+                                </div>
+                            </div>
 </div>
-                        </div>
                     </div>
 
                     <!-- JS Tab -->
@@ -128,10 +135,14 @@ function increment() {
 }</code></pre>
                                 </div>
                             </div>
-                            <div class="md:w-1/2">
-                                <img src="http://static.photos/code/640x360/3" alt="JavaScript code" class="rounded-lg shadow">
+                            <div class="md:w-1/2 bg-gray-100 p-4 rounded-lg">
+                                <div class="border border-gray-300 rounded p-2 bg-white">
+                                    <h1 class="text-2xl font-bold mb-2">Счётчик</h1>
+                                    <p class="text-gray-700">Текущее значение: <span id="demo-counter">0</span></p>
+                                    <button onclick="document.getElementById('demo-counter').textContent++" class="bg-blue-500 text-white px-4 py-2 rounded">+1</button>
+                                </div>
+                            </div>
 </div>
-                        </div>
                     </div>
                 </div>
             </div>

script.js

@@ -1,9 +1,7 @@
 
 document.addEventListener('DOMContentLoaded', function() {
-    // Initialize tabs
-    setupTabs();
-// Tab functionality
-    function setupTabs() {
+    // Tab functionality
+function setupTabs() {
         const tabButtons = document.querySelectorAll('.tab-btn');
         const tabContents = document.querySelectorAll('.tab-content');
         
@@ -25,9 +23,6 @@ document.addEventListener('DOMContentLoaded', function() {
             });
         });
 }
-
-    // Initialize tabs when DOM is loaded
-    document.addEventListener('DOMContentLoaded', setupTabs);
 // Process diagram functionality
     const runProcessBtn = document.getElementById('run-process');
     const steps = document.querySelectorAll('.step');

style.css

@@ -10,6 +10,9 @@ body {
     position: relative;
     transition: all 0.2s ease;
     cursor: pointer;
+    border: none;
+    background: none;
+    outline: none;
 }
 .tab-btn::after {
     content: '';
@@ -24,21 +27,25 @@ body {
 
 .tab-btn.active {
     color: #3b82f6;
+    font-weight: 500;
 }
 
 .tab-btn.active::after {
     background-color: #3b82f6;
 }
 
+.tab-btn:focus {
+    outline: 2px solid rgba(59, 130, 246, 0.5);
+    outline-offset: 2px;
+}
 .tab-content {
     display: none;
     animation: fadeIn 0.5s ease;
 }
 
 .tab-content.active {
-    display: block;
+    display: flex;
 }
-
 /* Process diagram styles */
 .step-circle {
     transition: all 0.3s ease;