Free
Blog
Postwave Blog
A blog block extracted from the Postwave template, available in Tailwind CSS and Bootstrap.
0
1
postwave.html
<!DOCTYPE html>
<html lang="en">
<head>
<script>
window.FontAwesomeConfig = { autoReplaceSvg: 'nest' };
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Postwave Blog | Tailwind CSS UI Block</title>
<meta name="description" content="A blog block extracted from the Postwave template, available in Tailwind CSS and Bootstrap.">
<meta name="keywords" content="Postwave, Tailwind CSS template, HTML website template, blog template, creator economy blog, influencer marketing, resources page, article template, newsletter signup, dark blog design">
<meta name="author" content="Let's templates">
<link rel="canonical" href="">
<meta property="og:type" content="product">
<meta property="og:site_name" content="Let's templates">
<meta property="og:locale" content="en_US">
<meta property="og:url" content="">
<meta property="og:title" content="Postwave | Tailwind CSS Blog Template">
<meta property="og:description" content="A dark, editorial Tailwind CSS blog template for creator platforms, with live search, image-led post cards and a personal reading list.">
<meta property="og:image" content="">
<meta property="og:image:alt" content="Postwave template preview">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="">
<meta name="twitter:title" content="Postwave | Tailwind CSS Blog Template">
<meta name="twitter:description" content="A dark, editorial Tailwind CSS blog template for creator platforms, with live search, image-led post cards and a personal reading list.">
<meta name="twitter:image" content="">
<meta name="twitter:image:alt" content="Postwave template preview">
<script src="https://cdn.tailwindcss.com/3.4.17"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Antonio:wght@500;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: { night: { DEFAULT: '#0a0a0a', page: '#1b1b1d', card: '#141416', line: '#2c2c30' }, volt: { DEFAULT: '#c6ff3d', soft: '#e6ffb0' } },
fontFamily: { sans: ['Inter', 'sans-serif'], display: ['Antonio', 'sans-serif'] }
}
}
}
</script>
<style>
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 180ms ease-out both page-fade-out; }
::view-transition-new(root) { animation: 220ms ease-in both page-fade-in; }
@keyframes page-fade-out { to { opacity: 0; } }
@keyframes page-fade-in { from { opacity: 0; } }
html { scroll-behavior: smooth; }
[hidden] { display: none !important; }
.chips { scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.ticker { animation: ticker 32s linear infinite; }
.ticker:hover { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }
.ticket { -webkit-mask: radial-gradient(circle 14px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 14px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle 14px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 14px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; }
.reveal-ready [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; transition-delay: var(--reveal-delay, 0ms); }
.reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.ticker { animation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
</style>
</head>
<body class="bg-night-page font-sans text-white antialiased">
<% active_page = "index" %>
<% nav = { "brands" => "For brands", "ambassadors" => "For creators", "about" => "About", "cases" => "Cases", "index" => "Resources" } %>
<% nav.each do |slug, label| %>
<% active = active_page == slug %>
<% end %>
<% nav.merge("contact" => "Request a demo").each do |slug, label| %>
<% active = active_page == slug %>
<% end %>
<% categories = ["Creator economy", "Brand deals", "Short video", "Analytics", "Community", "Tools"] %>
<% posts = [["How three creators turned a side channel into a full-time studio", "Creator economy", "18/03/2026", "Noor Haddad", "1589156280159-27698a70f29e", "Woman looking up at city lights at dusk", "creator-studio"], ["The brief template brands keep reusing", "Brand deals", "14/03/2026", "Leo Brandt", "1550684848-fac1c5b4e853", "Macro shot of colourful oil bubbles", "brief-template"], ["Hooks that hold: what the first two seconds really decide", "Short video", "11/03/2026", "Mina Sato", "1504593811423-6dd665756598", "Man in a waistcoat standing on a city street", "first-two-seconds"], ["Reading your analytics without losing your mind", "Analytics", "07/03/2026", "Kai Osei", "1550745165-9bc0b252726f", "Retro consoles lit with pink and blue neon", "brief-template"], ["Why micro communities beat big follower counts", "Community", "04/03/2026", "Ana Ruiz", "1517841905240-472988babdf9", "Smiling young woman in a denim jacket", "creator-studio"], ["Building a content calendar you'll actually keep", "Tools", "28/02/2026", "Sam Ito", "1581291518857-4e27b48ff24e", "Hands sketching layouts on paper", "first-two-seconds"], ["Rate cards in 2026: what creators charge now", "Brand deals", "24/02/2026", "Noor Haddad", "1600096194534-95cf5ece04cf", "Red like-notification sign painted on a white wall", "brief-template"], ["Loops, cuts and captions: an editing cheat sheet", "Short video", "20/02/2026", "Mina Sato", "1563089145-599997674d42", "Purple and red abstract light", "first-two-seconds"], ["What brands look for before the first DM", "Creator economy", "16/02/2026", "Leo Brandt", "1529626455594-4ff0802cfb7e", "Woman with red hair looking to the side", "creator-studio"], ["Tools we use to plan a month of posts in an hour", "Tools", "12/02/2026", "Sam Ito", "1557672172-298e090bd0f1", "Swirls of pink and blue paint", "brief-template"], ["Comments are the new reach: running a reply sprint", "Community", "08/02/2026", "Ana Ruiz", "1524504388940-b1c1722653e1", "Woman with long hair in a dark top", "creator-studio"]] %>
<% (["All"] + categories).each do |category| %>
<% end %>
<!-- block:start blog -->
<section class="px-3 pt-3 md:px-4" data-posts>
<div class="mx-auto grid max-w-[90rem] gap-3">
<% title, category, date, author, photo, alt, slug = posts.first %>
<article class="grid overflow-hidden rounded-2xl bg-night lg:grid-cols-2" data-post data-category="<%= category %>" data-title="<%= title %>">
<a href="<%= slug %>.html" class="block"><img src="https://images.unsplash.com/photo-<%= photo %>?auto=format&fit=crop&w=1100&h=1000&q=80" alt="<%= alt %>" class="aspect-[4/3] h-full w-full object-cover lg:aspect-auto"></a>
<div class="flex flex-col gap-6 p-6 md:p-8">
<div class="flex items-start justify-between gap-4">
<h2 class="font-display text-4xl font-semibold leading-[1.02] md:text-6xl"><a href="<%= slug %>.html" class="hover:text-volt"><%= title %></a></h2>
<button type="button" data-save="<%= slug %>-0" data-save-title="<%= title %>" data-save-href="<%= slug %>.html" aria-pressed="false" class="grid h-11 w-11 shrink-0 place-items-center rounded-full border border-white/30 transition hover:border-volt aria-pressed:border-volt aria-pressed:bg-volt aria-pressed:text-night" aria-label="Save to reading list"><i class="fa-regular fa-bookmark" aria-hidden="true"></i></button>
</div>
<p class="max-w-xl text-sm leading-relaxed text-white/70">Three creators, three niches, one shared playbook: how they used a smaller second channel to test ideas, find paying partners and finally go full-time.</p>
<p class="mt-auto flex flex-wrap justify-between gap-2 text-sm"><span>(newest) <%= date %></span><span><%= category %> · <%= author %></span></p>
</div>
</article>
<ul class="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
<% posts.drop(1).each_with_index do |(title, category, date, author, photo, alt, slug), index| %>
<li class="relative <%= 'lg:col-span-2' if [4, 7].include?(index) %>" data-post data-category="<%= category %>" data-title="<%= title %>" data-reveal style="--reveal-delay: <%= (index % 4) * 60 %>ms">
<a href="<%= slug %>.html" class="group relative isolate flex aspect-[4/5] flex-col justify-between overflow-hidden rounded-2xl p-5 <%= [4, 7].include?(index) ? 'lg:aspect-auto lg:h-full' : '' %>">
<img src="https://images.unsplash.com/photo-<%= photo %>?auto=format&fit=crop&w=800&h=1000&q=75" alt="<%= alt %>" class="absolute inset-0 -z-10 h-full w-full object-cover transition duration-500 group-hover:scale-105" loading="lazy">
<span class="absolute inset-0 -z-10 bg-gradient-to-b from-black/50 via-transparent to-black/60"></span>
<h3 class="pr-12 font-display text-3xl font-semibold leading-[1.02] md:text-[2rem]"><%= title %></h3>
<span class="text-sm"><span class="block text-white/80"><%= date %></span><%= category %> · <%= author %></span>
</a>
<button type="button" data-save="<%= slug %>-<%= index + 1 %>" data-save-title="<%= title %>" data-save-href="<%= slug %>.html" aria-pressed="false" class="absolute right-4 top-4 grid h-10 w-10 place-items-center rounded-full bg-black/50 backdrop-blur transition hover:bg-black/80 aria-pressed:bg-volt aria-pressed:text-night" aria-label="Save to reading list"><i class="fa-regular fa-bookmark" aria-hidden="true"></i></button>
</li>
<% end %>
</ul>
<p data-empty hidden class="rounded-2xl bg-night p-10 text-center text-white/70">No articles match that search. Try another word or <button type="button" data-reset class="text-volt underline">clear the filters</button>.</p>
</div>
<div class="fixed bottom-5 right-5 z-30" data-reading>
<button type="button" data-reading-toggle aria-expanded="false" aria-controls="reading-list" class="flex items-center gap-3 rounded-full bg-volt px-5 py-3 text-sm font-semibold text-night shadow-2xl shadow-black/50 transition hover:bg-white"><i class="fa-solid fa-bookmark" aria-hidden="true"></i>Reading list <span class="grid h-6 min-w-6 place-items-center rounded-full bg-night px-1.5 text-xs text-volt" data-reading-count>0</span></button>
<div id="reading-list" hidden class="absolute bottom-16 right-0 w-[min(22rem,calc(100vw-2.5rem))] rounded-2xl border border-night-line bg-night p-5 shadow-2xl shadow-black/60">
<p class="font-display text-2xl font-semibold">Saved for later</p>
<ul class="mt-4 grid max-h-72 gap-3 overflow-y-auto text-sm" data-reading-items></ul>
<p class="mt-2 text-sm text-white/60" data-reading-empty>Tap the bookmark on any article to keep it here.</p>
</div>
</div>
</section>
<!-- block:end blog -->
<script>
const reducedMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
const watchMotion = !reducedMotion && !navigator.webdriver && 'IntersectionObserver' in window;
document.querySelectorAll('[data-menu-toggle]').forEach((button) => {
const menu = document.getElementById(button.getAttribute('aria-controls'));
button.addEventListener('click', () => {
const open = button.getAttribute('aria-expanded') === 'true';
button.setAttribute('aria-expanded', String(!open));
menu.classList.toggle('hidden', open);
});
});
document.querySelectorAll('[data-search-root]').forEach((root) => {
const input = root.querySelector('[data-search]');
const chips = [...root.querySelectorAll('[data-chip]')];
const posts = [...document.querySelectorAll('[data-post]')];
const empty = document.querySelector('[data-empty]');
let category = 'All';
const paint = () => {
const query = input.value.trim().toLowerCase();
let shown = 0;
posts.forEach((post) => {
const match = (category === 'All' || post.dataset.category === category) && (!query || post.dataset.title.toLowerCase().includes(query) || post.dataset.category.toLowerCase().includes(query));
post.hidden = !match;
if (match) shown += 1;
});
root.querySelector('[data-result-count]').textContent = shown;
if (empty) empty.hidden = shown > 0;
};
chips.forEach((chip) => chip.addEventListener('click', () => {
category = chip.dataset.chip;
chips.forEach((other) => other.setAttribute('aria-pressed', String(other === chip)));
paint();
}));
input.addEventListener('input', paint);
document.querySelector('[data-reset]')?.addEventListener('click', () => { input.value = ''; chips[0].click(); });
});
document.querySelectorAll('[data-reading]').forEach((root) => {
const toggle = root.querySelector('[data-reading-toggle]');
const panel = document.getElementById(toggle.getAttribute('aria-controls'));
const list = root.querySelector('[data-reading-items]');
const read = () => { try { return JSON.parse(localStorage.getItem('postwave-reading') || '[]'); } catch (error) { return []; } };
const write = (items) => { try { localStorage.setItem('postwave-reading', JSON.stringify(items)); } catch (error) { /* storage unavailable */ } };
let saved = read();
const paint = () => {
root.querySelector('[data-reading-count]').textContent = saved.length;
root.querySelector('[data-reading-empty]').hidden = saved.length > 0;
list.replaceChildren(...saved.map((item) => {
const li = document.createElement('li');
const link = document.createElement('a');
link.href = item.href; link.textContent = item.title; link.className = 'block rounded-lg bg-white/5 px-3 py-2 hover:text-volt';
li.append(link);
return li;
}));
document.querySelectorAll('[data-save]').forEach((button) => button.setAttribute('aria-pressed', String(saved.some((item) => item.id === button.dataset.save))));
};
document.querySelectorAll('[data-save]').forEach((button) => button.addEventListener('click', () => {
const id = button.dataset.save;
saved = saved.some((item) => item.id === id) ? saved.filter((item) => item.id !== id) : [...saved, { id, title: button.dataset.saveTitle, href: button.dataset.saveHref }];
write(saved);
paint();
}));
toggle.addEventListener('click', () => { const open = panel.hidden; panel.hidden = !open; toggle.setAttribute('aria-expanded', String(open)); });
document.addEventListener('keydown', (event) => { if (event.key === 'Escape' && !panel.hidden) { panel.hidden = true; toggle.setAttribute('aria-expanded', 'false'); toggle.focus(); } });
paint();
});
document.querySelectorAll('[data-remind]').forEach((button) => button.addEventListener('click', () => {
const on = button.getAttribute('aria-pressed') !== 'true';
button.setAttribute('aria-pressed', String(on));
button.querySelector('[data-remind-label]').textContent = on ? 'Reminder set' : 'Remind me';
}));
document.querySelectorAll('[data-newsletter]').forEach((form) => {
const status = form.parentElement.querySelector('[data-form-status]');
form.addEventListener('submit', (event) => {
event.preventDefault();
const email = form.elements.email;
if (!email.checkValidity()) { status.textContent = 'Please enter a valid email address.'; email.focus(); return; }
status.textContent = "You're in. First drop lands this Friday.";
form.reset();
});
});
if (watchMotion) {
document.documentElement.classList.add('reveal-ready');
const observer = new IntersectionObserver((entries) => entries.forEach((entry) => {
if (entry.isIntersecting) { entry.target.classList.add('is-visible'); observer.unobserve(entry.target); }
}), { threshold: 0.15 });
document.querySelectorAll('[data-reveal]').forEach((el) => observer.observe(el));
}
</script>
</body>
</html>
From this template
Blog
Postwave
Unlimited access to all products
Unlock the entire library of premium templates and blocks. Renews automatically, cancel anytime.
$20
/ 3 months
or $60 / year
Get Unlimited Access