Anonymous

Fixed Sidebar Footer - Copy this Html, Tailwind Component to your project

i-want-to-have-the-side-bar-footer-and-the-sidebar-can-not-scroll-with-the-main-layout:--<!DOCTYPE-html>-<html-lang="en">-<head>-<meta-charset="UTF-8">-<meta-name="viewport"-content="width=device-width,-initial-scale=1.0">-<title>Crypto-Market-Overview</title>-<script-src="https://cdn.tailwindcss.com"></script>-<style>-.top-coins-container-{-display:-grid;-grid-template-columns:-repeat(auto-fit,-minmax(150px,-1fr));-/*-Responsive-columns-*/-gap:-4px;-}-.top-coin-{-padding:-1rem;-}-.fear-greed-indicator-{-width:-12px;-height:-12px;-background-color:-white;-border:-2px-solid-black;-border-radius:-50%;-position:-absolute;-top:--4px;-transition:-left-0.3s-ease-in-out;-}-@media-(max-width:-768px)-{-.sidebar-{-transform:-translateX(-100%);-transition:-transform-0.3s-ease-in-out;-}-.sidebar.open-{-transform:-translateX(0);-}-}-.trending-posts-{-overflow:-hidden;-}-.trending-posts-container-{-display:-flex;-transition:-transform-0.3s-ease-in-out;-}-.trending-post-{-flex:-0-0-100%;-}-</style>-</head>-<body-class="bg-white">-<div-class="flex-flex-col-md:flex-row-min-h-screen-relative">--<aside-id="sidebar"-class="sidebar-fixed-md:relative-w-64-h-full-bg-white-border-r-z-50-md:translate-x-0">-<div-class="p-6">-<h1-class="text-xl-font-bold-mb-6">Crypto-Dashboard</h1>--<input-type="search"-placeholder="Search"-class="w-full-border-p-2-mb-6">--<nav-class="space-y-3">-<a-href="#"-class="block-hover:bg-gray-100-py-1">All-cryptos</a>-<a-href="#"-class="block-hover:bg-gray-100-py-1">Categories</a>-<a-href="#"-class="block-hover:bg-gray-100-py-1">Exchange</a>-<a-href="#"-class="block-hover:bg-gray-100-py-1">Venture-Capital</a>-<a-href="#"-class="block-hover:bg-gray-100-py-1">Community</a>-<a-href="#"-class="block-hover:bg-gray-100-py-1">BTC-price-prediction</a>-<a-href="#"-class="block-hover:bg-gray-100-py-1">Portfolio</a>-</nav>-</div>-</aside>--<main-class="flex-1-p-6">--<button-id="menuBtn"-class="md:hidden-mb-4-p-2-bg-gray-200-rounded">-<svg-class="w-6-h-6"-fill="none"-stroke="currentColor"-viewBox="0-0-24-24">-<path-stroke-linecap="round"-stroke-linejoin="round"-stroke-width="2"-d="M4-6h16M4-12h16M4-18h16"></path>-</svg>-</button>-<h1-class="text-4xl-font-bold-mb-8">Crypto-Market-Overview</h1>--<div-class="grid-grid-cols-1-sm:grid-cols-2-lg:grid-cols-4-gap-4-mb-8">-<div-class="border-p-4">-<div-class="text-sm">Market-Cap</div>-<div-class="text-2xl-font-bold">{{-data.market_metrics.market_cap-}}</div>-</div>-<div-class="border-p-4">-<div-class="text-sm">BTC.D</div>-<div-class="text-2xl-font-bold">{{-data.market_metrics.btc_dominance-}}</div>-</div>-<div-class="border-p-4">-<div-class="text-sm">ETH.D</div>-<div-class="text-2xl-font-bold">{{-data.market_metrics.eth_dominance-}}</div>-</div>-<div-class="border-p-4">-<div-class="text-sm">ETH-Gas</div>-<div-class="text-2xl-font-bold">{{-data.market_metrics.eth_gas-}}</div>-</div>-</div>--<div-class="grid-grid-cols-1-lg:grid-cols-2-gap-4-mb-8">-<div-class="border-p-4">-<h2-class="text-xl-font-bold-mb-4">Investor-status-reported</h2>-<div-class="flex-gap-4">-<div-class="border-p-2-flex-1">-<span-class="font-bold">Bullish</span>-<span-class="float-right">{{-data.investor_status.bullish-}}%</span>-</div>-<div-class="border-p-2-flex-1">-<span-class="font-bold">Bearish</span>-<span-class="float-right">{{-data.investor_status.bearish-}}%</span>-</div>-</div>-</div>-<div-class="border-p-4">-<h2-class="text-xl-font-bold">Fear-&-Greed</h2>-<div-class="flex-1-h-4-bg-gradient-to-r-from-red-500-via-yellow-500-to-green-500-rounded-relative">-<div-id="fearGreedIndicator"-class="fear-greed-indicator"></div>-</div>-<div-id="fearGreedValue"-class="text-right-text-4xl-font-bold">{{-data.fear_greed-}}</div>-</div>-</div>--<div-class="grid-grid-cols-1-lg:grid-cols-2-gap-4-mb-8">-<div-class="border-p-4">-<h2-class="text-xl-font-bold">Top-Movers-📈</h2>--<div-class="top-coins-container">--<div-class="top-coin">-<h3-class="text-lg-font-semibold-mb-2">Top-Gainers</h3>-<div-class="space-y-2">-{%-for-gainer-in-data.top_gainers-%}-<div-class="flex-items-center-gap-2">-<div-class="w-8-h-8-rounded-full-flex-items-center-justify-center-text-white-text-xs-font-bold">-<img-src="{{-gainer.logo-}}"-alt="{{-gainer.symbol-}}"-class="w-full-h-full-object-cover-rounded-full">-</div>-<span-class="font-bold">{{-gainer.symbol-}}</span><span-class="text-green-500">-{{-gainer.gain-}}</span>-</div>-{%-endfor-%}-</div>-</div>-<div-class="top-coin">-<h3-class="text-lg-font-semibold-mb-2">Top-Losers</h3>-<div-class="space-y-2">-{%-for-loser-in-data.top_losers-%}--<div-class="flex-items-center-gap-2">-<div-class="w-8-h-8-rounded-full-flex-items-center-justify-center-text-white-text-xs-font-bold">-<img-src="{{-loser.logo-}}"-alt="{{-loser.symbol-}}"-class="w-full-h-full-object-cover-rounded-full">-</div>-<span-class="font-bold">{{-loser.symbol-}}</span><span-class="text-red-500">-{{-loser.loss-}}</span>-</div>-{%-endfor-%}-</div>-</div>-</div>-</div>-<div-class="border-p-4">-<h2-class="text-xl-font-bold-mb-4">Trending-posts</h2>-<div-class="trending-posts-relative">-<div-class="trending-posts-container">-{%-for-post-in-data.trending_posts-%}-<div-class="trending-post">-<div-class="flex-items-center-gap-4-p-4-max-w-lg-mx-auto">-<div-class="w-16-h-16-rounded-full-overflow-hidden-flex-shrink-0">-<img-src="{{-post.avatar-}}"-alt="{{-post.author-}}"-class="w-full-h-full-object-cover">-</div>-<div>-<div-class="font-bold">{{-post.author-}}</div>-<div>{{-post.content-}}</div>-<div-class="text-left">👍-{{-post.likes-}}</div>-</div>-</div>-</div>-{%-endfor-%}-</div>-<button-id="prevPost"-class="absolute-left-0-top-1/2-transform--translate-y-1/2-bg-white-bg-opacity-50-p-2-rounded-full">-<svg-class="w-6-h-6"-fill="none"-stroke="currentColor"-viewBox="0-0-24-24">-<path-stroke-linecap="round"-stroke-linejoin="round"-stroke-width="2"-d="M15-19l-7-7-7-7"></path>-</svg>-</button>-<button-id="nextPost"-class="absolute-right-0-top-1/2-transform--translate-y-1/2-bg-white-bg-opacity-50-p-2-rounded-full">-<svg-class="w-6-h-6"-fill="none"-stroke="currentColor"-viewBox="0-0-24-24">-<path-stroke-linecap="round"-stroke-linejoin="round"-stroke-width="2"-d="M9-5l7-7-7-7"></path>-</svg>-</button>-</div>-</div>-</div>--<div-class="border-p-4">-<h2-class="text-xl-font-bold-mb-4">Top-exchange-by-volume</h2>-<div-class="grid-grid-cols-2-sm:grid-cols-3-md:grid-cols-5-gap-4-text-center">-{%-for-exchange-in-data.top_exchanges-%}-<div>-<div-class="w-12-h-12-rounded-full-overflow-hidden-mx-auto-mb-2-bg-white">-<img-src="{{-exchange.logo-}}"-alt="{{-exchange.name-}}"-class="w-full-h-full-object-cover">-</div>-<div-class="font-bold">{{-exchange.name-}}</div>-<div>{{-exchange.volume-}}</div>-</div>-{%-endfor-%}-</div>-</div>-</main>-</div>-<script>-const-menuBtn-=-document.getElementById('menuBtn');-const-sidebar-=-document.getElementById('sidebar');-const-prevPostBtn-=-document.getElementById('prevPost');-const-nextPostBtn-=-document.getElementById('nextPost');-const-trendingPostsContainer-=-document.querySelector('.trending-posts-container');-let-currentPost-=-0;-menuBtn.addEventListener('click',-()-=>-{-sidebar.classList.toggle('open');-});-document.addEventListener('click',-(e)-=>-{-if-(!sidebar.contains(e.target)-&&-!menuBtn.contains(e.target))-{-sidebar.classList.remove('open');-}-});-function-showPost(index)-{-trendingPostsContainer.style.transform-=-`translateX(-${index-*-100}%)`;-}-prevPostBtn.addEventListener('click',-()-=>-{-currentPost-=-(currentPost---1-+-{{-data.trending_posts|length-}})-%-{{-data.trending_posts|length-}};-showPost(currentPost);-});-nextPostBtn.addEventListener('click',-()-=>-{-currentPost-=-(currentPost-+-1)-%-{{-data.trending_posts|length-}};-showPost(currentPost);-});-//-Fear-&-Greed-Index-functionality-const-fearGreedIndicator-=-document.getElementById('fearGreedIndicator');-const-fearGreedValue-=-{{-data.fear_greed-}};-function-updateFearGreedIndex(value)-{-const-percentage-=-value-/-100;-const-position-=-`${percentage-*-100}%`;-fearGreedIndicator.style.left-=-position;-}-updateFearGreedIndex(fearGreedValue);-</script>-</body>-</html>

Prompt

About

Fixed Sidebar Footer - A non-scrolling sidebar with easy navigation links, search functionality, and a responsive layout, built with H. Get component free!

Fixed Sidebar Footer - Copy this Html, Tailwind Component to your project

About

Tags

Share