<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tabs</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap"
rel="stylesheet"
type='text/css'
>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="dist/purify.min.js"></script>
</head>
<body>
<div class="container">
<div class="container-top-ten">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="20" viewBox="0 0 14 20" fill="none">
<path d="M3.00086 1H11.0009M10.0009 1V7L7.00086 9L4.00086 7V1H10.0009ZM7.00086 9L5.26086 12.29L1.38086 12.82L4.19086 15.38L3.52086 19L7.00086 17.29L10.4809 19L9.81086 15.38L12.6309 12.82L8.74086 12.29L7.00086 9Z" stroke="#BBCFD5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Trending
</div>
<header>
<div class="tabs">
<a id="tab1" name="games" href="#tab1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 5h3.5a5 5 0 0 1 0 10h-5.5l-4.015 4.227a2.3 2.3 0 0 1 -3.923 -2.035l1.634 -8.173a5 5 0 0 1 4.904 -4.019h3.4z"></path>
<path d="M14 15l4.07 4.284a2.3 2.3 0 0 0 3.925 -2.023l-1.6 -8.232"></path>
<path d="M8 9v2"></path>
<path d="M7 10h2"></path>
<path d="M14 10h2"></path>
</svg>
Games
</a>
<a id="tab2" name="movies" href="#tab2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"></path>
<path d="M8 4l0 16"></path>
<path d="M16 4l0 16"></path>
<path d="M4 8l4 0"></path>
<path d="M4 16l4 0"></path>
<path d="M4 12l16 0"></path>
<path d="M16 8l4 0"></path>
<path d="M16 16l4 0"></path>
</svg>
Movies
</a>
<a id="tab3" name="books" href="#tab3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0"></path>
<path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0"></path>
<path d="M3 6l0 13"></path>
<path d="M12 6l0 13"></path>
<path d="M21 6l0 13"></path>
</svg>
Books
</a>
</div>
</header>
<div class="tab-content-wrapper">
<div id="tab1-content" class="tab-content">
</div>
<div id="tab2-content" class="tab-content">
</div>
<div id="tab3-content" class="tab-content">
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>