Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs 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 its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ 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.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

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 

              
                <div class="o-mainContainer">
    <h1>Burada a11y-tablist konusu hakkında alıştırma yapılmıştır.</h1>
    <div class="m-buttonList" role="tablist">
      <button class="m-buttonList__tabBtn" >Tab-1</button>
      <button class="m-buttonList__tabBtn">Tab-2</button>
      <button class="m-buttonList__tabBtn">Tab-3</button>
      <button class="m-buttonList__tabBtn">Tab-4</button>
    </div>

    <div class="m-contentList">
      <div class="m-contentList__tab -tab1 -open" >
        1- Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda nesciunt in, vero magnam repudiandae omnis exercitationem illum minus quidem beatae reprehenderit at vel nostrum eveniet dignissimos quas eius, est culpa voluptate quae, ab aliquam! Tempora, vitae exercitationem. Cupiditate ducimus omnis quibusdam dicta quae qui similique eaque deleniti ullam minus aperiam incidunt quia ratione repellat, molestiae hic fugiat nam error non aliquid possimus saepe facere? Quisquam necessitatibus unde nostrum iste at voluptates officia voluptatibus asperiores aspernatur, quia quos neque sapiente atque exercitationem ipsam, sit inventore explicabo. Error laborum dolorum impedit optio cumque illo ab voluptate. Exercitationem eos reiciendis voluptatum tenetur, delectus odio dignissimos ducimus, est alias autem aut culpa sunt aliquam quia praesentium aliquid a quas optio architecto ea recusandae beatae mollitia soluta quasi. Fugit deleniti quidem nam id expedita eligendi corrupti dignissimos omnis rerum cum culpa ipsum, similique quos. Sint consectetur maiores asperiores delectus aut blanditiis atque quibusdam quo assumenda ab dolore, minima dolorem nemo, molestiae tempora dicta, et reprehenderit! Debitis ea voluptatibus nostrum sed sunt nisi! Ipsa tempore voluptatum, sit, illum id minima adipisci nesciunt reprehenderit aut, vel alias iusto necessitatibus numquam consectetur rerum mollitia. Exercitationem in voluptate atque, quisquam accusamus repudiandae rem modi veniam optio neque itaque quis expedita esse totam. Earum, harum a animi adipisci ipsum optio ipsam eveniet omnis autem laborum dolore neque nesciunt quam cupiditate sequi enim dolores culpa, ut nisi. Adipisci in enim sit quidem vitae aliquam eligendi iste aperiam ut distinctio laudantium dolores voluptatem similique perferendis inventore praesentium beatae neque, modi eius ratione, alias, soluta architecto? Accusamus corrupti nulla nobis reiciendis, ex porro culpa, perspiciatis obcaecati quidem quis possimus soluta quasi adipisci aliquam pariatur iste magnam numquam nam unde. Voluptates quisquam, totam dolorem voluptas animi nam iure, temporibus repudiandae, in consequatur a id omnis voluptatibus sed. Nobis fugit, dolorum quam saepe quae veniam praesentium nemo illum expedita quia nihil voluptates natus sequi quidem repudiandae laborum et in perspiciatis deleniti commodi eius! Ea obcaecati veniam perspiciatis, voluptatum debitis tenetur! Possimus dolore voluptatum dolor accusantium, cupiditate veritatis quo voluptatem a ex laboriosam ipsam quisquam ducimus quis excepturi totam amet magnam tempore minima corporis error corrupti. Excepturi delectus repellendus nisi? Totam, qui corporis. Possimus quia iste atque voluptates velit et cum? Assumenda iure illo autem molestiae! Nam recusandae cumque, id itaque impedit minus suscipit obcaecati? Recusandae illum nisi, reiciendis adipisci minima qui eum expedita nesciunt, fugiat quam architecto facilis. Blanditiis ea vel, dicta eaque aliquam voluptatem.
      </div>
      <div class="m-contentList__tab -tab2">
        2- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid in vitae natus. Molestias maxime soluta autem explicabo quas accusamus! Quisquam mollitia excepturi rem dolor quos possimus ipsum voluptates molestias aspernatur, molestiae illum animi accusamus harum optio error temporibus expedita alias, beatae suscipit consequatur deleniti itaque assumenda laboriosam nemo. Itaque, nobis aliquam sed porro autem maiores distinctio ad temporibus recusandae velit numquam voluptatem reprehenderit incidunt molestias illum veniam commodi, minus vel laudantium ipsum veritatis eos blanditiis. Possimus quae labore odio dolorum atque asperiores consequatur neque, itaque quod molestiae perferendis nesciunt repudiandae, rerum expedita et? Ipsa dolore laborum fugiat repellat sapiente non modi numquam, minus voluptates nam vitae maiores consectetur voluptate? Eos saepe, quam perspiciatis harum laboriosam quas iure voluptates quos rem hic soluta obcaecati architecto accusamus iusto suscipit distinctio placeat a consequuntur omnis consectetur? Aliquam, voluptate! Dicta quis eveniet, eum distinctio asperiores illo recusandae. Aspernatur molestiae repudiandae animi itaque sed, cumque, minima omnis incidunt provident neque modi, nihil eaque error quidem doloremque! Quod earum ut aut, commodi ducimus odit, a maxime, labore minima optio dignissimos. Minus eveniet magnam totam iure at! Hic, illo nulla ut libero laboriosam dolor? Blanditiis est minima rem! At quod expedita sequi neque nobis maiores, odio nemo libero illum et nihil cum alias iste quasi ab eos animi atque voluptates inventore. Vero voluptas provident et eius iure quae numquam impedit similique nostrum id explicabo quisquam, hic delectus, facilis possimus optio dignissimos sequi fuga eum, porro dolor doloribus excepturi! Perferendis veritatis enim debitis ducimus quas harum praesentium eos quibusdam, amet magni possimus minus! Voluptas voluptatum, eveniet aperiam commodi perspiciatis ipsum adipisci. Facilis, nulla? Aliquid id ea at quibusdam cumque amet consectetur delectus. Quod reiciendis dolor vitae est corrupti culpa sed quis distinctio amet quia illo commodi, dignissimos perferendis id nobis ad. Dolores culpa mollitia, nihil reiciendis id doloremque!
      </div>
      <div class="m-contentList__tab -tab3">
        3- Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore debitis maiores doloribus iure inventore ipsa tempora dolor, iusto voluptas totam praesentium recusandae eveniet ipsum ab tempore ratione sequi porro fuga aliquam repellendus. Eveniet voluptate perferendis nam dolores, quidem culpa ab dolor magnam reiciendis facilis blanditiis aliquid quasi nesciunt error quisquam atque repellat, natus nostrum sed, modi illo quas praesentium beatae ullam. Ipsa vero aliquam blanditiis delectus ut animi voluptatum explicabo? Iusto veritatis quo architecto excepturi dolores enim dolor maxime totam velit repudiandae assumenda nobis cum sit ducimus ipsa, nam ex modi quae ratione vero fuga quam eligendi consequuntur. Repellendus cupiditate animi enim aperiam aut! Magni iure perferendis quidem natus beatae ipsa rerum corporis facilis ullam ratione, enim modi mollitia dolorem obcaecati atque impedit reprehenderit nemo ex in expedita, quia eum assumenda esse? Molestiae officia facere blanditiis possimus accusantium culpa, quo magnam nisi, deserunt iusto dolor? Soluta animi voluptate cumque consectetur! Laboriosam laudantium maxime natus perferendis quo et, incidunt aut aperiam sapiente alias ea. Voluptatem rerum nemo voluptate itaque molestias deserunt in! Commodi reprehenderit maiores quia veniam voluptas blanditiis amet magnam accusantium, vitae doloremque beatae libero natus praesentium et aperiam corporis obcaecati ipsam consectetur minima ex? Excepturi tempora a culpa modi corrupti iste quidem necessitatibus eaque reprehenderit rem doloribus voluptatem, doloremque dolor minima obcaecati mollitia tempore nulla labore hic, dicta praesentium consequatur? Aspernatur officia explicabo error laborum voluptatum provident consequatur saepe qui corporis! Eum porro odio ratione obcaecati mollitia non quia similique nulla. Exercitationem harum officiis nam necessitatibus fuga. Velit ipsum sint assumenda. Voluptatem quibusdam quisquam officia quas maxime earum, numquam quam commodi recusandae dolorum! Molestias eius ad sunt ratione nihil deserunt modi, tenetur accusantium pariatur reiciendis in velit aut, eum obcaecati, atque accusamus nulla consequatur facilis soluta ipsa! Voluptate, incidunt. Sequi, aut dolore? Doloribus nesciunt soluta hic, quos sint, error esse itaque alias illo atque perferendis eligendi quidem aliquam earum animi officiis saepe. Ipsam fugiat distinctio deleniti explicabo molestiae quisquam, ut nam nemo optio harum sapiente pariatur praesentium consequatur, quaerat obcaecati temporibus aspernatur ea ducimus officiis dolor quo atque. Praesentium qui velit, voluptatum facilis sunt quos pariatur dolorum quisquam minima sed ipsam odio tenetur? Quis sit natus aperiam esse, necessitatibus, nam magni distinctio, perferendis exercitationem optio voluptas? Tempora nulla culpa dignissimos modi hic quia officiis dolorum, laborum ut est, rerum dolor sit labore veniam! Alias recusandae doloribus suscipit nostrum quis! Placeat, fugiat! Obcaecati quae hic sed inventore explicabo officiis voluptates minima saepe repellat. Quisquam quidem nemo ipsam dolor tenetur laudantium adipisci facere expedita nesciunt perspiciatis, impedit, itaque libero reiciendis dolore doloremque in odio dicta quis temporibus, earum ratione exercitationem vitae qui! Eaque illum totam vero ab quidem tempore, a nisi quis beatae, magnam est itaque nesciunt autem pariatur, officiis tempora reprehenderit minima officia. Mollitia similique unde deleniti quasi ex cupiditate maxime libero sapiente! Doloremque, laudantium, exercitationem doloribus sequi impedit quae corporis reiciendis vitae consequuntur, iure sit nulla nisi maiores eos enim. Dolorum, quasi ea. In corrupti voluptatem, autem placeat consequuntur incidunt quod nam eaque molestiae? Illo, exercitationem? Nihil omnis dicta neque veniam aliquid similique ut assumenda harum sint, obcaecati placeat magni, quibusdam quas mollitia a, doloribus incidunt illum aliquam in! Laboriosam repudiandae, quod facilis dolorem dignissimos architecto aliquid odio, autem doloribus numquam modi blanditiis saepe ad quibusdam soluta veniam ipsam! Consectetur temporibus in, iusto laborum, ullam natus ipsa dolor esse, labore nemo optio quaerat debitis! Accusamus laudantium cumque labore perferendis eveniet fuga provident! Molestiae vero dicta alias corrupti corporis voluptate suscipit facilis natus quasi et? Aspernatur accusamus tempora deserunt! Soluta, magni. Culpa minima fuga mollitia. Commodi esse vero odit quia, nihil odio unde numquam debitis animi architecto porro doloribus laboriosam distinctio error enim, vel tenetur at, atque cum quo obcaecati rerum adipisci necessitatibus rem. Dicta repellat rem nihil voluptatibus beatae in sed corrupti ex unde a sequi libero iusto, natus, deleniti fugit voluptate quos, architecto maiores tenetur velit? Ab reiciendis architecto illo blanditiis maxime veniam quaerat sapiente fugiat eaque, laborum soluta similique pariatur cupiditate quisquam, assumenda odio? Maxime, expedita at sed incidunt quas reprehenderit recusandae cumque saepe! Culpa exercitationem, deserunt quis obcaecati rerum molestiae praesentium, veniam modi minus commodi eligendi vel ut qui iure quo iusto numquam? Autem ratione, eum corporis dolore sequi blanditiis incidunt molestiae temporibus sit, saepe corrupti?
      </div>
      <div class="m-contentList__tab -tab4">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo a, rem ut provident qui quidem corrupti necessitatibus modi quis inventore asperiores eveniet ex quibusdam cum! Consequuntur, quam necessitatibus? Ea unde dolorum voluptatum error soluta molestias voluptas eaque voluptates quasi praesentium, placeat repudiandae. Perspiciatis accusamus assumenda labore molestias recusandae nobis cumque amet. Amet ducimus rerum consectetur eaque magni porro nesciunt quibusdam. Accusantium illo sequi, necessitatibus molestias voluptatibus ratione maxime pariatur voluptate similique, at nobis, suscipit debitis sint sapiente excepturi doloribus quasi quis laborum fugiat adipisci ullam quidem! Dignissimos rerum expedita repellat laudantium, sapiente quos saepe, vitae vel blanditiis deserunt labore, magnam maiores omnis odit suscipit. Tempora, nesciunt! Magnam quae aspernatur omnis soluta, ea amet maxime tenetur illum saepe est cupiditate, praesentium quos delectus placeat sapiente quo commodi hic, aliquid repellat! Odit deserunt repudiandae unde! Rerum temporibus, accusantium est eligendi quas delectus, amet blanditiis voluptate debitis sequi excepturi modi. Doloremque ipsa animi nemo dolorum culpa sequi, maiores dignissimos dolorem perspiciatis veritatis, blanditiis consequuntur officiis facere quas labore eveniet quod assumenda aspernatur a, id harum dolores esse consequatur quisquam! Voluptate, inventore, assumenda esse asperiores nam porro et velit pariatur maxime eaque, mollitia ullam placeat quae molestiae aut magnam unde. Reiciendis, qui. Vero facere voluptatem necessitatibus? Vero atque quas voluptatibus! Perspiciatis est maxime quos molestias consequatur. Labore voluptatem officia tempore praesentium explicabo natus facilis, perspiciatis eos illo. Distinctio ipsa labore, cum illum error facilis iure ipsum corporis vitae minima. Voluptates quia iste laboriosam natus reprehenderit, esse et porro? Iure, rem harum ipsam impedit error iusto, omnis ut ipsa tempora perspiciatis maxime. Dolorem, repellendus voluptatum! Reiciendis eius animi nam neque, temporibus incidunt beatae iure numquam porro modi quos dolorum vel ipsum ea quibusdam ratione possimus similique nisi aliquam? Magni aliquid aliquam alias, reiciendis aut expedita, voluptatum eos optio praesentium, assumenda fugit perspiciatis hic ab. Officia necessitatibus magnam blanditiis neque saepe illum, nam ratione velit dicta autem dolor iusto dolore repellat totam praesentium porro tempore commodi! Cupiditate recusandae praesentium, magnam vel possimus tenetur architecto delectus pariatur dolore, quas numquam mollitia qui? Enim voluptas molestiae veniam ipsa pariatur officiis nam autem blanditiis? Asperiores beatae, ad necessitatibus molestias quia alias tenetur dolorum quaerat. Repellendus quo enim sed aperiam veniam ducimus, quod dolorem rerum mollitia, culpa in similique. Impedit nobis vitae, deserunt quas explicabo officia fuga alias corrupti totam est perspiciatis rerum labore praesentium ipsam a eveniet expedita in aliquid molestiae provident et laborum nemo blanditiis cum. Architecto vero quidem modi incidunt voluptatum deserunt fuga, sit dolorem est atque? Adipisci, tempora vel cupiditate porro dicta omnis est, blanditiis vitae odit, nisi magni. Distinctio fugit delectus, voluptas totam magnam nesciunt at doloribus voluptatem officia et, dolore quidem voluptate nemo molestiae fugiat! Facilis aliquid cumque praesentium commodi laborum cupiditate sapiente dolore modi saepe repellendus tempore sequi officia, minus soluta sint, maiores accusamus dicta maxime eum laboriosam minima dolores illum ut nobis! Est tempora eius hic fuga placeat exercitationem voluptatum consequatur, alias molestiae! Veritatis temporibus ratione vel aspernatur ut quos autem neque dolore perspiciatis fugit, sequi laudantium rem aperiam beatae exercitationem molestias ipsam, inventore cumque asperiores dolorum accusamus. Autem aliquam accusamus iste corporis, adipisci aperiam expedita officiis officia error velit magni. Odio ipsum accusantium natus minus. Libero, minima, deserunt voluptatum quidem accusamus accusantium quis veritatis hic provident quisquam quae qui quaerat cum ullam optio praesentium dolorem exercitationem quas vero beatae culpa! Sed consequatur expedita, magni, distinctio veritatis deleniti error maiores possimus, quae molestiae hic ducimus illum veniam corrupti officiis harum reiciendis porro perferendis sint explicabo accusamus? Blanditiis explicabo quis eos pariatur numquam, tenetur, nemo deserunt unde ad suscipit nam aut obcaecati at odit veritatis facilis expedita debitis? Commodi sunt eos temporibus natus! Consectetur dolorum aut doloribus eligendi, illum commodi mollitia magnam, hic ipsa delectus esse? Dolore explicabo earum hic voluptate, doloribus expedita eum. Est vitae alias repellendus architecto, debitis ipsam facilis quaerat dolores neque voluptatibus veniam, esse consequuntur velit optio minus eveniet modi nemo perferendis nulla quod. Repudiandae at, ipsa sed, consequatur ad vero velit quos obcaecati id odit accusamus sit quia maxime blanditiis dicta aut aperiam sint dolorem consequuntur. Culpa sapiente porro aliquam voluptatibus voluptates fugit facilis tenetur! Est tempore unde, beatae consequuntur debitis harum, dolor, doloribus alias molestias voluptate blanditiis at? Dicta, dolore. Deserunt dolorem hic molestias omnis, distinctio vero alias modi vel rerum similique ratione natus. Voluptatibus iure nulla sunt repellendus nostrum? Minus reiciendis enim, doloribus non corporis possimus sapiente unde doloremque quibusdam odio accusantium incidunt assumenda, blanditiis alias magni modi, voluptatum a? Repellendus, unde! Saepe, repudiandae impedit inventore earum cumque necessitatibus ratione magni, recusandae pariatur perferendis, cum tempore enim molestias fuga esse sed libero iste! Minima, magnam sunt. Aliquam distinctio laudantium repudiandae architecto voluptas voluptatem magni nesciunt, fugit veniam dolore cumque ducimus excepturi! Alias magnam repellendus et tempora atque dolores hic voluptatem doloribus voluptatibus voluptate assumenda sed veritatis ratione, molestiae libero id praesentium laborum, ipsum labore. Itaque dolores iure consequatur enim molestiae labore voluptatum, doloribus inventore eveniet impedit quasi repellendus at aperiam optio eum possimus, odio sapiente aspernatur unde autem numquam quae quisquam? Illo, quia! Velit neque dolorem vero eligendi dolore unde possimus minima consequatur porro? Rem animi magni possimus quam quae temporibus enim provident quia, atque officiis autem, repudiandae quos illum quibusdam ea et ipsam, facere a facilis error odio nostrum voluptate. Molestiae, tempora aperiam. Deserunt atque quis facere voluptatibus dolorem odit, possimus excepturi error. Eligendi, officiis quo saepe ipsam officia velit voluptatibus fugiat nemo! Doloremque iure esse dignissimos amet expedita dolorem quibusdam nostrum aliquid omnis optio.
      </div>
    </div>
</div>
!

CSS
!

JS
!
999px

Console