Tailwind Magazine Template
Free magazine template
Details About Tailwind Magazine Template
Key points:
- Open Source
- Copy & Paste
A fully responsive Tailwind magazine template designed for engaging, modern news websites.
Code
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Essence Magazine</title>
<meta name="description" content="A curated magazine exploring design, culture, and thoughtful living" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap" rel="stylesheet" />
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
// Configure Tailwind (ignore TypeScript error - this is available at runtime via CDN)
// @ts-ignore
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
serif: ['Playfair Display', 'serif'],
},
colors: {
background: '#ffffff',
foreground: '#1a1a1a',
'muted-foreground': '#6b6b6b',
primary: '#1a73e8',
'primary-foreground': '#ffffff',
secondary: '#f7f7f7',
'secondary-foreground': '#1a1a1a',
},
},
},
}
</script>
<style type="text/css">
/* Custom utility classes */
.magazine-container {
width: 100%;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
}
.glass-effect {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(8px);
}
.article-card {
background-color: white;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.article-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
.nav-link {
position: relative;
color: #1a1a1a;
font-weight: 500;
font-size: 0.875rem;
transition: color 0.3s ease;
}
.nav-link:after {
content: '';
position: absolute;
width: 0;
height: 1px;
bottom: -4px;
left: 0;
background-color: #1a73e8;
transition: width 0.3s ease;
}
.nav-link:hover {
color: #1a73e8;
}
.nav-link:hover:after {
width: 100%;
}
/* Animation classes */
.animate-fade-in {
animation: fadeIn 1s ease-out;
}
.animate-scale-in {
animation: scaleIn 1.2s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
/* Shadow utility */
.shadow-sm {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
</style>
</head>
<body class="bg-background text-foreground antialiased">
<header class="fixed top-0 right-0 left-0 z-50 bg-transparent py-8 px-8 transition-all duration-300 ease-in-out">
<div class="magazine-container">
<div class="flex items-center justify-between">
<div class="flex items-center">
<a href="/" class="font-serif text-xl font-medium tracking-tight md:text-2xl"> ESSENCE </a>
</div>
<!-- Desktop Navigation -->
<nav class="hidden items-center space-x-8 md:flex">
<a href="#" class="nav-link">Home</a>
<a href="#" class="nav-link">Features</a>
<a href="#" class="nav-link">Culture</a>
<a href="#" class="nav-link">Style</a>
<a href="#" class="nav-link">About</a>
</nav>
<!-- Mobile Menu Button -->
<button class="p-2 md:hidden" aria-label="Toggle menu">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="3" y1="12" x2="21" y2="12"></line>
<line x1="3" y1="6" x2="21" y2="6"></line>
<line x1="3" y1="18" x2="21" y2="18"></line>
</svg>
</button>
</div>
</div>
</header>
<main class="px-8">
<!-- Hero Section -->
<section class="relative overflow-hidden pt-32 pb-20">
<div class="magazine-container">
<div class="grid grid-cols-1 items-center gap-12 lg:grid-cols-2">
<div class="animate-fade-in">
<div class="mb-5">
<span class="bg-primary/5 text-primary inline-block rounded-full px-3 py-1 text-xs tracking-widest uppercase"> Featured Story </span>
</div>
<h1 class="mb-6 font-serif text-4xl leading-tight font-medium md:text-5xl lg:text-6xl">The Evolution of Sustainable Fashion</h1>
<p class="text-muted-foreground mb-8 max-w-lg text-lg text-balance">How innovative designers are redefining luxury through environmental consciousness and ethical practices.</p>
<a href="#" class="group inline-flex items-center text-sm font-medium tracking-wider uppercase">
Read Article
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ml-2 transition-transform group-hover:translate-x-1">
<line x1="5" y1="12" x2="19" y2="12"></line>
<polyline points="12 5 19 12 12 19"></polyline>
</svg>
</a>
</div>
<div class="animate-scale-in relative">
<div class="overflow-hidden rounded-lg">
<img src="https://images.unsplash.com/photo-1581044777550-4cfa60707c03?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=772&q=80" alt="Sustainable Fashion" class="h-[500px] w-full object-cover transition-transform duration-700 ease-in-out hover:scale-105" />
</div>
<div class="glass-effect absolute right-4 bottom-4 rounded-md p-3 text-xs">Photography by <span class="font-medium">Sarah Williams</span></div>
</div>
</div>
</div>
</section>
<!-- Articles Grid Section -->
<section class="bg-secondary/30 py-20">
<div class="magazine-container">
<div class="mb-12 flex items-end justify-between">
<div>
<h2 class="mb-2 font-serif text-3xl font-medium">Latest Articles</h2>
<p class="text-muted-foreground max-w-xl">Insights and stories that capture the essence of contemporary culture.</p>
</div>
<a href="#" class="group hidden items-center text-sm font-medium tracking-wider uppercase md:inline-flex">
View All
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ml-2 transition-transform group-hover:translate-x-1">
<line x1="5" y1="12" x2="19" y2="12"></line>
<polyline points="12 5 19 12 12 19"></polyline>
</svg>
</a>
</div>
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8">
<!-- Article Card 1 -->
<article class="article-card overflow-hidden rounded-lg">
<a href="#" class="block">
<div class="overflow-hidden">
<img src="https://images.unsplash.com/photo-1493809842364-b78817add7ffb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="Slow Living" class="h-64 w-full object-cover" />
</div>
<div class="p-6">
<div class="mb-3">
<span class="text-primary text-xs font-medium tracking-wider uppercase"> Lifestyle </span>
</div>
<h3 class="mb-3 font-serif text-xl font-medium">The Art of Slow Living in Modern Cities</h3>
<p class="text-muted-foreground mb-4 text-sm">Exploring how urban dwellers are embracing mindfulness and intentional living amidst the chaos.</p>
<div class="text-muted-foreground flex items-center justify-between text-xs">
<span>Emma Chen</span>
<span>May 23, 2023</span>
</div>
</div>
</a>
</article>
<!-- Article Card 2 -->
<article class="article-card overflow-hidden rounded-lg">
<a href="#" class="block">
<div class="overflow-hidden">
<img src="https://images.unsplash.com/photo-1495195134817-aeb325a55b65?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=876&q=80" alt="Culinary Traditions" class="h-64 w-full object-cover" />
</div>
<div class="p-6">
<div class="mb-3">
<span class="text-primary text-xs font-medium tracking-wider uppercase"> Food </span>
</div>
<h3 class="mb-3 font-serif text-xl font-medium">Culinary Traditions Reimagined</h3>
<p class="text-muted-foreground mb-4 text-sm">How chefs are preserving cultural heritage while innovating with modern techniques.</p>
<div class="text-muted-foreground flex items-center justify-between text-xs">
<span>Marcus Johnson</span>
<span>April 15, 2023</span>
</div>
</div>
</a>
</article>
<!-- Article Card 3 -->
<article class="article-card overflow-hidden rounded-lg">
<a href="#" class="block">
<div class="overflow-hidden">
<img src="https://images.unsplash.com/photo-1517142089942-ba376ce32a2e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="Digital Craftsmanship" class="h-64 w-full object-cover" />
</div>
<div class="p-6">
<div class="mb-3">
<span class="text-primary text-xs font-medium tracking-wider uppercase"> Design </span>
</div>
<h3 class="mb-3 font-serif text-xl font-medium">The New Era of Digital Craftsmanship</h3>
<p class="text-muted-foreground mb-4 text-sm">Artisans embracing technology to create unique pieces that blur the line between traditional and digital.</p>
<div class="text-muted-foreground flex items-center justify-between text-xs">
<span>Nicole Patel</span>
<span>June 7, 2023</span>
</div>
</div>
</a>
</article>
</div>
<div class="mt-12 text-center md:hidden">
<a href="#" class="group inline-flex items-center text-sm font-medium tracking-wider uppercase">
View All Articles
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ml-2 transition-transform group-hover:translate-x-1">
<line x1="5" y1="12" x2="19" y2="12"></line>
<polyline points="12 5 19 12 12 19"></polyline>
</svg>
</a>
</div>
</div>
</section>
<!-- Featured Carousel Section -->
<section class="py-20">
<div class="magazine-container">
<div class="mb-8 flex flex-col items-start justify-between md:flex-row md:items-end">
<div>
<h2 class="mb-2 font-serif text-3xl font-medium">Editor's Picks</h2>
<p class="text-muted-foreground max-w-xl">Carefully selected stories that showcase exceptional creativity and insight.</p>
</div>
<div class="mt-4 flex space-x-2 md:mt-0">
<button class="hover:bg-secondary rounded-full border p-2 transition-colors duration-200" aria-label="Previous slide">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="19" y1="12" x2="5" y2="12"></line>
<polyline points="12 19 5 12 12 5"></polyline>
</svg>
</button>
<button class="hover:bg-secondary rounded-full border p-2 transition-colors duration-200" aria-label="Next slide">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="5" y1="12" x2="19" y2="12"></line>
<polyline points="12 5 19 12 12 19"></polyline>
</svg>
</button>
</div>
</div>
<div class="relative overflow-hidden">
<div class="flex">
<div class="min-w-full">
<div class="grid grid-cols-1 items-center gap-8 md:grid-cols-2">
<div class="overflow-hidden rounded-lg">
<img src="https://images.unsplash.com/photo-1496307042754-b4aa456c4a2d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="The Architecture of Light" class="h-[400px] w-full object-cover md:h-[500px]" />
</div>
<div class="md:pl-8">
<div class="mb-4">
<span class="bg-primary/5 text-primary inline-block rounded-full px-3 py-1 text-xs tracking-widest uppercase"> Design </span>
</div>
<h3 class="mb-6 font-serif text-3xl leading-tight font-medium md:text-4xl">The Architecture of Light</h3>
<p class="text-muted-foreground mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel risus sed metus faucibus auctor. Nulla facilisi. Vestibulum vel tortor at quam elementum consequat.</p>
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="bg-secondary mr-3 h-10 w-10 rounded-full"></div>
<span class="text-sm">Alex Honnold</span>
</div>
<a href="#" class="group inline-flex items-center text-sm font-medium tracking-wider uppercase">
Read More
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ml-2 transition-transform group-hover:translate-x-1">
<line x1="5" y1="12" x2="19" y2="12"></line>
<polyline points="12 5 19 12 12 19"></polyline>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="absolute right-0 bottom-0 left-0 flex justify-center space-x-2 pb-4">
<button class="bg-primary h-2 w-6 rounded-full" aria-label="Go to slide 1"></button>
<button class="h-2 w-2 rounded-full bg-gray-300" aria-label="Go to slide 2"></button>
<button class="h-2 w-2 rounded-full bg-gray-300" aria-label="Go to slide 3"></button>
<button class="h-2 w-2 rounded-full bg-gray-300" aria-label="Go to slide 4"></button>
</div>
</div>
</div>
</section>
<!-- Newsletter Section -->
<section class="bg-primary text-primary-foreground py-20">
<div class="magazine-container text-center">
<div class="mx-auto max-w-2xl">
<span class="mb-3 inline-block text-xs tracking-widest uppercase opacity-80"> Stay Updated </span>
<h2 class="mb-6 font-serif text-3xl font-medium md:text-4xl">Subscribe to Our Newsletter</h2>
<p class="text-primary-foreground/80 mx-auto mb-8 max-w-lg">Join our community of readers and receive the latest stories, interviews, and insights delivered directly to your inbox.</p>
<form class="mx-auto flex max-w-md flex-col gap-3 sm:flex-row">
<input type="email" placeholder="Your email address" class="bg-primary-foreground/10 text-primary-foreground border-primary-foreground/20 focus:ring-primary-foreground/30 placeholder:text-primary-foreground/50 flex-grow rounded-md border px-4 py-3 focus:ring-2 focus:outline-none" required />
<button type="submit" class="group bg-primary-foreground text-primary hover:bg-primary-foreground/90 inline-flex items-center justify-center rounded-md px-5 py-3 font-medium transition-all">
Subscribe
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ml-2 transition-transform group-hover:translate-x-1">
<line x1="5" y1="12" x2="19" y2="12"></line>
<polyline points="12 5 19 12 12 19"></polyline>
</svg>
</button>
</form>
<p class="text-primary-foreground/60 mt-6 text-xs">We respect your privacy. Unsubscribe at any time.</p>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="border-t bg-white px-8">
<div class="magazine-container py-16">
<div class="grid grid-cols-1 gap-8 md:grid-cols-4">
<div class="md:col-span-2">
<a href="/" class="mb-4 inline-block font-serif text-2xl font-medium tracking-tight"> ESSENCE </a>
<p class="text-muted-foreground mb-6 max-w-md">A curated magazine exploring design, culture, and thoughtful living. We showcase stories that inspire and connect.</p>
<div class="flex space-x-4">
<a href="#" class="hover:text-primary text-gray-600 transition-colors" aria-label="Instagram">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
<line x1="17.5" x2="17.51" y1="6.5" y2="6.5" />
</svg>
</a>
<a href="#" class="hover:text-primary text-gray-600 transition-colors" aria-label="Twitter">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" /></svg>
</a>
<a href="#" class="hover:text-primary text-gray-600 transition-colors" aria-label="Pinterest">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="12" x2="12" y1="8" y2="16" />
<line x1="18" x2="18" y1="12" y2="16" />
<line x1="6" x2="6" y1="12" y2="16" />
<line x1="6" x2="6" y1="12" y2="12" />
<path d="M6 12a6 6 0 0 0 12 0c0-5-6-8-6-8-6 3-6 8-6 8Z" />
</svg>
</a>
</div>
</div>
<div>
<h3 class="mb-4 text-sm font-medium tracking-wider uppercase">Explore</h3>
<ul class="space-y-2">
<li><a href="#" class="text-muted-foreground hover:text-primary text-sm transition-colors">Home</a></li>
<li><a href="#" class="text-muted-foreground hover:text-primary text-sm transition-colors">Features</a></li>
<li><a href="#" class="text-muted-foreground hover:text-primary text-sm transition-colors">Culture</a></li>
<li><a href="#" class="text-muted-foreground hover:text-primary text-sm transition-colors">Style</a></li>
<li><a href="#" class="text-muted-foreground hover:text-primary text-sm transition-colors">Photography</a></li>
<li><a href="#" class="text-muted-foreground hover:text-primary text-sm transition-colors">Travel</a></li>
<li><a href="#" class="text-muted-foreground hover:text-primary text-sm transition-colors">Archive</a></li>
</ul>
</div>
<div>
<h3 class="mb-4 text-sm font-medium tracking-wider uppercase">Information</h3>
<ul class="space-y-2">
<li><a href="#" class="text-muted-foreground hover:text-primary text-sm transition-colors">About</a></li>
<li><a href="#" class="text-muted-foreground hover:text-primary text-sm transition-colors">Contact</a></li>
<li><a href="#" class="text-muted-foreground hover:text-primary text-sm transition-colors">Advertise</a></li>
<li><a href="#" class="text-muted-foreground hover:text-primary text-sm transition-colors">Careers</a></li>
<li><a href="#" class="text-muted-foreground hover:text-primary text-sm transition-colors">Privacy Policy</a></li>
<li><a href="#" class="text-muted-foreground hover:text-primary text-sm transition-colors">Terms of Use</a></li>
<li><a href="#" class="text-muted-foreground hover:text-primary text-sm transition-colors">Cookie Policy</a></li>
</ul>
</div>
</div>
</div>
<div class="border-t">
<div class="magazine-container flex flex-col items-center justify-between py-6 md:flex-row">
<p class="text-muted-foreground mb-4 text-sm md:mb-0">© 2023 ESSENCE Magazine. All rights reserved.</p>
<button class="group inline-flex items-center text-sm font-medium">
Back to top
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ml-2 transition-transform group-hover:-translate-y-1">
<line x1="12" y1="19" x2="12" y2="5"></line>
<polyline points="5 12 12 5 19 12"></polyline>
</svg>
</button>
</div>
</div>
</footer>
<!-- Mobile Navigation Overlay -->
<div class="fixed inset-0 z-40 translate-x-full transform bg-white transition-transform duration-300 ease-in-out">
<div class="flex h-full flex-col items-center justify-center space-y-8 p-8">
<button class="absolute top-8 right-8" aria-label="Close menu">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
<a href="#" class="text-2xl font-medium">Home</a>
<a href="#" class="text-2xl font-medium">Features</a>
<a href="#" class="text-2xl font-medium">Culture</a>
<a href="#" class="text-2xl font-medium">Style</a>
<a href="#" class="text-2xl font-medium">About</a>
</div>
</div>
<!-- JavaScript for interactive elements -->
<script>
// Header scroll effect
window.addEventListener('scroll', function() {
const header = document.querySelector('header');
if (header) {
if (window.scrollY > 50) {
header.classList.add('bg-white', 'shadow-sm');
header.classList.remove('bg-transparent');
} else {
header.classList.add('bg-transparent');
header.classList.remove('bg-white', 'shadow-sm');
}
}
});
// Mobile menu toggle
const menuButton = document.querySelector('button[aria-label="Toggle menu"]');
const closeButton = document.querySelector('button[aria-label="Close menu"]');
const mobileNav = document.querySelector('.fixed.inset-0.z-40');
if (menuButton && closeButton && mobileNav) {
menuButton.addEventListener('click', function() {
mobileNav.classList.remove('translate-x-full');
});
closeButton.addEventListener('click', function() {
mobileNav.classList.add('translate-x-full');
});
}
// Back to top button
const backToTopButton = document.querySelector('button.group');
if (backToTopButton) {
backToTopButton.addEventListener('click', function() {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
}
</script>
</body>
</html>