<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/MrGrigri/pen/wKmNKB?depth=everything&limit=all&order=popularity&page=31&q=material+&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800'>
<style class="cp-pen-styles">/* Variables */
/* Mixins */
/* Common */
body {
font-family: 'Open Sans', sans-serif;
color: #2C3E50;
background-color: white;
}
/* App */
.header {
padding: 30px 50px;
background-color: #f2f2f2;
}
.header h1 {
font-size: 30px;
}
.tabContainer {
padding: 0 50px;
background-color: #f2f2f2;
box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2);
}
.tabContainer .tabs {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.tabContainer .tabs .tab {
display: block;
padding: 20px;
width: 100%;
text-align: center;
text-transform: uppercase;
white-space: nowrap;
cursor: pointer;
color: #698bac;
}
.tabContainer .tabs .tab .icon,
.tabContainer .tabs .tab .text {
display: inline-block;
vertical-align: middle;
cursor: pointer;
}
.tabContainer .tabs .tab .icon {
font-size: 30px;
}
.tabContainer .tabs .tab .text {
font-size: 20px;
margin-left: 10px;
}
.tabContainer .tabs .tab.active {
color: #673AB7;
font-weight: 300;
}
.tabContainer .tabs .indicator {
position: absolute;
bottom: 0;
height: 3px;
background: #673AB7;
}
.sectionsContainer {
padding: 30px 50px 0;
}
.sectionsContainer .sections .section {
display: none;
}
.sectionsContainer .sections .section p {
font-size: 18px;
line-height: 1.2;
margin-bottom: 25px;
}
.sectionsContainer .sections .section.active {
display: block;
}
@media screen and (max-width: 960px) {
.tabContainer .tabs .tab .text {
display: none;
}
}
</style></head><body>
<div class="header">
<h1>Material Tabs</h1>
</div>
<div class="tabContainer">
<div class="tabs" data-max-width="1024">
<span class="tab" data-tab="a">
<span class="icon fa fa-chrome"></span>
<span class="text">Chrome</span>
</span>
<span class="tab" data-tab="b">
<span class="icon fa fa-firefox"></span>
<span class="text">Firefox</span>
</span>
<span class="tab" data-tab="c">
<span class="icon fa fa-safari"></span>
<span class="text">Safari</span>
</span>
<span class="tab" data-tab="d">
<span class="icon fa fa-internet-explorer"></span>
<span class="text">Edge</span>
</span>
<span class="tab" data-tab="e">
<span class="icon fa fa-opera"></span>
<span class="text">Opera</span>
</span>
</div>
</div>
<div class="sectionsContainer">
<div class="sections">
<div class="section" data-section="a">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum sit voluptatum, assumenda veritatis laudantium, molestias voluptatem aperiam error, totam ad consequatur accusantium repudiandae, delectus quos inventore illo odio pariatur praesentium
deleniti. Odit impedit dolores, inventore eos eaque, deleniti esse quos tenetur nesciunt, molestias corporis error earum quas suscipit reprehenderit aliquam perspiciatis labore ducimus. Quos doloremque quibusdam odit quaerat numquam modi, dolorum
cum consequuntur nam, a voluptas saepe laboriosam. Dicta possimus, est aliquid officiis eligendi fugit ducimus hic dolores debitis itaque voluptates eveniet delectus impedit veniam rem corporis beatae, ut quibusdam adipisci! Maiores sed est dolores
animi et quaerat architecto iusto atque deserunt cum enim facere, adipisci numquam harum explicabo! Illo omnis error eos qui et odio, officiis eveniet cupiditate voluptas doloremque? Quidem porro explicabo quasi. Quam porro nulla odio labore minima
provident facilis est quas earum corporis, nisi alias obcaecati ipsa molestiae, consectetur voluptatibus temporibus aut itaque corrupti deleniti consequuntur!</p>
<p>Architecto expedita explicabo dolorum, temporibus necessitatibus, facere nihil sequi alias similique deleniti minus tempore reiciendis tempora possimus velit hic dolore! Iusto nihil quas, ratione voluptatem officiis ducimus veniam id adipisci fuga
eaque, recusandae, est et at provident fugiat perspiciatis libero, ipsam blanditiis. Provident, cumque. Dignissimos, eveniet minima ea commodi ipsum repellendus illum consectetur quisquam qui impedit possimus rerum laborum modi quis labore laboriosam,
voluptatum, delectus, reiciendis vel. Eum rem ad corporis, fugit obcaecati alias nulla voluptas praesentium consequatur, magni repellendus officia fugiat dignissimos soluta libero a optio aspernatur sapiente doloribus, quaerat quo voluptates est
deleniti vel. Dicta ex iure beatae. Nulla tempore optio odio minus id mollitia, consectetur commodi possimus harum, sit amet neque doloremque cum perferendis tenetur, accusantium aut. Impedit numquam omnis dolorum, nisi ea, consequatur, quas est
earum voluptates voluptatem dolores harum inventore! Soluta tempore perferendis eveniet asperiores voluptates officia nostrum reiciendis natus cum rem, sequi et inventore.</p>
<p>A id deleniti dolorum quis veritatis illo, dignissimos. Est sit incidunt adipisci rerum eveniet doloremque maiores provident, dignissimos minus et! Doloremque iure ullam impedit ratione repudiandae illo officia doloribus rerum aperiam molestias
maxime eos repellat amet, placeat nobis odio sunt? Reprehenderit harum velit aliquam in adipisci delectus cumque architecto commodi possimus amet explicabo a dolorum iste, quo ducimus doloribus, veniam id temporibus ullam quisquam consequatur
fuga! Deserunt tempora a quisquam illum accusamus esse corporis odit perspiciatis ipsam, eveniet harum deleniti dicta tempore, maiores ratione molestiae laboriosam magni necessitatibus sit, eaque vel. Repudiandae quasi hic harum explicabo, sed
minus est tenetur sunt tempore qui amet accusamus, eius neque esse odit quod non, vero ipsum corrupti. Minima inventore error dolore, tempore harum similique quo rerum, veniam impedit voluptates, placeat minus, eveniet quisquam blanditiis iure
alias nisi quos vitae commodi rem consectetur. Unde fuga, facere architecto rerum pariatur illo, soluta necessitatibus! Error, ipsa?</p>
<p>Officiis dignissimos beatae, omnis voluptas obcaecati laborum alias numquam nobis corporis necessitatibus aliquam rerum consequuntur autem quibusdam iste pariatur neque qui dolorem debitis ad maxime. Atque perferendis expedita natus praesentium
nostrum commodi quidem iure obcaecati, sunt rem aut, quo, incidunt ut corrupti odio distinctio similique pariatur laudantium. Numquam, laboriosam? Beatae laudantium doloremque non ut aut. Nisi suscipit, ratione alias. Commodi, eveniet, nesciunt.
Accusantium saepe doloribus cupiditate hic, fugiat iure animi at numquam deleniti beatae alias corporis iste asperiores facilis quam consequatur totam, sapiente a quidem repellendus! Pariatur distinctio eaque facere corporis nemo ad reiciendis
debitis neque! Ullam aperiam a neque, commodi quia iure tempora sapiente nisi nobis aspernatur voluptate non pariatur provident eius magnam! Mollitia possimus quaerat reiciendis enim dignissimos et non, neque velit quo sint debitis accusamus nesciunt
magnam totam officiis omnis cum, consequatur est harum ipsa eius? Voluptate impedit saepe ipsam, laboriosam sequi molestias doloremque veritatis aspernatur non.</p>
</div>
<div class="section" data-section="b">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias atque, delectus voluptatum eius tempora totam qui enim vitae maxime nemo praesentium error assumenda expedita fuga, asperiores odit! Quia necessitatibus dolorem voluptatum reprehenderit
possimus fugiat voluptatem quaerat, voluptate laudantium ducimus perspiciatis! Eaque deleniti sequi ratione, nisi perspiciatis tempora repudiandae, similique? Deleniti libero beatae corrupti a, ullam culpa eius ut ipsam! Impedit fuga obcaecati
deleniti inventore, in odio, minima. Omnis, minima sed laudantium quasi dolorem assumenda fugiat ducimus magni quis cum dicta! Quia quidem molestiae porro, rerum natus similique maxime at amet eius nesciunt, veritatis, qui fugiat nostrum saepe
pariatur laborum odit quaerat quod asperiores? Ipsa voluptatibus delectus nisi ratione tempora possimus consectetur consequuntur suscipit architecto corporis at distinctio, sed error in alias quam explicabo fugiat optio! Ullam eveniet ducimus
amet cum explicabo perferendis aliquam animi autem. Ab dolores alias, est, ratione asperiores eaque iusto, numquam accusantium animi ex, saepe non natus.</p>
<p>Iure adipisci, in accusantium iste necessitatibus neque, corrupti non similique expedita nam, molestias odio repellendus, magnam mollitia. Officia laborum aliquid harum aspernatur vero laudantium dicta aut quisquam ipsam mollitia nisi, sint laboriosam
odio corporis, architecto quia, in sapiente! Similique, laboriosam perspiciatis quisquam magni tempore. Saepe quidem nobis dolorem vero suscipit hic quaerat enim, sed, placeat corporis commodi voluptatem asperiores recusandae exercitationem porro
adipisci reiciendis. Voluptas adipisci, sapiente aliquam qui, odio accusamus earum inventore cupiditate consequuntur possimus provident tenetur voluptatum dignissimos magnam soluta maiores laudantium sed. Iste et ipsa, doloribus. Ex distinctio
asperiores ipsam, sed ut sunt, aspernatur natus doloribus quos cumque dicta fugiat. Nulla consectetur unde, ab impedit ratione temporibus consequuntur! Praesentium debitis nam consectetur, cum eius perferendis aliquid tempora, officiis ullam nesciunt
eum, ex accusamus fugit magnam non rerum vitae maxime voluptatibus officia itaque at. Fugit nam sed perferendis voluptates fuga voluptatum quod dolor nulla! Ea quasi perspiciatis, at!
</p>
<p>Ipsam itaque magni doloremque, facilis, fugiat adipisci qui possimus corporis saepe quas vitae nesciunt repellat beatae incidunt quasi? Explicabo impedit nesciunt quisquam non voluptates dolor quaerat enim quos odit, error quia maxime doloremque
perferendis praesentium ipsum necessitatibus cupiditate provident quae nihil adipisci, similique excepturi temporibus fuga perspiciatis. Architecto libero provident quidem amet ea vel necessitatibus officia, quisquam id suscipit? Cum earum eius
molestiae quos, rem, hic, necessitatibus deserunt recusandae dolorum sint illum ducimus laboriosam alias atque. Autem facere alias iste cupiditate quae ullam, delectus nisi dolores minus nemo et, aspernatur quaerat fugiat hic quos iusto minima.
Vero nisi quis necessitatibus distinctio saepe labore molestiae beatae similique! Nam libero facilis doloribus alias? Dolores repellat praesentium facere velit aliquam reiciendis mollitia debitis! Deleniti voluptatum explicabo maiores beatae quod
sed reprehenderit ea ipsum iste perspiciatis sit nulla, asperiores est repellendus tempora, pariatur quaerat quis dolor, similique et eaque repudiandae ullam deserunt voluptate? Sunt.</p>
<p>Neque dicta nesciunt illo, temporibus repudiandae itaque reiciendis illum nostrum tempore quos similique pariatur impedit assumenda necessitatibus quas cum quia eaque ipsum eius modi sunt vero aspernatur suscipit. Architecto tempore in perferendis
cupiditate tempora, ducimus rem temporibus! Voluptas amet tempora harum temporibus blanditiis reiciendis, consequatur consectetur mollitia nihil, ducimus aspernatur dolorum, magni vel nobis fugiat iusto eaque nam, deleniti ullam placeat odit repudiandae
ut quisquam soluta quam? Doloremque, repudiandae architecto? Libero repellat aliquid quam accusantium rem laudantium fugit, harum similique pariatur deserunt quos. Sint at quibusdam recusandae dolores vitae nemo! Numquam atque tenetur nisi magni
nobis minus unde, corporis illo suscipit consequatur consectetur voluptatum assumenda quis sapiente nostrum. Repellendus dolore excepturi minus error, quo sapiente itaque molestiae fugiat dolores ab eos ut a nobis sequi, modi maxime, odit illo
quasi placeat explicabo vero. Pariatur sunt nesciunt vitae, aliquam quam vero possimus explicabo fuga debitis, qui assumenda animi, sint accusantium quibusdam.</p>
</div>
<div class="section" data-section="c">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit explicabo delectus consectetur quia cum placeat aut quisquam reiciendis possimus, esse libero eum quibusdam nulla hic sed cupiditate voluptatum ipsum, beatae. Blanditiis consequuntur
ullam quisquam odio nobis debitis est ex! Libero harum eius mollitia recusandae non autem aliquam voluptas officia sed. Quam doloremque vel enim ad ducimus eaque nam cupiditate, laborum dicta autem. Ea impedit nemo labore aut, quos officia atque
itaque ullam ut, placeat quia. Sed, dolorem. Temporibus totam sapiente, impedit. Sit quas fugiat, recusandae. Enim necessitatibus aliquid perferendis inventore laboriosam laudantium quia vitae quam labore quidem, sed fugiat doloremque dolorum
voluptates eos, cum error nostrum minus architecto eaque amet? Dignissimos, omnis est odio eius placeat ipsa corporis et obcaecati similique optio, in ut itaque soluta veritatis. Nulla nesciunt odio illo alias, consequuntur sint vel. Asperiores
veniam dicta autem, repellat quis ut commodi, dolore cupiditate quas cum! Accusantium, debitis, voluptatum!</p>
<p>Delectus ab blanditiis cupiditate, explicabo voluptatum, facilis, doloribus optio nisi temporibus iste repudiandae. Optio dolore provident dignissimos tempore voluptas, ex, fugit voluptate, inventore natus reprehenderit voluptates dolor, architecto
explicabo assumenda! Facere qui, suscipit vitae numquam voluptatum voluptatem sit repudiandae optio recusandae culpa, laborum ratione molestias ad fugit expedita consequuntur cupiditate adipisci quam non amet autem repellendus deleniti nihil saepe.
Ducimus provident ipsum omnis, dignissimos, placeat nesciunt sit quod, vitae esse culpa, aut fugit nisi! Culpa asperiores enim laborum. Dolore repellendus maxime, rem totam fugit voluptates eius aliquam explicabo. Accusamus nobis perspiciatis
quaerat, labore dolore voluptatum cumque, eum reiciendis vel odit, dignissimos et? Ad natus doloribus perferendis, numquam voluptatibus ratione. Reiciendis recusandae aspernatur sunt voluptas vitae architecto esse aut tempore vel, saepe eum, provident
odit similique numquam dolorum eius incidunt enim nisi nemo quisquam maiores? Beatae amet rem ea et ex quos natus dicta tempora, dolor nobis a quasi ipsam? Ipsam.</p>
<p>Modi itaque obcaecati fugiat numquam, autem officiis rerum placeat deleniti mollitia reiciendis neque minus at reprehenderit praesentium dolore laboriosam ipsum assumenda veritatis delectus. Sed omnis tempora ducimus quibusdam animi consequuntur
distinctio quo ipsa, dolorem asperiores labore sunt iure reiciendis dicta, aliquid! Assumenda, sequi illo. Minima odio quibusdam eius, ullam magnam esse, quidem. Tempora cumque provident, totam facere earum impedit consequuntur ullam, eligendi
amet explicabo dignissimos nobis praesentium. Adipisci saepe, maxime illum numquam deserunt harum quaerat ea! Eveniet neque impedit consequatur, dolores reprehenderit ipsa consequuntur earum! Eius recusandae id quisquam cum iste magnam nesciunt
aliquam, voluptates, corporis vero laborum eos eum quia nemo odit voluptatum possimus, et illo hic. Voluptate deserunt fugit quae molestiae facere distinctio alias iste sequi impedit, possimus, et sapiente tempore fugiat asperiores. Impedit beatae
odit a modi quae numquam eius, dolorem dolor pariatur non aliquid quos deleniti amet commodi ad architecto, dolorum consequuntur iure, sunt, itaque error!</p>
<p>Quae, perferendis facere ex in illum enim quas molestias ad, iure voluptates, culpa vero quia itaque omnis nam labore autem. Cum dolorum, nemo at incidunt laborum numquam hic vel. Necessitatibus harum sint temporibus, consectetur dolorum maxime
nam nisi nulla minus aspernatur beatae. Reiciendis incidunt non ab nostrum, veniam tenetur expedita doloremque voluptate aperiam iusto consequuntur voluptatibus est vel? Iste, error, nihil? Facere praesentium illum quasi itaque quod aperiam sint
soluta minima. Placeat veniam ipsum ex vero ad magni dolorem labore eum, consequatur amet alias voluptatem cum adipisci laudantium nobis, perspiciatis neque nisi, iure autem dolores perferendis, sit. Nobis alias eum magnam quidem a, in vel saepe
ab pariatur laudantium odit sint aut blanditiis consectetur explicabo cupiditate facere impedit ex sed enim dolore fugiat officiis culpa obcaecati. Neque sed inventore possimus nemo cupiditate fugiat laborum ea quis, sequi nobis. Nihil illo assumenda,
aperiam atque eaque magnam eum ea provident numquam quod.</p>
</div>
<div class="section" data-section="d">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, delectus fuga ullam ducimus consequatur asperiores. Corporis voluptatum consectetur tenetur, modi labore libero quas? Repudiandae optio alias placeat molestiae nihil soluta dolore
minus consequuntur nobis fugit officia veniam ipsam error vel, dolores quidem sequi cumque eveniet perferendis repellendus reprehenderit suscipit iusto aperiam maiores perspiciatis. Libero dolorum repellendus porro qui reprehenderit quia provident
saepe hic, quo beatae aperiam atque totam vel natus quod est vitae non quaerat in, iusto iste. Quos sed, aut perspiciatis. Consequuntur fuga, quasi repellat dolore fugiat explicabo quaerat sunt sit eligendi ipsa natus deserunt necessitatibus quas?
Similique quas hic recusandae nam aperiam distinctio est, sapiente, quos ipsa, commodi excepturi ipsum autem nisi error corporis ut fugiat at. Dignissimos quod cupiditate nulla vero explicabo maiores aperiam obcaecati voluptates, ut fugiat consectetur
nostrum expedita, quo cumque possimus deserunt, tenetur consequuntur ducimus odit nobis atque fuga iure dolore tempora! Necessitatibus, quo.</p>
<p>Atque consequuntur dolore in, culpa ullam modi optio, dolorem. Voluptatibus soluta eveniet sit quaerat error aliquam, veniam praesentium unde sunt eaque labore. Optio perspiciatis obcaecati recusandae rem dignissimos quidem consectetur beatae magni
cupiditate nam neque quasi expedita voluptatum iure illo culpa incidunt suscipit omnis sit, libero nostrum natus, sunt illum assumenda. Ea quam sunt commodi necessitatibus, est ipsum vitae distinctio voluptas, totam ullam magnam esse eveniet voluptates.
Officia voluptatem, adipisci eaque quo. Aliquam pariatur dolorem mollitia fugit alias molestiae facere doloribus dolor nostrum voluptatem, ullam assumenda dolore nisi sint id voluptatibus. Pariatur animi dolore incidunt, veritatis cumque saepe
nemo ratione, iste aut magnam laboriosam non ad, molestiae officiis eveniet maxime. Iusto numquam explicabo, assumenda maiores dolor, molestiae nisi? Excepturi ex deleniti doloremque repudiandae quidem incidunt consectetur aliquam nemo, sapiente
consequatur non quaerat eligendi, quam repellat qui impedit modi architecto voluptatum adipisci sint cupiditate. Iste quod aspernatur dolorum, fugiat esse quidem!</p>
<p>Similique quam, repellendus inventore obcaecati ipsam perspiciatis laborum modi, nisi totam dolor cum. Animi velit, non. Commodi laboriosam praesentium saepe, quaerat animi nostrum eum, voluptatum, veritatis aperiam porro repellendus! Modi eaque
consequuntur rem quis, a libero laborum, quam ea illo aliquid obcaecati. Qui obcaecati consectetur adipisci praesentium inventore voluptates neque nemo rerum perferendis asperiores repudiandae fuga, ratione voluptatibus eligendi vel at velit iusto
maiores, quos hic mollitia id et ducimus doloremque! Velit corrupti eligendi, atque totam sequi quaerat adipisci doloribus incidunt accusantium recusandae veritatis laudantium modi maxime facilis, omnis sed commodi veniam nostrum eos alias labore
aliquam porro magnam eaque. Voluptates fuga explicabo delectus vitae facilis aut mollitia, iste quos, nam cum dolorum quis recusandae nesciunt quam aliquid necessitatibus beatae et vero in optio voluptatum accusantium modi! Quis architecto dolor,
placeat nam sed, iusto dolorum libero, saepe enim rerum aut. Rerum commodi accusantium dignissimos, tempore saepe dolore iste, rem neque.</p>
<p>Facilis repellendus minima asperiores earum dolor voluptatibus dolore sed iste quos suscipit fuga, praesentium illo quod nulla ex velit nam rerum sapiente aliquid fugit laboriosam natus omnis? Voluptatum delectus a praesentium ullam maiores molestias
quasi impedit, accusantium, consectetur? Libero, totam perferendis expedita tempore nobis minus magnam, voluptate cumque at voluptatibus. Eum sapiente provident dignissimos officia sit, ipsum excepturi rerum sequi nesciunt quibusdam corporis quaerat
quia explicabo deserunt similique pariatur! Quasi rerum fugit accusamus veritatis tempora, labore assumenda iste praesentium doloribus fuga corporis, id ex doloremque ullam sunt hic commodi placeat corrupti facere inventore. Quidem delectus laborum,
facere reprehenderit nesciunt numquam quasi ullam debitis nihil sit? Magnam architecto numquam nihil dolores sunt facilis aliquid quis excepturi sit illum eligendi voluptate placeat ipsa saepe, temporibus, nam optio dolorem delectus. Deserunt
animi, voluptatum dignissimos sequi, aperiam saepe cupiditate praesentium quos dolorem ad eaque hic soluta laborum dolore doloremque? Cupiditate asperiores, aspernatur dolore eaque!</p>
</div>
<div class="section" data-section="e">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, minima. Corrupti iure explicabo reprehenderit quod illo placeat totam ipsam incidunt velit impedit. Distinctio fugit ad, omnis voluptatem officia repellat expedita et beatae atque deleniti,
porro ratione quos blanditiis asperiores magnam at totam eos consectetur tempora nihil unde quasi? Beatae dolorum quos cum, culpa, cupiditate non iure eius debitis, placeat nobis earum eveniet ipsam aliquam quibusdam! Obcaecati voluptatem officiis
maxime nesciunt incidunt nemo quibusdam et provident voluptate! Sint tenetur esse dolores molestias, minima qui eius dignissimos non obcaecati, quibusdam facilis id amet beatae iusto officiis explicabo temporibus soluta sapiente praesentium, nulla
omnis architecto fugiat aspernatur? Earum quod voluptatum distinctio odit mollitia facilis aspernatur atque quisquam, sed ab labore vel. Iure accusantium laborum molestiae, non sequi doloribus earum nostrum tenetur inventore excepturi officia
velit placeat architecto, modi delectus eveniet perferendis maxime ab, repellat. Illum maiores laborum, minus eos ullam voluptatibus alias, ratione!</p>
<p>Laboriosam veritatis, commodi nobis natus impedit consequatur quas ipsam minima vero ea dolor incidunt magni officia distinctio ipsum eius libero laudantium ipsa repellendus, recusandae, eum non tenetur nihil! Sit optio veritatis quo est velit repellat
necessitatibus molestiae iure sapiente nihil id laboriosam beatae sed dignissimos quos vero, modi quas minus rem deleniti. Consequuntur similique quod ducimus dolore eos possimus officia quidem tempore libero a, doloremque quaerat porro adipisci,
aliquam perferendis iure eligendi ut minus maxime. Placeat consequuntur, hic nobis perspiciatis repellendus odio. Ab, eum. Maxime sint doloribus possimus illo omnis, modi velit tempora hic cum qui? Nisi eaque dolore, nam facere totam, vero accusamus
voluptates aut quidem aliquam quaerat ea pariatur ipsam aliquid fuga aspernatur sequi assumenda reprehenderit voluptatum ratione temporibus distinctio sed voluptas ducimus. Recusandae magni, eligendi ipsa illum et facere ab perferendis commodi,
nobis quod repudiandae atque ipsum maiores numquam enim, error repellendus perspiciatis fuga optio id tenetur.</p>
<p>Et unde, veniam, consequatur ratione architecto eius consectetur! Soluta debitis incidunt molestiae, sit aliquam officia cupiditate quas dolore veniam vitae repudiandae labore accusamus rerum similique quo, aut atque, iure sunt sint quasi deserunt
corporis at vero. Aspernatur et blanditiis reiciendis unde, repellendus tempore! Reprehenderit, natus facilis veniam neque earum aliquam animi tempora, doloribus nemo itaque distinctio placeat doloremque libero, velit harum debitis cum omnis quidem.
Animi numquam tempora mollitia repellat, perferendis impedit dolorem ut voluptatibus officiis dolor, dicta, voluptatem quam qui praesentium, alias. Sequi, dolore sunt repellendus, culpa, id blanditiis vero veritatis hic numquam minima dicta quasi
voluptatibus? Commodi illo optio rem soluta recusandae! Blanditiis hic, porro dolores quos odio, aspernatur harum similique eius, provident voluptas placeat. Rem ipsa dolore, tenetur nostrum quidem, maxime ex. Tenetur ipsa in atque, maxime sequi
voluptate accusantium, exercitationem ipsam adipisci eum aliquam cupiditate, veniam. Vel porro sapiente aperiam dignissimos earum voluptate a natus, atque.</p>
<p>Ratione rerum iste cupiditate corporis illum ipsum, suscipit id! Impedit officiis magnam tenetur dicta ipsa optio illo, dignissimos ad laudantium soluta id omnis perferendis? Excepturi sunt iure est aperiam eum ipsam, quo, magnam, perspiciatis quis
cum aliquid reprehenderit quae molestias unde tempora beatae fugit deserunt corporis aspernatur nesciunt incidunt qui aut impedit. Ad deserunt a rem odit, est id, sapiente aperiam quod delectus repudiandae mollitia voluptatibus ducimus, perferendis
cum placeat numquam nam esse consequatur fugit similique accusamus fuga laborum soluta! Eveniet tempore nulla, sunt mollitia a dignissimos nemo quo dicta iusto eligendi, sint veritatis minima. Facilis numquam consectetur, enim et, quibusdam itaque.
Beatae assumenda quibusdam, praesentium illum minus nemo, ea dolorem ullam expedita. Minus ipsa voluptas placeat quia, tempora repudiandae alias voluptatum omnis, quam totam ipsum quod animi! Molestias nam esse doloremque, blanditiis ipsam ducimus,
dolorum officiis laboriosam, quibusdam illo molestiae dolore quisquam eos, repellendus a voluptatem vel. Quo, repellat.</p>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
<script >'use strict';
document.addEventListener('DOMContentLoaded', function() {
if (document.querySelectorAll('.tabContainer').length && document.querySelectorAll('.sectionsContainer').length) {
var activeTab = document.querySelector('.tabContainer').querySelector('.tabs .tab:first-child');
var activeSection = document.querySelector('.sectionsContainer').querySelector('.sections .section:first-child');
activeTab.classList.add('active');
activeSection.classList.add('active');
}
app.tabs.initialize();
}, false);
var app = {
tabs: {
initialize: function() {
if (document.querySelectorAll('.tabContainer').length) {
var container = document.querySelectorAll('.tabContainer');
for (var i = 0, l = container.length; i < l; i++) {if (window.CP.shouldStopExecution(2)){break;}
app.tabs.contain.call(null, container[i]);
app.tabs.setIndicatorWidth.call(null, container[i]);
var tabs = container[i].querySelectorAll('.tabs .tab');
for (var ii = 0, ll = tabs.length; ii < ll; ii++) {if (window.CP.shouldStopExecution(1)){break;}
tabs[ii].addEventListener('click', function() {
app.tabs.setActiveTab.call(this);
}, false);
}
window.CP.exitedLoop(1);
}
window.CP.exitedLoop(2);
window.addEventListener('resize', function() {
for (var i = 0, l = container.length; i < l; i++) {if (window.CP.shouldStopExecution(3)){break;}
app.tabs.contain.call(null, container[i]);
app.tabs.setIndicatorWidth.call(null, container[i]);
}
window.CP.exitedLoop(3);
}, false);
}
},
setIndicatorWidth: function(parent) {
if (parent.querySelectorAll('.tabs div').length === 0) {
parent.querySelector('.tabs').appendChild(document.createElement('div'));
parent.querySelector('.tabs div').classList.add('indicator');
}
var indicator = parent.querySelector('.tabs .indicator');
var containerRect = parent.querySelector('.tabs').getBoundingClientRect();
var curTabRect = parent.querySelector('.tabs .tab.active').getBoundingClientRect();
// left = left of active element minus left of parent container
indicator.style.left = (curTabRect.left - containerRect.left) + 'px';
// right = parent container width minus width of active element plus left of active element
indicator.style.right = ((containerRect.left + containerRect.width) - (curTabRect.left + curTabRect.width)) + 'px';
},
setActiveTab: function() {
var indicator = this.parentElement.querySelector('.indicator');
var parent = this;
var newTab = this;
var newTabSelector = this.getAttribute('data-tab');
var newSection = document.querySelector('.sectionsContainer .sections .section[data-section=' + newTabSelector + ']')
var oldSection = document.querySelector('.sectionsContainer .sections .section.active');
while (!parent.classList.contains('tabs')) {if (window.CP.shouldStopExecution(4)){break;}
parent = parent.parentElement;
}
window.CP.exitedLoop(4);
var oldTab = parent.querySelector('.tab.active');
var parentRect = parent.getBoundingClientRect();
var newTabRect = newTab.getBoundingClientRect();
var indicatorRect = indicator.getBoundingClientRect();
if (indicatorRect.left < newTabRect.left) {
TweenMax.to(indicator, .2, {
right: ((parentRect.left + parentRect.width) - (newTabRect.left + newTabRect.width)) + 'px',
ease: Power2.easeOut
});
TweenMax.to(indicator, .2, {
left: (newTabRect.left - parentRect.left) + 'px',
ease: Power2.easeOut,
delay: .1
});
} else {
TweenMax.to(indicator, .2, {
left: (newTabRect.left - parentRect.left) + 'px',
ease: Power2.easeOut
});
TweenMax.to(indicator, .2, {
right: ((parentRect.left + parentRect.width) - (newTabRect.left + newTabRect.width)) + 'px',
ease: Power2.easeOut,
delay: .1
});
}
oldTab.classList.remove('active');
oldSection.classList.remove('active');
this.classList.add('active');
newSection.classList.add('active');
},
contain: function(container) {
}
}
}
//# sourceURL=pen.js
</script>
</body></html>
