css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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="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>
            
          
!
            
              /* Variables */
$mainBgColor: #f2f2f2;
$mainTextColor: #2C3E50;
$accentColor: #673AB7;

/* Mixins */
/* Common */
body {
    font-family: 'Open Sans', sans-serif;
    color: $mainTextColor;
    background-color: white;
}

/* App */
.header {
    padding: 30px 50px;
    background-color: $mainBgColor;
    h1 {
        font-size: 30px;
    }
}
.tabContainer {
    padding: 0 50px;
    background-color: $mainBgColor;
    box-shadow: 0 3px 5px 0 rgba(black,.2);
    .tabs {
        position: relative;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;
        .tab {
            display: block;
            padding: 20px;
            width: 100%;
            text-align: center;
            text-transform: uppercase;
            white-space: nowrap;
            cursor: pointer;
            color: lighten($mainTextColor, 30);
            .icon,
            .text {
                display: inline-block;
                vertical-align: middle;
                cursor: pointer;
            }
            .icon {
                font-size: 30px;
            }
            .text {
                font-size: 20px;
                margin-left: 10px;
            }
            &.active {
                color: $accentColor;
                font-weight: 300;
            }
        }
        .indicator {
            position: absolute;
            bottom: 0;
            height: 3px;
            background: $accentColor;
        }
    }
}
.sectionsContainer {
    padding: 30px 50px 0;
    .sections {
        .section {
            display: none;

            p {
                font-size: 18px;
                line-height: 1.2;
                margin-bottom: 25px;
            }

            &.active {
                display: block;
            }
        }
    }
}

@media screen and (max-width: 960px) {
  .tabContainer .tabs .tab .text {
    display: none;
  }
}
            
          
!
            
              '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++) {
          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++) {
            tabs[ii].addEventListener('click', function() {
              app.tabs.setActiveTab.call(this);
            }, false);
          }
        }

        window.addEventListener('resize', function() {
          for (var i = 0, l = container.length; i < l; i++) {
            app.tabs.contain.call(null, container[i]);
            app.tabs.setIndicatorWidth.call(null, container[i]);
          }
        }, 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')) {
        parent = parent.parentElement;
      }

      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) {

    }
  }
}
            
          
!
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.
Loading ..................

Console