Skip to content

Instantly share code, notes, and snippets.

@hankchizljaw hankchizljaw/index.html Secret
Last active Feb 3, 2020

Embed
What would you like to do?
Tabs complete HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Front-End Challenges Club - 005</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,400i,700&display=swap" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modern-css-reset/dist/reset.min.css" />
<link rel="stylesheet" href="/css/global.css" />
</head>
<body>
<main>
<h1>My lovely product</h1>
<tabs-group class="flow">
<article>
<h2 data-element="trigger">Summary</h2>
<div data-element="panel" class="flow">
<p><strong>This product is good and you should buy it</strong></p>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</article>
<article>
<h2 data-element="trigger">Specifications</h2>
<div data-element="panel" class="flow">
<p><strong>Technical details</strong></p>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</article>
<article>
<h2 data-element="trigger">Features</h2>
<div data-element="panel" class="flow">
<p><strong>Lot’s of lovely features</strong></p>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</article>
<article>
<h2 data-element="trigger">Refunds And Returns</h2>
<div data-element="panel" class="flow">
<p><strong>Here’s what to do if you want to have a refund</strong></p>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</article>
</tabs-group>
</main>
<script src="/js/components/tabs-group.js" type="module" defer></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.