Pen Settings

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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="cd-tabs">
	<nav>
		<ul class="cd-tabs-navigation">
			<li><a data-content="inbox" class="selected" href="#0">Inbox</a></li>
			<li><a data-content="new" href="#0">New</a></li>
			<li><a data-content="gallery" href="#0">Gallery</a></li>
			<li><a data-content="store" href="#0">Store</a></li>
			<li><a data-content="settings" href="#0">Settings</a></li>
			<li><a data-content="trash" href="#0">Trash</a></li>
		</ul> <!-- cd-tabs-navigation -->
	</nav>

	<ul class="cd-tabs-content">
		<li data-content="inbox" class="selected">
			<p>Inbox Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum recusandae rem animi accusamus quisquam reprehenderit sed voluptates, numquam, quibusdam velit dolores repellendus tempora corrupti accusantium obcaecati voluptate totam eveniet laboriosam?</p>

			<p>Inbox Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum recusandae rem animi accusamus quisquam reprehenderit sed voluptates, numquam, quibusdam velit dolores repellendus tempora corrupti accusantium obcaecati voluptate totam eveniet laboriosam?</p>
		</li>

		<li data-content="new">
			<p>New Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non a voluptatibus, ex odit totam cumque nihil eos asperiores ea, labore rerum. Doloribus tenetur quae impedit adipisci, laborum dolorum eaque ratione quaerat, eos dicta consequuntur atque ex facere voluptate cupiditate incidunt.</p>

			<p>New Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non a voluptatibus, ex odit totam cumque nihil eos asperiores ea, labore rerum. Doloribus tenetur quae impedit adipisci, laborum dolorum eaque ratione quaerat, eos dicta consequuntur atque ex facere voluptate cupiditate incidunt.</p>
		</li>

		<li data-content="gallery">
			<p>Gallery Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque tenetur aut, cupiditate, libero eius rerum incidunt dolorem quo in officia.</p>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ipsa vero, culpa doloremque voluptatum consectetur mollitia, atque expedita unde excepturi id, molestias maiores delectus quos molestiae. Ab iure provident adipisci eveniet quisquam ratione libero nam inventore error pariatur optio facilis assumenda sint atque cumque, omnis perspiciatis. Maxime minus quam voluptatum provident aliquam voluptatibus vel rerum. Soluta nulla tempora aspernatur maiores! Animi accusamus officiis neque exercitationem dolore ipsum maiores delectus asperiores reprehenderit pariatur placeat, quaerat sed illum optio qui enim odio temporibus, nulla nihil nemo quod dicta consectetur obcaecati vel. Perspiciatis animi corrupti quidem fugit deleniti, atque mollitia labore excepturi ut.</p>
		</li>

		<li data-content="store">
			<p>Store Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum recusandae rem animi accusamus quisquam reprehenderit sed voluptates, numquam, quibusdam velit dolores repellendus tempora corrupti accusantium obcaecati voluptate totam eveniet laboriosam?</p>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, enim, pariatur. Ab assumenda, accusantium! Consequatur magni placeat quae eos dicta, cum expedita sunt facilis est impedit possimus dolorum sequi nostrum nobis sit praesentium molestias nulla laudantium fugit corporis nam ut saepe harum ipsam? Debitis accusantium, omnis repudiandae modi, distinctio illo voluptatibus aperiam odio veritatis, quam perferendis eaque ullam. Temporibus tempore ad voluptates explicabo ea sit deleniti ipsum quos dolores tempora odio, ab corporis molestiae, eaque optio, perferendis! Cumque libero quia modi! Totam magni rerum id iusto explicabo distinctio, magnam, labore sed nemo expedita velit quam, perspiciatis non temporibus sit minus voluptatum. Iste, cumque sunt suscipit facere iusto asperiores, ullam dolorum excepturi quidem ea quibusdam deserunt illo. Nesciunt voluptates repellat ipsam.</p>
		</li>

		<li data-content="settings">
			<p>Settings Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam nam magni, ullam nihil a suscipit, ex blanditiis, adipisci tempore deserunt maiores. Nostrum officia, ratione enim eaque nihil quis ea, officiis iusto repellendus. Animi illo in hic, maxime deserunt unde atque a nesciunt? Non odio quidem deserunt animi quod impedit nam, voluptates eum, voluptate consequuntur sit vel, et exercitationem sint atque dolores libero dolorem accusamus ratione iste tenetur possimus excepturi. Accusamus vero, dignissimos beatae tempore mollitia officia voluptate quam animi vitae.</p>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique ipsam eum reprehenderit minima at sapiente ad ipsum animi doloremque blanditiis unde omnis, velit molestiae voluptas placeat qui provident ab facilis.</p>
		</li>

		<li data-content="trash">
			<p>Trash Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque a iure nostrum animi praesentium, numquam quidem, nemo, voluptatem, aspernatur incidunt. Fugiat aspernatur excepturi fugit aut, dicta reprehenderit temporibus, nobis harum consequuntur quo sed, illum.</p>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima doloremque optio tenetur, natus voluptatum error vel dolorem atque perspiciatis aliquam nemo id libero dicta est saepe laudantium provident tempore ipsa, accusamus similique laborum, consequatur quia, aut non maiores. Consectetur minus ipsum aliquam pariatur dolorem rerum laudantium minima perferendis in vero voluptatem suscipit cum labore nemo explicabo, itaque nobis debitis molestias officiis? Impedit corporis voluptates reiciendis deleniti, magnam, fuga eveniet! Velit ipsa quo labore molestias mollitia, quidem, alias nisi architecto dolor aliquid qui commodi tempore deleniti animi repellat delectus hic. Alias obcaecati fuga assumenda nihil aliquid sed vero, modi, voluptatem? Vitae voluptas aperiam nostrum quo harum numquam earum facilis sequi. Labore maxime laboriosam omnis delectus odit harum recusandae sint incidunt, totam iure commodi ducimus similique doloremque! Odio quaerat dolorum, alias nihil quam iure delectus repellendus modi cupiditate dolore atque quasi obcaecati quis magni excepturi vel, non nemo consequatur, mollitia rerum amet in. Nesciunt placeat magni, provident tempora possimus ut doloribus ullam!</p>
		</li>
	</ul> <!-- cd-tabs-content -->
