Tab with Dots

sachin007
Jan 26, 2026 4
Live Preview

Live Editor

<div class="light-3d-wrapper">
  <input type="radio" name="tab-3d" id="tab-1" checked>
  <input type="radio" name="tab-3d" id="tab-2">
  <input type="radio" name="tab-3d" id="tab-3">

  <div class="tab-menu">
    <div class="pill"></div>
    <label for="tab-1">Profile</label>
    <label for="tab-2">Stats</label>
    <label for="tab-3">Settings</label>
  </div>

  <div class="view-port">
    <div class="card-3d" id="c1">
      <h3>User Profile</h3>
      <p>Clean, light, and responsive design.</p>
    </div>
    <div class="card-3d" id="c2">
      <h3>Activity Stats</h3>
      <p>Data visualization goes here.</p>
    </div>
    <div class="card-3d" id="c3">
      <h3>System Settings</h3>
      <p>Manage your preferences easily.</p>
    </div>
  </div>
</div>
:root {
  --neon: #007bff;
  --bg: #f0f2f5;
  --card-bg: rgba(255, 255, 255, 0.8);
}

body {
  background-color: var(--bg);
  font-family: 'Inter', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

/* Container with Perspective */
.light-3d-wrapper {
  perspective: 1200px;
  width: 400px;
}

/* Simple Tab Menu */
.tab-menu {
  display: flex;
  background: white;
  padding: 5px;
  border-radius: 50px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  position: relative;
  margin-bottom: 30px;
}

.tab-menu label {
  flex: 1;
  padding: 12px 0;
  text-align: center;
  z-index: 2;
  cursor: pointer;
  color: #666;
  font-weight: 500;
  transition: 0.3s;
}

/* The Sliding Pill */
.pill {
  position: absolute;
  width: 33.33%;
  height: calc(100% - 10px);
  background: var(--neon);
  box-shadow: 0 4px 15px rgba(0, 123, 255, 0.4);
  border-radius: 50px;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Pill Logic */
#tab-1:checked ~ .tab-menu .pill { transform: translateX(0); }
#tab-2:checked ~ .tab-menu .pill { transform: translateX(100%); }
#tab-3:checked ~ .tab-menu .pill { transform: translateX(200%); }

#tab-1:checked ~ .tab-menu label[for="tab-1"],
#tab-2:checked ~ .tab-menu label[for="tab-2"],
#tab-3:checked ~ .tab-menu label[for="tab-3"] {
  color: white;
}

/* 3D Card Content */
.view-port {
  position: relative;
  height: 200px;
  transform-style: preserve-3d;
}

.card-3d {
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--card-bg);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 30px;
  box-sizing: border-box;
  box-shadow: 0 20px 40px rgba(0,0,0,0.06);
  border: 1px solid white;
  
  /* Hidden State */
  opacity: 0;
  transform: rotateY(-20deg) scale(0.9);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

/* Active 3D State */
#tab-1:checked ~ .view-port #c1,
#tab-2:checked ~ .view-port #c2,
#tab-3:checked ~ .view-port #c3 {
  opacity: 1;
  transform: rotateY(0deg) scale(1);
  pointer-events: auto;
}

h3 { color: var(--neon); margin: 0 0 10px 0; }
p { color: #777; line-height: 1.5; }
Categories

Tab with Dots

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
