CSS Fiddle Page

This is a CSS-animated content serving page that grabs your public fiddles and displays them alongside a menu

by brigand

HTML

<div class='Tabs'>

  <div class='TabHeaders'>
    <div class='Tab active'>TAB HEAD 1</div>
    <div class='Tab'>TAB HEAD 2</div>
    <div class='Tab'>TAB HEAD 3</div>
        
    <!--ACCORDION CONTENT-->
    <div class='AccordionBodys'>
       <b>TAB Body 1 ACCORDION-CONTENT...</b>
    </div>
    <!--ACCORDION CONTENT-->
  </div>
  
  <div class='TabBodys'>
   <!--TAB CONTENT-->
   <div class='TabBody'>
     <b>TAB Body 1 Content...</b>
   </div>
   <!--TAB CONTENT-->
  </div>
  
</div>

CSS

.Tab.active {
  background-color: lightblue;
}


.TabHeaders {
  display: flex;
  flex-wrap: wrap;
}

 .AccordionBodys {
   display: none;
 }

.Tab {
  flex: inline-flex;
  padding: 15px;
  color: rgb(80, 80, 80);
  margin-right: -1.2px;
  border-radius: 0px;
  border: 1px solid #aaa;
  background-color: white;
}

.TabBodys {
  display: flex;
  padding: 15px;
  border: 1px solid transparent;
  border-radius: 0px;
  padding: 15px;
  color: rgb(80, 80, 80);
  border-color: #aaa;
  margin-right: -1.2px;
}




 @media (max-width: 700px) {
   .TabHeaders {
     flex-wrap: nowrap;
     flex-direction: column;
     background: yellow;
   }

   .AccordionBodys {
     padding: 30px;
     display: flex;
     flex-direction: column;
     order: -1;
   }

   .TabBodys {
     background-color: red;
     display: none;
   }
 }