Tab Dark

sachin007
Jan 26, 2026 4
Live Preview

Live Editor

<div class="tabs-container">
  <input type="radio" name="neon-tab" id="tab1" checked>
  <input type="radio" name="neon-tab" id="tab2">
  <input type="radio" name="neon-tab" id="tab3">

  <div class="tab-list">
    <label for="tab1" class="tab-item">System</label>
    <label for="tab2" class="tab-item">Network</label>
    <label for="tab3" class="tab-item">Security</label>
  </div>

  <div class="tab-content-wrapper">
    <div class="content" id="content1">
      <h2>System Online</h2>
      <p>All neural processors are functioning at 98% efficiency. Core temperature stable.</p>
    </div>
    <div class="content" id="content2">
      <h2>Network Signal</h2>
      <p>Encrypted uplink established. Frequency: 5.8GHz. Status: Undetectable.</p>
    </div>
    <div class="content" id="content3">
      <h2>Security Protocol</h2>
      <p>Firewall active. Deep packet inspection running. No intruders detected.</p>
    </div>
  </div>
</div>
:root {
  --neon-cyan: #00f3ff;
  --dark-bg: #0a0a0a;
}

body {
  background-color: var(--dark-bg);
  font-family: 'Segoe UI', sans-serif;
  display: flex;
  justify-content: center;
  padding-top: 100px;
}

/* Hide Radio Inputs */
input[type="radio"] { display: none; }

.tabs-container {
  width: 500px;
  position: relative;
}

/* Tab List Styling */
.tab-list {
  display: flex;
  gap: 10px;
  margin-bottom: -2px; /* Pull content up to connect */
}

.tab-item {
  padding: 12px 30px;
  color: #555;
  background: #151515;
  border: 1px solid #333;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
  transition: all 0.3s ease;
  border-radius: 8px 8px 0 0;
}

/* The Neon "Ignition" Effect */
#tab1:checked ~ .tab-list label[for="tab1"],
#tab2:checked ~ .tab-list label[for="tab2"],
#tab3:checked ~ .tab-list label[for="tab3"] {
  color: var(--neon-cyan);
  border-color: var(--neon-cyan);
  background: rgba(0, 243, 255, 0.05);
  text-shadow: 0 0 10px var(--neon-cyan);
  box-shadow: 0 0 15px rgba(0, 243, 255, 0.3), inset 0 0 10px rgba(0, 243, 255, 0.1);
}

/* Content Area */
.tab-content-wrapper {
  background: #111;
  border: 2px solid #333;
  padding: 30px;
  border-radius: 0 15px 15px 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  min-height: 150px;
}

/* Logic to show content */
.content { display: none; color: #ccc; }
.content h2 { color: var(--neon-cyan); margin-top: 0; }

#tab1:checked ~ .tab-content-wrapper #content1,
#tab2:checked ~ .tab-content-wrapper #content2,
#tab3:checked ~ .tab-content-wrapper #content3 {
  display: block;
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
Categories

Tab Dark

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
