The latest articles on DEV Community by VoidSplit (@voidsplit). https://dev.to/voidsplit https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1232783%2F362fe316-e690-4893-a7f3-e8c6ba4aadec.jpeg https://dev.to/voidsplit en VoidSplit Wed, 13 Dec 2023 20:14:44 +0000 https://dev.to/voidsplit/tabs-component-pure-javascript-html-css-js-3d0e https://dev.to/voidsplit/tabs-component-pure-javascript-html-css-js-3d0e <p>👋 Hello, I'm new to this network, I'm sharing a Codepen project with you, all the comments are in French but all the code is in English.<br> It's a tabs component in pure HTML, CSS, JavaScript. There's no framework or code taken from anywhere else. </p> <p>Here are the <u>features</u> of the component: </p> <ul> <li> <strong>Dynamic adaptability</strong>: Easily adapts to varying quantities of items without compromising functionality.</li> <li> <strong>Animated hint bar</strong>: A bar follows the selected item, providing a fluid and attractive visual experience.</li> <li> <strong>Easy interactivity</strong>: Retrieval of the component value is simple and intuitive, via the <code>value</code> attribute, there's also the <code>change</code> event available.</li> <li> <strong>Component isolation</strong>: The design allows multiple instances of the component to be used on the same page, without interfering with each other.</li> </ul> <p><iframe height="600" src="https://codepen.io/VoidSplit/embed/rNPPJGw?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> codepen javascript programming css