-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
110 lines (103 loc) · 8.37 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Tabby</title>
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:400,600" rel="stylesheet">
<style>
body {
padding: 2.5rem;
font-family: 'Titillium Web', sans-serif;
}
.tabs {
width: 100%;
max-width: 400px;
margin: 0 auto;
border-radius: .25rem;
overflow: hidden;
}
.tabs .bar {
width: 100%;
display: flex;
}
.tabs [data-tabby-bar]:first-child {
border-left: none;
}
.tabs [data-tabby-bar] {
padding: 1.25rem;
text-align: center;
cursor: pointer;
flex: 1;
color: rgba(33,33,33, .2);
border-bottom: .0625rem solid rgba(33,33,33, .2);
}
.tabs [data-tabby-bar]:hover {
color: rgba(33,33,33, .3);
border-bottom: .0625rem solid rgba(33,33,33, .3);
}
.tabs [data-tabby-bar][data-tabby-active] {
color: rgba(33,33,33,1);
border-bottom: .0625rem solid rgba(33,33,33, 1);
}
.tabs [data-tabby-content] {
padding: 1.25rem;
}
</style>
</head>
<body>
<div class="tabs" data-tabby>
<div class="bar">
<div data-tabby-bar="1" data-tabby-active>Tab 1</div>
<div data-tabby-bar="car">Tab 2</div>
<div data-tabby-bar="3">Tab 3</div>
<div data-tabby-bar="4">Tab 4</div>
</div>
<div class="content">
<div data-tabby-content="1" data-tabby-active>
<p>Minions ipsum potatoooo ti aamoo! Bananaaaa. Bananaaaa potatoooo poopayee para tú bee do bee do bee do. Ti aamoo! tatata bala tu ti aamoo! Bappleees tank yuuu! Tank yuuu! Chasy potatoooo. Tulaliloo para tú me want bananaaa! Chasy. Tank yuuu! para tú hahaha chasy bappleees belloo! Daa jiji me want bananaaa! La bodaaa jeje hana dul sae hahaha para tú pepete.</p>
</div>
<div data-tabby-content="car">
<p>Minions ipsum potatoooo ti aamoo! Bananaaaa. Bananaaaa potatoooo poopayee para tú bee do bee do bee do. Ti aamoo! tatata bala tu ti aamoo! Bappleees tank yuuu! Tank yuuu! Chasy potatoooo. Tulaliloo para tú me want bananaaa! Chasy. Tank yuuu! para tú hahaha chasy bappleees belloo! Daa jiji me want bananaaa! La bodaaa jeje hana dul sae hahaha para tú pepete.</p>
<p>Minions ipsum potatoooo ti aamoo! Bananaaaa. Bananaaaa potatoooo poopayee para tú bee do bee do bee do. Ti aamoo! tatata bala tu ti aamoo! Bappleees tank yuuu! Tank yuuu! Chasy potatoooo. Tulaliloo para tú me want bananaaa! Chasy. Tank yuuu! para tú hahaha chasy bappleees belloo! Daa jiji me want bananaaa! La bodaaa jeje hana dul sae hahaha para tú pepete.</p>
</div>
<div data-tabby-content="3">
<p>Minions ipsum sed ut cillum. Tank yuuu! jiji ti aamoo! Aliqua. Potatoooo aaaaaah dolor exercitation consequat ullamco veniam underweaaar tatata bala tu aliqua ex. Dolor po kass po kass eiusmod tank yuuu! Uuuhhh. Para tú esse tatata bala tu dolor exercitation adipisicing enim. Tank yuuu! baboiii tatata bala tu dolore aaaaaah bee do bee do bee do sit amet bee do bee do bee do incididunt sed incididunt. Bananaaaa poulet tikka masala uuuhhh wiiiii eiusmod eiusmod officia. Adipisicing reprehenderit tatata bala tu esse consectetur. Wiiiii para tú occaecat reprehenderit ut.</p>
</div>
<div data-tabby-content="4"><p>Minions ipsum sed ut cillum. Tank yuuu! jiji ti aamoo! Aliqua. Potatoooo aaaaaah dolor exercitation consequat ullamco veniam underweaaar tatata bala tu aliqua ex. Dolor po kass po kass eiusmod tank yuuu! Uuuhhh. Para tú esse tatata bala tu dolor exercitation adipisicing enim. Tank yuuu! baboiii tatata bala tu dolore aaaaaah bee do bee do bee do sit amet bee do bee do bee do incididunt sed incididunt. Bananaaaa poulet tikka masala uuuhhh wiiiii eiusmod eiusmod officia. Adipisicing reprehenderit tatata bala tu esse consectetur. Wiiiii para tú occaecat reprehenderit ut.</p><p>Minions ipsum sed ut cillum. Tank yuuu! jiji ti aamoo! Aliqua. Potatoooo aaaaaah dolor exercitation consequat ullamco veniam underweaaar tatata bala tu aliqua ex. Dolor po kass po kass eiusmod tank yuuu! Uuuhhh. Para tú esse tatata bala tu dolor exercitation adipisicing enim. Tank yuuu! baboiii tatata bala tu dolore aaaaaah bee do bee do bee do sit amet bee do bee do bee do incididunt sed incididunt. Bananaaaa poulet tikka masala uuuhhh wiiiii eiusmod eiusmod officia. Adipisicing reprehenderit tatata bala tu esse consectetur. Wiiiii para tú occaecat reprehenderit ut.</p>
<div class="tabs" data-tabby>
<div class="bar">
<div data-tabby-bar="1" data-tabby-active>Tab 1</div>
<div data-tabby-bar="car">Tab 2</div>
<div data-tabby-bar="3">Tab 3</div>
<div data-tabby-bar="4">Tab 4</div>
</div>
<div class="content">
<div data-tabby-content="1" data-tabby-active>
<p>Minions ipsum potatoooo ti aamoo! Bananaaaa. Bananaaaa potatoooo poopayee para tú bee do bee do bee do. Ti aamoo! tatata bala tu ti aamoo! Bappleees tank yuuu! Tank yuuu! Chasy potatoooo. Tulaliloo para tú me want bananaaa! Chasy. Tank yuuu! para tú hahaha chasy bappleees belloo! Daa jiji me want bananaaa! La bodaaa jeje hana dul sae hahaha para tú pepete.</p>
</div>
<div data-tabby-content="car">
<p>Minions ipsum potatoooo ti aamoo! Bananaaaa. Bananaaaa potatoooo poopayee para tú bee do bee do bee do. Ti aamoo! tatata bala tu ti aamoo! Bappleees tank yuuu! Tank yuuu! Chasy potatoooo. Tulaliloo para tú me want bananaaa! Chasy. Tank yuuu! para tú hahaha chasy bappleees belloo! Daa jiji me want bananaaa! La bodaaa jeje hana dul sae hahaha para tú pepete.</p>
<p>Minions ipsum potatoooo ti aamoo! Bananaaaa. Bananaaaa potatoooo poopayee para tú bee do bee do bee do. Ti aamoo! tatata bala tu ti aamoo! Bappleees tank yuuu! Tank yuuu! Chasy potatoooo. Tulaliloo para tú me want bananaaa! Chasy. Tank yuuu! para tú hahaha chasy bappleees belloo! Daa jiji me want bananaaa! La bodaaa jeje hana dul sae hahaha para tú pepete.</p>
</div>
<div data-tabby-content="3">
<p>Minions ipsum sed ut cillum. Tank yuuu! jiji ti aamoo! Aliqua. Potatoooo aaaaaah dolor exercitation consequat ullamco veniam underweaaar tatata bala tu aliqua ex. Dolor po kass po kass eiusmod tank yuuu! Uuuhhh. Para tú esse tatata bala tu dolor exercitation adipisicing enim. Tank yuuu! baboiii tatata bala tu dolore aaaaaah bee do bee do bee do sit amet bee do bee do bee do incididunt sed incididunt. Bananaaaa poulet tikka masala uuuhhh wiiiii eiusmod eiusmod officia. Adipisicing reprehenderit tatata bala tu esse consectetur. Wiiiii para tú occaecat reprehenderit ut.</p>
</div>
<div data-tabby-content="4"><p>Minions ipsum sed ut cillum. Tank yuuu! jiji ti aamoo! Aliqua. Potatoooo aaaaaah dolor exercitation consequat ullamco veniam underweaaar tatata bala tu aliqua ex. Dolor po kass po kass eiusmod tank yuuu! Uuuhhh. Para tú esse tatata bala tu dolor exercitation adipisicing enim. Tank yuuu! baboiii tatata bala tu dolore aaaaaah bee do bee do bee do sit amet bee do bee do bee do incididunt sed incididunt. Bananaaaa poulet tikka masala uuuhhh wiiiii eiusmod eiusmod officia. Adipisicing reprehenderit tatata bala tu esse consectetur. Wiiiii para tú occaecat reprehenderit ut.</p><p>Minions ipsum sed ut cillum. Tank yuuu! jiji ti aamoo! Aliqua. Potatoooo aaaaaah dolor exercitation consequat ullamco veniam underweaaar tatata bala tu aliqua ex. Dolor po kass po kass eiusmod tank yuuu! Uuuhhh. Para tú esse tatata bala tu dolor exercitation adipisicing enim. Tank yuuu! baboiii tatata bala tu dolore aaaaaah bee do bee do bee do sit amet bee do bee do bee do incididunt sed incididunt. Bananaaaa poulet tikka masala uuuhhh wiiiii eiusmod eiusmod officia. Adipisicing reprehenderit tatata bala tu esse consectetur. Wiiiii para tú occaecat reprehenderit ut.</p></div>
</div>
</div>
</div>
<script src="dist/tabby.iife.js"></script>
<script>
const myTabs = Tabby.init({
animation: 'fade'
});
myTabs.forEach((tab, index) => {
if (index === 0) {
setTimeout(() => {
tab.destroy();
}, 3000);
}
});
</script>
</body>
</html>