</div> <!-- cd-tabs -->
            
          
!
            
              /* -------------------------------- 

Primary style

-------------------------------- */
*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*::after, *::before {
  content: '';
}

body {
  font-size: 100%;
  font-family: "PT Sans", sans-serif;
  color: #f8f7ee;
  background-color: #ffffff;
}

a {
  color: #f05451;
  text-decoration: none;
}

/* -------------------------------- 

Main components 

-------------------------------- */

.cd-tabs {
  position: relative;
  width: 90%;
  max-width: 960px;
  margin: 2em auto;
}
.cd-tabs:after {
  content: "";
  display: table;
  clear: both;
}
.cd-tabs::after {
  /* subtle gradient layer on top right - to indicate it's possible to scroll */
  position: absolute;
  top: 0;
  right: 0;
  height: 60px;
  width: 50px;
  z-index: 1;
  pointer-events: none;
  background: -webkit-linear-gradient( right , #f8f7ee, rgba(248, 247, 238, 0));
  background: linear-gradient(to left, #f8f7ee, rgba(248, 247, 238, 0));
  visibility: visible;
  opacity: 1;
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.no-cssgradients .cd-tabs::after {
  display: none;
}
.cd-tabs.is-ended::after {
  /* class added in jQuery - remove the gradient layer when it's no longer possible to scroll */
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-tabs nav {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: #f8f7ee;
  box-shadow: inset 0 -2px 3px rgba(203, 196, 130, 0.06);
}
@media only screen and (min-width: 768px) {
  .cd-tabs::after {
    display: none;
  }
  .cd-tabs nav {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    box-shadow: inset -2px 0 3px rgba(203, 196, 130, 0.06);
    z-index: 1;
  }
}
@media only screen and (min-width: 960px) {
  .cd-tabs nav {
    position: relative;
    float: none;
    background: transparent;
    box-shadow: none;
  }
}

.cd-tabs-navigation {
  width: 360px;
}
.cd-tabs-navigation:after {
  content: "";
  display: table;
  clear: both;
}
.cd-tabs-navigation li {
  float: left;
}
.cd-tabs-navigation a {
  position: relative;
  display: block;
  height: 60px;
  width: 60px;
  text-align: center;
  font-size: 12px;
  font-size: 0.75rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 700;
  color: #c3c2b9;
  padding-top: 34px;
}
.no-touch .cd-tabs-navigation a:hover {
  color: #29324e;
  background-color: rgba(233, 230, 202, 0.3);
}
.cd-tabs-navigation a.selected {
  background-color: #ffffff !important;
  box-shadow: inset 0 2px 0 #f05451;
  color: #29324e;
}
.cd-tabs-navigation a::before {
  /* icons */
  position: absolute;
  top: 12px;
  left: 50%;
  margin-left: -10px;
  display: inline-block;
  height: 20px;
  width: 20px;
  background-image: url("../img/vicons.svg");
  background-repeat: no-repeat;
}
.cd-tabs-navigation a[data-content='inbox']::before {
  background-position: 0 0;
}
.cd-tabs-navigation a[data-content='new']::before {
  background-position: -20px 0;
}
.cd-tabs-navigation a[data-content='gallery']::before {
  background-position: -40px 0;
}
.cd-tabs-navigation a[data-content='store']::before {
  background-position: -60px 0;
}
.cd-tabs-navigation a[data-content='settings']::before {
  background-position: -80px 0;
}
.cd-tabs-navigation a[data-content='trash']::before {
  background-position: -100px 0;
}
.cd-tabs-navigation a[data-content='inbox'].selected::before {
  background-position: 0 -20px;
}
.cd-tabs-navigation a[data-content='new'].selected::before {
  background-position: -20px -20px;
}
.cd-tabs-navigation a[data-content='gallery'].selected::before {
  background-position: -40px -20px;
}
.cd-tabs-navigation a[data-content='store'].selected::before {
  background-position: -60px -20px;
}
.cd-tabs-navigation a[data-content='settings'].selected::before {
  background-position: -80px -20px;
}
.cd-tabs-navigation a[data-content='trash'].selected::before {
  background-position: -100px -20px;
}
@media only screen and (min-width: 768px) {
  .cd-tabs-navigation {
    /* move the nav to the left on medium sized devices */
    width: 80px;
    float: left;
  }
  .cd-tabs-navigation a {
    height: 80px;
    width: 80px;
    padding-top: 46px;
  }
  .cd-tabs-navigation a.selected {
    box-shadow: inset 2px 0 0 #f05451;
  }
  .cd-tabs-navigation a::before {
    top: 22px;
  }
}
@media only screen and (min-width: 960px) {
  .cd-tabs-navigation {
    /* tabbed on top on big devices */
    width: auto;
    background-color: #f8f7ee;
    box-shadow: inset 0 -2px 3px rgba(203, 196, 130, 0.06);
  }
  .cd-tabs-navigation a {
    height: 60px;
    line-height: 60px;
    width: auto;
    text-align: left;
    font-size: 14px;
    font-size: 0.875rem;
    padding: 0 2.8em 0 4.6em;
  }
  .cd-tabs-navigation a.selected {
    box-shadow: inset 0 2px 0 #f05451;
  }
  .cd-tabs-navigation a::before {
    top: 50%;
    margin-top: -10px;
    margin-left: 0;
    left: 38px;
  }
}

.cd-tabs-content {
  background: #ffffff;
}
.cd-tabs-content li {
  display: none;
  padding: 1.4em;
}
.cd-tabs-content li.selected {
  display: block;
  -webkit-animation: cd-fade-in 0.5s;
  -moz-animation: cd-fade-in 0.5s;
  animation: cd-fade-in 0.5s;
}
.cd-tabs-content li p {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #8493bf;
  margin-bottom: 2em;
}
@media only screen and (min-width: 768px) {
  .cd-tabs-content {
    min-height: 480px;
  }
  .cd-tabs-content li {
    padding: 2em 2em 2em 7em;
  }
}
@media only screen and (min-width: 960px) {
  .cd-tabs-content {
    min-height: 0;
  }
  .cd-tabs-content li {
    padding: 3em;
  }
  .cd-tabs-content li p {
    font-size: 16px;
    font-size: 1rem;
  }
}

@-webkit-keyframes cd-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes cd-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes cd-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

            
          
!
            
              jQuery(document).ready(function($){
	var tabItems = $('.cd-tabs-navigation a'),
		tabContentWrapper = $('.cd-tabs-content');

	tabItems.on('click', function(event){
		event.preventDefault();
		var selectedItem = $(this);
		if( !selectedItem.hasClass('selected') ) {
			var selectedTab = selectedItem.data('content'),
				selectedContent = tabContentWrapper.find('li[data-content="'+selectedTab+'"]'),
				slectedContentHeight = selectedContent.innerHeight();
			
			tabItems.removeClass('selected');
			selectedItem.addClass('selected');
			selectedContent.addClass('selected').siblings('li').removeClass('selected');
			//animate tabContentWrapper height when content changes 
			tabContentWrapper.animate({
				'height': slectedContentHeight
			}, 200);
		}
	});

	//hide the .cd-tabs::after element when tabbed navigation has scrolled to the end (mobile version)
	checkScrolling($('.cd-tabs nav'));
	$(window).on('resize', function(){
		checkScrolling($('.cd-tabs nav'));
		tabContentWrapper.css('height', 'auto');
	});
	$('.cd-tabs nav').on('scroll', function(){ 
		checkScrolling($(this));
	});

	function checkScrolling(tabs){
		var totalTabWidth = parseInt(tabs.children('.cd-tabs-navigation').width()),
		 	tabsViewport = parseInt(tabs.width());
		if( tabs.scrollLeft() >= totalTabWidth - tabsViewport) {
			tabs.parent('.cd-tabs').addClass('is-ended');
		} else {
			tabs.parent('.cd-tabs').removeClass('is-ended');
		}
	}
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console