Nordic Slate Developer Console with Animated Logs and Dynamic Diff View

Loading…

Nordic Slate Developer Console with Animated Logs and Dynamic Diff View | GoSnippets

Source Code

1<section class="gs-stage">
2  <div class="gs-orb gs-orb-1" aria-hidden="true"></div>
3  <div class="gs-orb gs-orb-2" aria-hidden="true"></div>
4  <div class="gs-grid-overlay" aria-hidden="true"></div>
5  <div class="gs-card">
6    <div class="gs-card-inner">
7      <h2 class="console-title">Developer Console</h2>
8      <div class="logs">
9        <div class="log-entry">
10          <span class="log-timestamp">10:15:32</span>
11          <span class="log-content">GET /api/v1/users <span class="log-status">200 OK</span></span>
12          <svg class="log-icon" width="24" height="24" fill="none">
13            <path d="M4 4h4v8l4-4 4 4V4h4"></path><path d="M4 20h16" stroke="var(--accent)"></path>
14          </svg>
15        </div>
16        
17        <div class="log-entry">
18          <span class="log-timestamp">10:16:07</span>
19          <span class="log-content">DELETE /api/v1/users/123 <span class="log-status log-error">404 Not Found</span></span>
20          <svg class="log-icon" width="24" height="24" fill="none">
21            <path d="M4 4h16M8 4v16m8-16v16m-2 0h4M6 20h12" stroke="darkred"></path>
22          </svg>
23        </div>
24      </div>
25      <div class="diff-toggle">
26        <button class="btn-diff">View Code Diff</button>
27      </div>
28    </div>
29  </div>
30</section>

Nordic Slate Developer Console with Animated Logs and Dynamic Diff View

Source Code

More Other snippets

Comments(0)

Working in Tailwind? Explore our Tailwind gallery