How to Create tabs in HTML Without Javascript

 In this Article We will Share How to Create tabs in HTML Without Javascript  This tabs make in pure HTML CSS. So, Today's Project is too Fantastic. 

                                      

When we have to show different content in different subject, that too in the same web pages, then the best way is to use HTML CSS Tabs. In today's Time, All websites definitely use Tabs somewhere in their web pages.  If you are a web developer or Web designer then How are tabs made? This is very important for you to know. And here you will also find the code of HTML Tabs. Which you will be able to use anywhere.

How to Create tabs in HTML Without Javascript 



This tabs is make in HTML CSS Tab Without Used Javascript also our tabs in make Without bootstrap Only CSS tabs. 



HTML CODE

<div class="tabset">
  <!-- Tab 1 -->
  <input type="radio" name="tabset" id="tab1" aria-controls="first" checked>
  <label for="tab1">First</label>
  <!-- Tab 2 -->
  <input type="radio" name="tabset" id="tab2" aria-controls="second">
  <label for="tab2">Second</label>
  <!-- Tab 3 -->
  <input type="radio" name="tabset" id="tab3" aria-controls="third">
  <label for="tab3">Third</label>
  
  <div class="tab-panels">
    <section id="First" class="tab-panel">
      <h2>First</h2>
      <p> This is First Tab Here</p>
      
  </section>
    <section id="second" class="tab-panel">
      <h2>Second</h2>
      <p>  This is Second Tab. </p>
     
    </section>
    <section id="third" class="tab-panel">
      <h2>Third</h2>
      <p>This is Third Tab.</p>
    </section>
  </div>
  
</div>

CSS Code


<style type="text/css">

/*
 CSS for the main interaction
*/
.tabset > input[type="radio"] {
  position: absolute;
  left: -200vw;
}

.tabset .tab-panel {
  display: none;
}

.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6)
 {
  display: block;
}


body {
}

.tabset > label {
    display: inline-block;
    padding: 10px 15px 10px;
    border: 1px solid transparent;
    border-bottom: 0;
    cursor: pointer;
    font-weight: 600;
    background-image: linear-gradient(0deg, rgb(0 0 0 / 16%) 
0%,rgba(254.97773319482803, 255, 
254.96976882219315, 0.30000001192092896) 100%);
    border-radius: 15px;
}

.tabset > label::after {
  content: "";
  position: absolute;
  left: 15px;
  bottom: 10px;
  width: 22px;
  height: 4px;
  background: #8d8d8d;
}

.tabset > label:hover,
.tabset > input:focus + label {
  color: #06c;
}

.tabset > label:hover::after,
.tabset > input:focus + label::after,
.tabset > input:checked + label::after {
  background: #06c;
}

.tabset > input:checked + label {
  border-color: #ff00d4;
    margin-bottom: -1px;
    color: red;
        background-color: blue;
        border-radius: 15px;
}

.tab-panel {
  padding: 30px 0;
  border-top: 1px solid #ccc;
}

/*
 Demo purposes only
*/
*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  padding: 30px;
}

.tabset {
  max-width: 65em;
}
	</style>

This is HTML Tabs without Javascript You  can Use this code anywhere web pages. Also do fun with this code you will Learn more About Checked Input Lebel etc.