Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                doctype html
html
	head
		meta(charset="utf-8")
		title Title
		
		// Styles
		link(href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css", rel="stylesheet")
	body
		.area
			.tabs-widget
				.header
					a(href="#tab-1-1") Первая вкладка
					a(href="#tab-1-2") Вторая вкладка
					a(href="#tab-1-3") Третья вкладка

				.content
					.scroller#tab-1-1
					.item
						p Это первая вкладка этого классного виджета табов.
						p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, reprehenderit consequuntur cupiditate ad illum, tempore eligendi veritatis ut saepe dicta quis quisquam eum. Corporis recusandae veritatis error cupiditate dolorum, incidunt!
	
					.scroller#tab-1-2
					.item.-default
						p Это вторая вкладка этого классного виджета табов.
						figure
							img(src="http://canonium.com/content/css-pseudo-class-target-and-tabs-conclusion.jpg", alt)
							figcaption Изображение, предоставленное сервисом lorempixel.com
	
					.scroller#tab-1-3
					.item
						p Это третья вкладка этого классного виджета табов.
						p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam nesciunt ad hic expedita, harum tempora, culpa vel maiores aspernatur qui quisquam corrupti libero vitae deleniti eius repellendus quis, provident aperiam quo. Obcaecati optio quisquam quam. Adipisci sunt unde nulla nisi dolore doloremque explicabo! Labore doloribus quod amet, incidunt saepe, atque facilis error unde alias consectetur. Voluptate laborum ab, enim, exercitationem pariatur debitis facilis illum suscipit obcaecati aspernatur ducimus recusandae atque voluptatum illo. Nihil impedit deserunt temporibus, pariatur dolor natus, quisquam sunt accusantium repellat quaerat ducimus sit? Obcaecati blanditiis sapiente dolor, consectetur placeat optio, eum earum rem, similique eveniet aperiam rerum.
						p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium iusto consequuntur repellat exercitationem excepturi fuga error aut in, magni deleniti voluptates illo nihil voluptatum perferendis nisi placeat dolore sed veritatis, ut impedit maxime unde ducimus fugit consequatur. Reprehenderit nostrum reiciendis repudiandae. Rem ex harum similique architecto odio nemo dolor ipsum?
						p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aut exercitationem tempore consequuntur dolores ut quasi deserunt culpa impedit explicabo praesentium amet voluptatibus eaque non, ipsam sit enim, incidunt aliquid earum! Facere nobis iste non asperiores neque, omnis labore eligendi, expedita doloremque laborum beatae deserunt quos ut reiciendis quidem iusto autem tenetur et, architecto voluptatum totam sit repudiandae. Culpa, laboriosam. Aut deleniti earum molestiae architecto, magnam accusantium quae molestias, totam aspernatur doloribus excepturi hic, perferendis expedita fuga rem labore illo ab in! Provident expedita placeat asperiores unde nemo porro, aliquam. Eligendi, modi. Nihil obcaecati reiciendis animi molestiae dignissimos minima dolorum illum, labore laboriosam enim odio, iste, a veritatis. Voluptatem illum tenetur aliquid. Earum perferendis reprehenderit eveniet quisquam sit odit at et, magnam qui, reiciendis non nisi, possimus quam architecto modi? Maxime qui nemo ut quia debitis numquam delectus fuga, aliquam omnis! Itaque autem dolore, similique dolorum soluta tempora cupiditate perspiciatis.
						p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum ea vitae similique nisi perspiciatis. Quos saepe placeat, qui non, voluptatum, veniam numquam accusantium facilis error praesentium maxime accusamus blanditiis officia.
              
            
!

CSS

              
                *,
*:before,
*:after {
  box-sizing: border-box;
}
body {
  background-color: #7986CB;
  color: #333;
  font-size: 14px;
  line-height: 1.428571429;
}
a {
  text-decoration: none;
  transition: all .3s linear 0s;
}
p {
  margin-top: 0;
}
p:last-child {
  margin-bottom: 0;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
.area {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media (min-width: 540px) {
  .area {
    width: 480px;
  }
}
@media (min-width: 768px) {
  .area {
    width: 750px;
  }
}

.clearfix:before,
.clearfix:after,
.tabs-widget > .header:before,
.tabs-widget > .header:after {
  display: table;
  content: "";
}
.clearfix:after,
.tabs-widget > .header:after {
  clear: both;
}
.tabs-widget {
  position: relative;
}
.tabs-widget > .header {
  background-color: #3f51b5;
}
.tabs-widget > .header a {
  float: left;
  padding: 10px 20px;
  color: #ffffff;
}
.tabs-widget > .header a:focus,
.tabs-widget > .header a:hover {
  background-color: #32408f;
}
.tabs-widget > .content {
  position: relative;
}
.tabs-widget > .content > .scroller {
  display: none;
}
.tabs-widget > .content > .scroller:target + .item {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
}
.tabs-widget > .content > .scroller:target + .item.-default {
  position: relative;
}
.tabs-widget > .content > .item {
  background-color: #ffffff;
  color: #333333;
  padding: 20px;
  display: none;
  max-height: 384px;
  overflow-y: auto;
}
.tabs-widget > .content > .item.-default {
  display: block;
  z-index: 1;
}

              
            
!

JS

              
                
              
            
!
999px

Console