|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>tripleS</title> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> |
|
<style> |
|
|
|
.fixed-top { |
|
position: fixed; |
|
top: 0; |
|
width: 100%; |
|
z-index: 10; |
|
} |
|
|
|
.fixed-bottom { |
|
position: fixed; |
|
bottom: 0; |
|
width: 100%; |
|
z-index: 10; |
|
} |
|
|
|
.scrollable-content { |
|
padding-top: 96px; |
|
padding-bottom: 48px; |
|
overflow-y: auto; |
|
} |
|
</style> |
|
</head> |
|
<body class="bg-black text-white font-sans"> |
|
|
|
|
|
<div class="fixed-top"> |
|
<div class="bg-gray-900 px-4 py-3 border-b border-gray-800"> |
|
<div class="flex justify-between"> |
|
<div> |
|
<h1 class="text-xl font-bold">tripleS</h1> |
|
</div> |
|
<div class="flex items-center"> |
|
<button class="p-2 bg-gray-800 rounded-full"> |
|
<i class="fas fa-shopping-cart"></i> |
|
</button> |
|
<span class="ml-2 p-1 bg-purple-800 rounded-full text-xs">144</span> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 text-center py-2"> |
|
<div class="flex justify-around"> |
|
<button class="text-gray-300">Main</button> |
|
<button class="text-gray-300">Grid</button> |
|
<button class="text-gray-300">Gravity</button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="scrollable-content"> |
|
|
|
<div class="px-4 py-2"> |
|
|
|
<div class="bg-gray-800 p-4 rounded-lg mb-4"> |
|
<div class="h-32 bg-gray-700 rounded mb-4"></div> |
|
<p class="text-gray-400">Content area</p> |
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 p-4 rounded-lg mb-4"> |
|
<div class="h-32 bg-gray-700 rounded mb-4"></div> |
|
<p class="text-gray-400">Content area</p> |
|
</div> |
|
|
|
<div class="bg-gray-800 p-4 rounded-lg mb-4"> |
|
<div class="h-32 bg-gray-700 rounded mb-4"></div> |
|
<p class="text-gray-400">Content area</p> |
|
</div> |
|
|
|
<div class="bg-gray-800 p-4 rounded-lg mb-4"> |
|
<div class="h-32 bg-gray-700 rounded mb-4"></div> |
|
<p class="text-gray-400">Content area</p> |
|
</div> |
|
<div class="bg-gray-800 p-4 rounded-lg mb-4"> |
|
<div class="h-32 bg-gray-700 rounded mb-4"></div> |
|
<p class="text-gray-400">Content area</p> |
|
</div> |
|
|
|
<div class="bg-gray-800 p-4 rounded-lg mb-4"> |
|
<div class="h-32 bg-gray-700 rounded mb-4"></div> |
|
<p class="text-gray-400">Content area</p> |
|
</div> |
|
|
|
<div class="bg-gray-800 p-4 rounded-lg mb-4"> |
|
<div class="h-32 bg-gray-700 rounded mb-4"></div> |
|
<p class="text-gray-400">Content area</p> |
|
</div> |
|
|
|
<div class="bg-gray-800 p-4 rounded-lg mb-4"> |
|
<div class="h-32 bg-gray-700 rounded mb-4"></div> |
|
<p class="text-gray-400">Content area</p> |
|
</div> |
|
|
|
</div> |
|
</div> |
|
|
|
|
|
<div class="fixed-bottom bg-gray-900 py-2"> |
|
<div class="flex justify-around"> |
|
<button class="text-gray-300"> |
|
<i class="fas fa-home"></i> |
|
<span class="block text-xs">Home</span> |
|
</button> |
|
<button class="text-gray-300"> |
|
<i class="fas fa-record-vinyl"></i> |
|
<span class="block text-xs">Record</span> |
|
</button> |
|
<button class="text-gray-300"> |
|
<i class="fas fa-box"></i> |
|
<span class="block text-xs">Collect</span> |
|
</button> |
|
<button class="text-gray-300"> |
|
<i class="fas fa-user"></i> |
|
<span class="block text-xs">My</span> |
|
</button> |
|
</div> |
|
</div> |
|
|
|
</body> |
|
</html> |
|
|
