DevPlatform
Home
Components
Search
Submit
Earn
Login
Sign Up Free
Tab Shiny - 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 Shiny
sachin007
Jan 26, 2026
7
0
Share
Live Preview
Refresh
Live Editor
HTML
CSS
JS
HTML
CSS
JavaScript
1
<div class="premium-tabs-wrapper"> <div class="tabs-container"> <input type="radio" name="prime-tab" id="t1" checked> <input type="radio" name="prime-tab" id="t2"> <input type="radio" name="prime-tab" id="t3"> <div class="tab-list"> <div class="tab-indicator"></div> <label for="t1" class="tab-item"> <span class="icon">✦</span> <span>Nexus</span> </label> <label for="t2" class="tab-item"> <span class="icon">◈</span> <span>Quantum</span> </label> <label for="t3" class="tab-item"> <span class="icon">❖</span> <span>Void</span> </label> </div> <div class="content-box"> <div class="content" id="c1"> <div class="glow-point"></div> <h2>Nexus Core</h2> <p>Centralized neural link established. High-speed data synchronization in progress...</p> </div> <div class="content" id="c2"> <div class="glow-point"></div> <h2>Quantum State</h2> <p>Processing parallel dimensions. Probability of system failure: 0.00001%.</p> </div> <div class="content" id="c3"> <div class="glow-point"></div> <h2>Void Protocol</h2> <p>Entering stealth mode. All external signatures have been purged from the grid.</p> </div> </div> </div> </div>
1
:root { --neon-main: #00f3ff; --neon-second: #bc00ff; --glass: rgba(255, 255, 255, 0.03); } body { background: radial-gradient(circle at center, #1a1a2e 0%, #050505 100%); height: 100vh; display: flex; align-items: center; justify-content: center; } .tabs-container { width: 600px; position: relative; } /* Tab List Styling */ .tab-list { display: flex; background: var(--glass); backdrop-filter: blur(10px); padding: 8px; border-radius: 15px; border: 1px solid rgba(255,255,255,0.1); position: relative; margin-bottom: 20px; } .tab-item { flex: 1; text-align: center; padding: 15px 0; color: rgba(255,255,255,0.4); cursor: pointer; z-index: 2; transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1); font-weight: 600; display: flex; justify-content: center; gap: 10px; } /* Sliding Indicator Logic */ .tab-indicator { position: absolute; height: calc(100% - 16px); width: calc(33.33% - 10px); background: linear-gradient(90deg, var(--neon-main), var(--neon-second)); border-radius: 10px; top: 8px; left: 8px; transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); box-shadow: 0 0 20px rgba(0, 243, 255, 0.5); } /* Movement Logic */ #t1:checked ~ .tab-list .tab-indicator { left: 8px; } #t2:checked ~ .tab-list .tab-indicator { left: calc(33.33% + 3px); background: var(--neon-main); } #t3:checked ~ .tab-list .tab-indicator { left: calc(66.66% - 2px); background: var(--neon-second); } /* Text Color Change */ #t1:checked ~ .tab-list label[for="t1"], #t2:checked ~ .tab-list label[for="t2"], #t3:checked ~ .tab-list label[for="t3"] { color: #fff; } /* Premium Content Box */ .content-box { background: var(--glass); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 40px; position: relative; overflow: hidden; box-shadow: 0 25px 50px rgba(0,0,0,0.5); } /* Floating Neon Point Animation */ .glow-point { position: absolute; width: 150px; height: 150px; background: var(--neon-main); filter: blur(80px); opacity: 0.2; top: -50px; right: -50px; animation: float 6s infinite alternate; } @keyframes float { from { transform: translate(0, 0); } to { transform: translate(-100px, 50px); } } /* Content Transitions */ .content { display: none; animation: slideUp 0.6s ease forwards; } #t1:checked ~ .content-box #c1, #t2:checked ~ .content-box #c2, #t3:checked ~ .content-box #c3 { display: block; } @keyframes slideUp { from { opacity: 0; transform: translateY(30px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } h2 { color: #fff; text-shadow: 0 0 10px rgba(255,255,255,0.3); } p { color: rgba(255,255,255,0.6); line-height: 1.6; }
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!