DevPlatform
Home
Components
Search
Submit
Earn
Login
Sign Up Free
Tab with Dots - Preview | DevPlatform
DevPlatform
Categories
Accordion
Animation
Box Shadow
Button
Card
Footer
Form
Gallery
Hero Section
Inputs
Loader
Marquee
Modal
Modules
Navbar
Progress Bar
Radio Buttons
Search-Bar
Sections
Slider
Tab
Timeline
Toggle
Tab with Dots
sachin007
Jan 26, 2026
4
0
Share
Live Preview
Refresh
Live Editor
HTML
CSS
JS
HTML
CSS
JavaScript
1
<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>
1
: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; }
1
Comments
0
Want to comment?
Please
login
or
sign up
to post comments.
No comments yet
Be the first to comment on this component!
Comments 0
Want to comment?
Please login or sign up to post comments.
No comments yet
Be the first to comment on this component!