About this snippet

Present statistics with a stunning cyberpunk glowing data table. We utilized high-contrast neon borders and sharp geometric layouts to create an aggressive, futuristic aesthetic.

Size
2.7 KB
Uses
HTML, CSS
Loads
Nothing external
Views
318

Collections

Related snippets

<div class="cyber-table-wrapper">
  <div class="cyber-header">
    <h3>NETWORK PROTOCOLS</h3>
    <span class="blinking-cursor">_</span>
  </div>
  
  <table class="cyber-table">
    <thead>
      <tr>
        <th>NODE ID</th>
        <th>STATUS</th>
        <th>PING</th>
        <th>LOCATION</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>NX-001</td>
        <td class="status-online">ONLINE</td>
        <td>12ms</td>
        <td>TOKYO</td>
      </tr>
      <tr class="row-warning">
        <td>NX-002</td>
        <td class="status-warn">WARNING</td>
        <td>145ms</td>
        <td>LONDON</td>
      </tr>
      <tr>
        <td>NX-003</td>
        <td class="status-online">ONLINE</td>
        <td>8ms</td>
        <td>NEW YORK</td>
      </tr>
      <tr class="row-danger">
        <td>NX-004</td>
        <td class="status-offline">OFFLINE</td>
        <td>---</td>
        <td>BERLIN</td>
      </tr>
    </tbody>
  </table>
</div>
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: "Courier New", Courier, monospace;
  margin: 0;
  background: #050505;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}

.cyber-table-wrapper {
  width: 100%;
  max-width: 700px;
  background: rgba(0, 20, 10, 0.8);
  border: 1px solid #00ffcc;
  box-shadow: 0 0 20px rgba(0, 255, 204, 0.2), inset 0 0 20px rgba(0, 255, 204, 0.1);
  position: relative;
  /* Cut off the corners securely */
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}

.cyber-header {
  background: #00ffcc;
  color: #000000;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cyber-header h3 {
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: 2px;
}

.blinking-cursor {
  font-size: 1.5rem;
  font-weight: bold;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

.cyber-table {
  width: 100%;
  border-collapse: collapse;
  color: #00ffcc;
}

.cyber-table th, .cyber-table td {
  padding: 16px 24px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 255, 204, 0.2);
}

.cyber-table th {
  font-weight: bold;
  letter-spacing: 1px;
  background: rgba(0, 255, 204, 0.1);
}

.cyber-table tbody tr {
  transition: background 0.2s, text-shadow 0.2s;
}

.cyber-table tbody tr:hover {
  background: rgba(0, 255, 204, 0.15);
  text-shadow: 0 0 8px #00ffcc;
  cursor: crosshair;
}

.status-online { color: #00ffcc; }
.status-warn { color: #ffcc00; }
.status-offline { color: #ff003c; }

.row-warning:hover {
  background: rgba(255, 204, 0, 0.15);
  text-shadow: 0 0 8px #ffcc00;
  color: #ffcc00;
}

.row-danger:hover {
  background: rgba(255, 0, 60, 0.15);
  text-shadow: 0 0 8px #ff003c;
  color: #ff003c;
}

      

          


    

    
  

  















  
Esc

  
  
↑↓ moveEnter select




  
Start from a template

  

    

    
Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

  




  
Share

  




  
Source

  




  
Keyboard shortcuts

  




  

    
Save