<body>
  <!--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>
</body>
* {
  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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.