Tabs with CSS3 & HTML5 Only

Tabs with CSS3 & HTML5 Only
Code Snippet:Tabs with CSS3 & HTML5 only
Author: César Gabriel
Published: January 18, 2024
Last Updated: January 22, 2024
Downloads: 443
License: MIT
Edit Code online: View on CodePen
Read More

Tabs provide a clean way to organize and present content on your website. With this easy-to-use code, you can implement tabs without the need for JavaScript. This code creates tabs using only HTML5 and CSS3. Tabs switch content when clicked. The tabs are styled with CSS for a better visual presentation. This helps organize content into sections that users can easily navigate.

You can use this code to organize content neatly into tabs on your website. One major benefit is offering users a clear and structured way to access different sections of information.

How to Create Tabs With CSS3 & HTML5 Only

1. First of all, create the HTML structure for your tabs. Include the tab headers and corresponding content sections. Insert your desired content within the content sections for each tab. You can include text, images, lists, or any other HTML elements you want to display.

Moreover, duplicate the structure to create additional tabs.

<!--Título-->
	<h1>Tabs with CSS3 & HTML5 only</h1>
	<!--Contenedor-->
	<div id="container">
		<!--Pestaña 1 activa por defecto-->
	    <input id="tab-1" type="radio" name="tab-group" checked="checked" />
	    <label for="tab-1">Tab 1</label>
	    <!--Pestaña 2 inactiva por defecto-->
	    <input id="tab-2" type="radio" name="tab-group" />
	    <label for="tab-2">Tab 2</label>
	    <!--Pestaña 3 inactiva por defecto-->
	    <input id="tab-3" type="radio" name="tab-group" />
	    <label for="tab-3">Tab 3</label>
	    <!--Contenido a mostrar/ocultar-->
	    <div id="content">
	    	<!--Contenido de la Pestaña 1-->
	        <div id="content-1">
	            <p class="left"><img src="http://ximg.es/160x120" alt="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum sit reprehenderit iusto harum minima. Assumenda, accusamus, perspiciatis inventore tempora qui pariatur quisquam? Deleniti, placeat ea nostrum officiis obcaecati temporibus quod. Ullam, in, adipisci autem at fugit ab tempore enim ratione nesciunt alias corporis vitae quo quod nostrum itaque vero iure?</p>
	            <p class="left last"><img src="http://ximg.es/160x120" alt="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, id blanditiis deserunt in molestiae excepturi incidunt molestias dolor sunt dolore obcaecati non repellat mollitia error placeat est exercitationem sit voluptates iure autem saepe voluptas harum unde perferendis modi provident labore voluptatum. Repudiandae, aspernatur sit harum quod vero quos sequi voluptas!</p>
	        </div>
	        <!--Contenido de la Pestaña 2-->
	        <div id="content-2">
	            <p class="column-left"><img src="http://ximg.es/200x150" alt="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, est, nisi enim voluptates dicta quibusdam recusandae eveniet provident non at nostrum nesciunt laudantium omnis aliquam debitis magni expedita cumque tempore.</p>
            	<p class="column-right"><img src="http://ximg.es/200x150" alt="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, molestiae, officia repellendus quasi cumque dolor eius deserunt possimus aliquid neque nam assumenda veniam soluta enim commodi aperiam reprehenderit quia incidunt.</p>
	        </div>
	        <!--Contenido de la Pestaña 3-->
	        <div id="content-3">
	        	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, aperiam, enim odit placeat minus ab vero molestiae ad fugit maiores eaque saepe debitis assumenda ut ipsam eius sit repellendus dolore.</p>
	        	<ul>
	        		<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, in magni illo dolore dicta vero.</li>
	        		<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti, minus, aspernatur voluptatem doloribus labore modi.</li>
	        		<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, exercitationem quia id accusamus beatae sunt? Dolorum mollitia sint debitis delectus.</li>
	        	</ul>
	        	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, accusantium, provident ab quo sed blanditiis perspiciatis distinctio aut voluptatibus cum odio quaerat iure vel dolorum fugit explicabo suscipit tenetur. Sed!</p>
	        </div>
	    </div>
	</div>

2. Use CSS to style the tabs and their corresponding content. Style the appearance of tabs, manage their transitions, and control the visibility of content. Adjust the CSS properties to match your website’s design.

* {
	font-family: Arial, sans;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

h1 {
	margin: 1em 0;
	text-align: center;
}

#container {
    margin: 0 auto;
    width: 50%;  /* Ancho del contenedor */
}

#container input {
	height: 2.5em;
	visibility: hidden;
}

#container label {
	background: #f9f9f9;  /* Fondo de las pestañas */
	border-radius: .25em .25em 0 0;
	color: #888;  /* Color del texto de las pestañas */
	cursor: pointer;
	display: block;
	float: left;
	font-size: 1em;  /* Tamaño del texto de las pestañas */
	height: 2.5em;
	line-height: 2.5em;
	margin-right: .25em;
	padding: 0 1.5em;
	text-align: center;
}

#container input:hover + label {
	background: #ddd;  /* Fondo de las pestañas al pasar el cursor por encima */
	color: #666;  /* Color del texto de las pestañas al pasar el cursor por encima */
}

#container input:checked + label {
	background: #f1f1f1;  /* Fondo de las pestañas al presionar */
	color: #444; /* Color de las pestañas al presionar */
	position: relative;
	z-index: 6;
	/*
	-webkit-transition: .1s;
	-moz-transition: .1s;
	-o-transition: .1s;
	-ms-transition: .1s;
	*/
}

#content {
	background: #f1f1f1;  /* Fondo del contenido */
	border-radius: 0 .25em .25em .25em;
	min-height: 20em;  /* Alto del contenido */
	position: relative;
	width: 100%;
	z-index: 5;
}

#content div {
	opacity: 0;
	padding: 1.5em;
	position: absolute;
	z-index: -100;
	/*
	transition: all linear 0.1s;
	*/
}

#content-1 p {
	clear: both;
	margin-bottom: 1em;
}
#content-1 p.left img {
	float: left;
	margin-right: 1em;
}
#content-1 p.last {
	margin-bottom: 0;
}

#content-2 p {
	float: left;
	width: 48.5%;
}
#content-2 p.column-right {
	margin-left: 3%;
}
#content-2 p img {
	display: block;
	margin: 0 auto 1em auto;
}
#content-3 p,
#content-3 ul {
	margin-bottom: 1em;
}
#content-3 ul {
	margin-left: 2em;
}

#container input#tab-1:checked ~ #content #content-1,
#container input#tab-2:checked ~ #content #content-2,
#container input#tab-3:checked ~ #content #content-3 {
    opacity: 1;
    z-index: 100;
}

input.visible {
  visibility: visible !important;
}

That’s all! hopefully, you have successfully created Tabs With CSS3 & Html5 Only. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X