<!DOCTYPE html>
<!--suppress CommaExpressionJS, CssInvalidPropertyValue, CssInvalidPseudoSelector, JSUnresolvedVariable, JSDeprecatedSymbols, SpellCheckingInspection -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>New Tab</title>
<meta content="summary_large_image" name="twitter:card">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="style.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300,regular,500,600,700" media="all">
<script src="https://kit.fontawesome.com/62fde90999.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script>WebFont.load({ google: { families: ["Inter:300,regular,500,600,700"] }});</script>
<script>!function(o,c){
const n = c.documentElement, t = " w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="/favicon.ico" rel="apple-touch-icon">
<script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-52115242-20"></script>
<script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'UA-52115242-20', {'anonymize_ip': false});</script>
<style>
body{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
/* Generated on: Fri Feb 12 2021 22:06:51 GMT+0000 (Coordinated Universal Time) */
/* ==========================================================================
normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css
========================================================================== */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:none}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
/* ==========================================================================
Start of base Webflow CSS - If you're looking for some ultra-clean CSS, skip the boilerplate and see the unminified code below.
========================================================================== */
@font-face{font-family:'webflow-icons';src:url("data:application/x-font-ttf;charset=utf-8;base64,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") format('truetype');font-weight:normal;font-style:normal}[class^="w-icon-"],[class*=" w-icon-"]{font-family:'webflow-icons',serif !important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} html{height:100%} body{margin:0;min-height:100%;background-color:#fff;font-family:Arial,sans-serif;font-size:14px;line-height:20px;color:#333} img{max-width:100%;vertical-align:middle;display:inline-block} html.w-mod-touch *{background-attachment:scroll !important}
.w-inline-block{max-width:100%;display:inline-block}
.w-button{display:inline-block;padding:9px 15px;background-color:#3898EC;color:white;border:0;line-height:inherit;text-decoration:none;cursor:pointer;border-radius:0} input.w-button{-webkit-appearance:button} html[data-w-dynpage] [data-w-cloak]{color:transparent !important}
.w-webflow-badge>img{display:inline-block !important;visibility:visible !important;opacity:1 !important;vertical-align:middle !important} h1,h2,h3,h4,h5,h6{font-weight:bold;margin-bottom:10px} h1{font-size:38px;line-height:44px;margin-top:20px} h2{font-size:32px;line-height:36px;margin-top:20px} h3{font-size:24px;line-height:30px;margin-top:20px} h4{font-size:18px;line-height:24px;margin-top:10px} h5{font-size:14px;line-height:20px;margin-top:10px} h6{font-size:12px;line-height:18px;margin-top:10px} p{margin-top:0;margin-bottom:10px} blockquote{margin:0 0 10px 0;padding:10px 20px;border-left:5px solid #E2E2E2;font-size:18px;line-height:22px} figure{
margin: 0 0 10px;
} figcaption{margin-top:5px;text-align:center} ul,ol{margin-top:0;margin-bottom:10px;padding-left:40px}
.w-video iframe,.w-video object,.w-video embed{position:absolute;top:0;left:0;width:100%;height:100%} fieldset{padding:0;margin:0;border:0} button,html input[type="button"],input[type="reset"]{border:0;cursor:pointer;-webkit-appearance:button}
label{display:block;margin-bottom:5px;font-weight:bold}
@media screen and (max-width:991px){
}@media screen and (max-width:767px){
}@media screen and (max-width:479px){
}
.w-widget-map label{width:auto;display:inline} .w-widget-map img{max-width:inherit}
.w-widget-map .gm-style-iw>button{display:none !important}
.w-widget-twitter-count-shim *{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.w-background-video>video{background-size:cover;background-position:50% 50%;position:absolute;margin:auto;width:100%;height:100%;right:-100%;bottom:-100%;top:-100%;left:-100%;object-fit:cover;z-index:-100} .w-background-video>video::-webkit-media-controls-start-playback-button{display:none !important;-webkit-appearance:none}
.w-slider-nav.w-round>div{border-radius:100%} .w-slider-nav.w-num>div{width:auto;height:auto;padding:.2em .5em;font-size:inherit;line-height:inherit} .w-slider-nav.w-shadow>div{box-shadow:0 0 3px rgba(51,51,51,0.4)}
.w-slider-nav-invert>div{background-color:rgba(34,34,34,0.4)}
.w-slider-arrow-left [class^="w-icon-"],.w-slider-arrow-right [class^="w-icon-"],.w-slider-arrow-left [class*=" w-icon-"],.w-slider-arrow-right [class*=" w-icon-"]{position:absolute}
@media screen and (max-width:767px){
}
@media (min-width:768px){
}
.w-richtext ol,.w-richtext ul{overflow:hidden} .w-richtext .w-richtext-figure-selected.w-richtext-figure-type-video div:after,.w-richtext .w-richtext-figure-selected[data-rt-type="video"] div:after{outline:2px solid #2895f7} .w-richtext .w-richtext-figure-selected.w-richtext-figure-type-image div,.w-richtext .w-richtext-figure-selected[data-rt-type="image"] div{outline:2px solid #2895f7} .w-richtext figure.w-richtext-figure-type-video>div:after,.w-richtext figure[data-rt-type="video"]>div:after{content:'';position:absolute;display:none;left:0;top:0;right:0;bottom:0} .w-richtext figure{position:relative;max-width:60%} .w-richtext figure>div:before{cursor:default !important} .w-richtext figure img{width:100%}
.w-richtext figure div{font-size:0;color:transparent}
.w-richtext figure.w-richtext-figure-type-image>div,.w-richtext figure[data-rt-type="image"]>div{display:inline-block} .w-richtext figure.w-richtext-figure-type-image>figcaption,.w-richtext figure[data-rt-type="image"]>figcaption{display:table-caption;caption-side:bottom}
.w-richtext figure.w-richtext-figure-type-video iframe,.w-richtext figure[data-rt-type="video"] iframe{position:absolute;top:0;left:0;width:100%;height:100%} .w-richtext figure.w-richtext-figure-type-video>div,.w-richtext figure[data-rt-type="video"]>div{width:100%}
.w-richtext figure.w-richtext-align-center.w-richtext-figure-type-image>div,.w-richtext figure.w-richtext-align-center[data-rt-type="image"]>div{max-width:100%}
.w-richtext figure.w-richtext-align-fullwidth>div{display:inline-block;padding-bottom:inherit} .w-richtext figure.w-richtext-align-fullwidth>figcaption{display:block}
[data-nav-menu-open]{display:block !important;position:absolute;top:100%;left:0;right:0;background:#C8C8C8;text-align:center;overflow:visible;min-width:200px}
.w-nav-overlay [data-nav-menu-open]{top:0}
@media screen and (max-width:991px){
}@media screen and (max-width:767px){
}@media screen and (max-width:479px){
} .w-tabs{position:relative} .w-tabs:before,.w-tabs:after{content:" ";display:table;grid-column-start:1;grid-row-start:1;grid-column-end:2;grid-row-end:2} .w-tabs:after{clear:both} .w-tab-menu{position:relative} .w-tab-link{position:relative;display:inline-block;vertical-align:top;text-decoration:none;padding:9px 30px;text-align:left;cursor:pointer;color:#222222;background-color:#dddddd} .w-tab-link.w--current{background-color:#C8C8C8} .w-tab-link:focus{outline:0} .w-tab-content{position:relative;display:block;overflow:hidden} .w-tab-pane{position:relative;display:none} .w--tab-active{display:block}@media screen and (max-width:479px){.w-tab-link{display:block}}
@keyframes spin{0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)}}
/* ==========================================================================
Start of custom Webflow CSS
========================================================================== */
body {
padding-bottom: 96px;
background-color: #12141d;
font-family: Inter, sans-serif;
color: hsla(0, 0%, 100%, 0.5);
font-size: 16px;
line-height: 24px;
font-weight: 500;
}
h1 {
margin-top: 0;
margin-bottom: 24px;
font-family: Inter, sans-serif;
color: #fff;
font-size: 40px;
line-height: 44px;
font-weight: 600;
letter-spacing: -0.02em;
}
h2 {
margin-top: 0;
margin-bottom: 24px;
font-family: Inter, sans-serif;
color: #fff;
font-size: 32px;
line-height: 40px;
font-weight: 600;
letter-spacing: -0.02em;
}
h3 {
margin-top: 0;
margin-bottom: 24px;
font-family: Inter, sans-serif;
color: #fff;
font-size: 28px;
line-height: 36px;
font-weight: 600;
letter-spacing: -0.01em;
}
h4 {
margin-top: 0;
margin-bottom: 16px;
font-family: Inter, sans-serif;
color: #fff;
font-size: 24px;
line-height: 30px;
font-weight: 600;
letter-spacing: 0;
}
h5 {
margin-top: 0;
margin-bottom: 12px;
font-family: Inter, sans-serif;
color: #fff;
font-size: 20px;
line-height: 28px;
font-weight: 600;
letter-spacing: 0;
}
h6 {
margin-top: 0;
margin-bottom: 12px;
font-family: Inter, sans-serif;
color: #fff;
font-size: 16px;
line-height: 24px;
font-weight: 600;
letter-spacing: 0;
}
p {
margin-bottom: 24px;
}
a {
font-family: Inter, sans-serif;
color: #fff;
font-weight: 600;
text-decoration: none;
}
ul {
margin-top: 20px;
margin-bottom: 0;
padding-left: 24px;
padding-right: 24px;
}
img {
display: inline-block;
max-width: 100%;
border-radius: 25px;
}
blockquote {
margin-top: 48px;
margin-bottom: 48px;
padding: 48px;
border-left: 5px none #e2e2e2;
border-radius: 12px;
background-color: #8f2df0;
color: #fff;
font-size: 28px;
line-height: 36px;
font-weight: 600;
letter-spacing: -0.01em;
}
figure {
margin-bottom: 10px;
}
figcaption {
margin-top: 12px;
font-size: 14px;
line-height: 22px;
text-align: center;
}
.container {
width: 100%;
max-width: 1296px;
margin-right: auto;
margin-left: auto;
padding-right: 24px;
padding-left: 24px;
-webkit-perspective: 500px;
perspective: 500px;
}
.section {
margin-top: 100px;
margin-bottom: 1px;
}
.section.demo-pages-section {
margin-top: 0;
margin-bottom: 0;
padding-top: 15px;
padding-bottom: 0;
}
.panel {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
border-radius: 12px;
background-color: hsla(0, 0%, 100%, 0.05);
direction: ltr;
}
.panel.section {
position: relative;
margin-top: 24px;
margin-bottom: 24px;
padding-top: 108px;
}
.card-heading {
color: #fff;
font-size: 32px;
line-height: 40px;
font-weight: 600;
letter-spacing: -0.02em;
}
.bg-gray-3 {
background-color: hsla(0, 0%, 100%, 0.1);
}
.display-heading-2 {
margin-bottom: 36px;
font-family: Inter, sans-serif;
color: #fff;
font-size: 88px;
line-height: 88px;
font-weight: 700;
letter-spacing: -0.02em;
}
.button {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 48px;
padding-right: 24px;
padding-left: 24px;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border-radius: 6px;
background-color: #0252e7;
box-shadow: inset 0 0 20px 20px transparent;
-webkit-transition: box-shadow 200ms ease;
transition: box-shadow 200ms ease;
font-weight: 600;
margin: 10px;
}
.button:hover {
box-shadow: inset 0 0 20px 20px rgba(0, 0, 0, 0.185);
background-color: #0146c5;
}
.button:active {
box-shadow: inset 0 0 20px 20px rgba(0, 0, 0, 0.185);
background-color: #003caa;
}
.button-circle {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 48px;
height: 48px;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border-radius: 50%;
background-color: #ff715b;
}
.button-circle:hover {
opacity: 0.75;
}
.button-circle.bg-gray-3 {
background-color: hsla(0, 0%, 100%, 0.1);
}
.button-circle-icon {
width: 20px;
height: 20px;
}
.panel-body {
position: relative;
z-index: 1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
margin-right: auto;
margin-left: auto;
padding: 36px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-box-flex: 1;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
.panel-body.panel-body-small {
padding: 24px;
}
.display-inline {
display: inline;
}
.content-width-extra-large {
width: 100%;
max-width: 964px;
margin-right: auto;
margin-left: auto;
}
.text-gray-4 {
color: hsla(0, 0%, 100%, 0.5);
}
.space-bottom-large {
margin-bottom: 36px;
}
.panel-body-small {
padding: 24px;
}
.article h5 {
margin-top: 48px;
margin-bottom: 20px;
}
.article img {
border-radius: 12px;
}
.article figure {
margin-top: 72px;
margin-bottom: 72px;
}
.article ul {
margin-top: 36px;
margin-bottom: 36px;
}
.article li {
margin-top: 12px;
margin-bottom: 12px;
}
.article h4 {
margin-top: 48px;
}
.article h2 {
margin-top: 48px;
}
.back-to-top-button-wrapper {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 10;
width: 48px;
height: 48px;
border-style: none;
border-width: 1px;
border-color: #12141d;
border-radius: 50%;
background-color: #12141d;
}
.tabs-vertical-menu {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.tabs-vertical-tab {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 48px;
margin-right: 12px;
margin-bottom: 12px;
padding-right: 24px;
padding-left: 24px;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
border-radius: 6px;
background-color: hsla(0, 0%, 100%, 0.1);
-webkit-transition: color 200ms ease, background-color 200ms ease;
transition: color 200ms ease, background-color 200ms ease;
color: hsla(0, 0%, 100%, 0.5);
}
.tabs-vertical-tab.w--current {
background-color: hsla(0, 0%, 100%, 0.5);
color: #fff;
}
.fixed-notice-container {
position: fixed;
left: 24px;
bottom: 24px;
z-index: 10;
max-width: 400px;
border-radius: 12px;
background-color: #12141d;
box-shadow: 0 12px 12px 0 rgba(0, 0, 0, 0.2);
}
.notice-dismiss {
position: absolute;
top: 12px;
right: 12px;
z-index: 2;
cursor: pointer;
}
@media screen and (max-width: 991px) {
blockquote {
margin-top: 36px;
margin-bottom: 36px;
}
.section {
margin-top: 96px;
margin-bottom: 96px;
}
.panel.section {
padding-top: 60px;
padding-bottom: 60px;
}
.display-heading-2 {
font-size: 72px;
line-height: 72px;
}
.article h5 {
margin-top: 48px;
}
.article figure {
margin-top: 48px;
margin-bottom: 48px;
}
.article ul {
margin-top: 36px;
margin-bottom: 36px;
}
.grid-container {
max-width: 612px;
}
}
@media screen and (max-width: 767px) {
body {
padding-bottom: 24px;
}
h1 {
font-size: 32px;
line-height: 40px;
}
h2 {
font-size: 28px;
line-height: 36px;
}
h4 {
font-size: 20px;
line-height: 28px;
}
blockquote {
margin-top: 24px;
margin-bottom: 24px;
padding: 24px;
}
.section {
margin-top: 72px;
margin-bottom: 72px;
}
.panel.section {
padding-top: 48px;
padding-bottom: 48px;
}
.display-heading-2 {
font-size: 35px;
line-height: 54px;
}
.article h5 {
margin-top: 24px;
}
.article img {
border-radius: 6px;
}
.article figure {
margin-top: 24px;
margin-bottom: 24px;
}
.article ul {
margin-top: 24px;
margin-bottom: 24px;
}
.back-to-top-button-wrapper {
display: none;
}
.tabs-vertical-menu {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
@media screen and (max-width: 479px) {
body {
padding-bottom: 12px;
}
h1 {
font-size: 32px;
line-height: 40px;
}
h2 {
font-size: 28px;
line-height: 36px;
}
h3 {
font-size: 24px;
line-height: 30px;
}
blockquote {
padding: 24px;
border-radius: 6px;
font-size: 20px;
line-height: 30px;
}
.container {
padding-right: 12px;
padding-left: 12px;
}
.panel {
border-radius: 6px;
}
.panel.section {
margin-top: 12px;
margin-bottom: 12px;
}
.card-heading {
font-size: 28px;
line-height: 32px;
}
.display-heading-2 {
font-size: 35px;
line-height: 44px;
}
.panel-body {
padding: 24px;
}
.tabs-vertical-tab:hover {
background-color: hsla(0, 0%, 100%, 0.5);
color: #fff;
}
.fixed-notice-container {
left: 12px;
bottom: 12px;
max-width: 298px;
border-radius: 6px;
}
}
.psm-meta > #psm-top-part > #psm-icon > img{
float: left;
border-radius: 10px;
}
</style>
</head>
<script>
document.onkeydown = function(e) {
if(event.keyCode === 123) {
return false;
}
if(e.ctrlKey && e.shiftKey && e.keyCode === 'I'.charCodeAt(0)){
return false;
}
if(e.ctrlKey && e.shiftKey && e.keyCode === 'J'.charCodeAt(0)){
return false;
}
if(e.ctrlKey && e.keyCode === 'U'.charCodeAt(0)){
return false;
}
}
document.addEventListener('contextmenu', event => event.preventDefault());
</script>
<body>
<div id="Top" class="back-to-top-container">
<div class="back-to-top-button-wrapper" style="opacity: 0; transform: translate3d(0px, 0px, 0px) scale3d(0, 0, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d;"><a href="#Top" class="button-circle bg-gray-3 w-inline-block"><img src="https://assets.website-files.com/5dcb2e333e05bec4ef2fee2f/5dd224eeedfe6ae0b672ad8b_icon-arrow-up.svg" alt="" class="button-circle-icon"></a></div>
</div>
<div class="section">
<div class="container grid-container">
<div class="content-width-extra-large">
<h3 class="display-heading-2">Xero Browser<br></h3>
<div>
<h3 class="card-heading display-inline">New</h3>
<h3 class="card-heading display-inline text-gray-4">Tab</h3>
</div>
</div>
</div>
</div>
<div id="company" class="section demo-pages-section">
<div class="container">
<div class="content-width-extra-large">
<div data-duration-in="300" data-duration-out="100" class="tabs-vertical w-tabs">
<div class="tabs-vertical-menu w-tab-menu" role="tablist">
<a data-w-tab="Tab 1" class="tabs-vertical-tab w-inline-block w-tab-link w--current" id="w-tabs-1-data-w-tab-0" href="#w-tabs-1-data-w-pane-0" role="tab" aria-controls="w-tabs-1-data-w-pane-0" aria-selected="true">
<div>Search Engines</div>
</a>
<a data-w-tab="Tab 2" class="tabs-vertical-tab w-inline-block w-tab-link" tabindex="-1" id="w-tabs-1-data-w-tab-1" href="#w-tabs-1-data-w-pane-1" role="tab" aria-controls="w-tabs-1-data-w-pane-1" aria-selected="false">
<div>Social Media</div>
</a>
<a data-w-tab="Tab 3" class="tabs-vertical-tab w-inline-block w-tab-link" tabindex="-1" id="w-tabs-1-data-w-tab-2" href="#w-tabs-1-data-w-pane-2" role="tab" aria-controls="w-tabs-1-data-w-pane-2" aria-selected="false">
<div>Entertainment</div>
</a>
<a data-w-tab="Tab 4" class="tabs-vertical-tab w-inline-block w-tab-link" id="w-tabs-1-data-w-tab-3" href="#w-tabs-1-data-w-pane-3" role="tab" aria-controls="w-tabs-1-data-w-pane-3" aria-selected="false" tabindex="-1">
<div>Work/Education</div>
</a>
<a data-w-tab="Tab 5" class="tabs-vertical-tab w-inline-block w-tab-link" id="w-tabs-1-data-w-tab-4" href="#w-tabs-1-data-w-pane-4" role="tab" aria-controls="w-tabs-1-data-w-pane-4" aria-selected="false" tabindex="-1">
<div>Gaming</div>
</a>
</div>
<div class="w-tab-content">
<div data-w-tab="Tab 1" class="w-tab-pane w--tab-active" id="w-tabs-1-data-w-pane-0" role="tabpanel" aria-labelledby="w-tabs-1-data-w-tab-0" style="opacity: 1; transition: opacity 300ms ease 0s;">
<div class="panel">
<div class="panel-body">
<div class="space-bottom-large">
<div>
<a href="https://google.com/" class="button w-button"><i class="fa fa-google"></i> Google</a>
<a href="https://bing.com/" class="button w-button">Bing</a>
<a href="https://duckduckgo.com/" class="button w-button">DuckDuckGo</a>
</div>
</div>
</div>
</div>
</div>
<div data-w-tab="Tab 2" class="w-tab-pane" id="w-tabs-1-data-w-pane-1" role="tabpanel" aria-labelledby="w-tabs-1-data-w-tab-1">
<div class="panel">
<div class="panel-body">
<div class="space-bottom-large">
<div>
<a href="https://facebook.com/" class="button w-button"><i class="fa-brands fa-facebook"></i> Facebook</a>
<a href="https://twitter.com/" class="button w-button"><i class="fa fa-twitter"></i> Twitter</a>
<a href="https://mastodon.social/explore" class="button w-button"><i class="fa fa-mastodon"></i> Mastodon</a>
</div>
</div>
</div>
</div>
</div>
<div data-w-tab="Tab 3" class="w-tab-pane" id="w-tabs-1-data-w-pane-2" role="tabpanel" aria-labelledby="w-tabs-1-data-w-tab-2">
<div class="panel">
<div class="panel-body">
<div class="space-bottom-large">
<div>
<a href="https://youtube.com/" class="button w-button"><i class="fa-brands fa-youtube"></i> Youtube</a>
<a href="https://twitch.tv/" class="button w-button"><i class="fa fa-twitch"></i> Twitch</a>
<a href="https://tiktok.com/" class="button w-button"><i class="fa-brands fa-tiktok"></i> TikTok</a>
<br>
<h3>Note: Some services may not work with Xero Browser because the browser dosen't support DRM (Digital rights management) yet.</h3>
<a href="https://en.wikipedia.org/wiki/Digital_rights_management" class="button w-button" target="_blank">What is this?</a>
</div>
</div>
</div>
</div>
</div>
<div data-w-tab="Tab 4" class="w-tab-pane" id="w-tabs-1-data-w-pane-3" role="tabpanel" aria-labelledby="w-tabs-1-data-w-tab-3">
<div class="panel">
<div class="panel-body">
<div class="space-bottom-large">
<div>
<a href="https://classroom.google.com" class="button w-button">Google Classroom</a>
<a href="https://drive.google.com" class="button w-button"><i class="fa-brands fa-google-drive"></i> Google Drive</a>
<a href="https://mail.google.com" class="button w-button">Gmail</a>
</div>
</div>
</div>
</div>
</div>
<div data-w-tab="Tab 5" class="w-tab-pane" id="w-tabs-1-data-w-pane-4" role="tabpanel" aria-labelledby="w-tabs-1-data-w-tab-4">
<div class="panel">
<div class="panel-body">
<div class="space-bottom-large">
<div>
<a href="https://hoyolab.com" class="button w-button">Hoyolab</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<br>
<div class="fixed-notice-container">
<div class="panel bg-gray-3">
<div class="notice-dismiss">
</div>
<div class="panel-body panel-body-small"><h6>Notice!</h6>
<div>Xero Browser is in beta stages right now, so expect lots of bugs.</div>
</div>
</div>
</div>
<script src="jquery-3.5.1.min.dc5e7f18c8.js"></script>
<script src="script.js"></script>