Home
Crimson
Blog

Blog

This tailwind example is contributed by Crimson, on 14-Jan-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are blog page template, article page template

Blog post page

Author Crimson

Fork Fullscreen

.paper-texture::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: repeating-linear-gradient(
                to bottom,
                transparent 0px,
                transparent 2px,
                rgba(0, 0, 0, 0.01) 2px,
                rgba(0, 0, 0, 0.01) 4px
            );
            pointer-events: none;
        }

.newspaper-border {
            border-style: double;
            position: relative;
        }

.vintage-shadow {
            box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1), 0 0 40px rgba(0, 0, 0, 0.05) inset;
        }

.ornate-corner::before,
        .ornate-corner::after {
            content: '❦';
            position: absolute;
            color: rgba(0, 0, 0, 0.3);
            font-size: 1.5rem;
        }

.ornate-corner::before {
            top: -0.75rem;
            left: -0.75rem;
            transform: rotate(-45deg);
        }

.ornate-corner::after {
            top: -0.75rem;
            right: -0.75rem;
            transform: rotate(45deg);
        }

.column-rule {
            column-rule: 1px solid rgba(0, 0, 0, 0.1);
        }

.first-letter::first-letter {
            initial-letter: 2;
            -webkit-initial-letter: 2;
            color: #4a4a4a;
            font-family: 'UnifrakturMaguntia', cursive;
            margin-right: 0.5rem;
        }

.coffee-stain {
            position: absolute;
            width: 100px;
            height: 100px;
            background: radial-gradient(circle at center, rgba(139, 69, 19, 0.05) 0%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
        }

.fold-line {
            position: absolute;
            left: 50%;
            top: 0;
            bottom: 0;
            width: 1px;
            background: linear-gradient(
                to bottom,
                transparent,
                rgba(0, 0, 0, 0.03) 20%,
                rgba(0, 0, 0, 0.03) 80%,
                transparent
            );
        }
    </style>
</head>
<body class="bg-neutral-100 min-h-screen p-4 sm:p-8">
    <div class="max-w-5xl mx-auto paper-texture vintage-shadow relative">
        
        <div class="coffee-stain" style="top: 15%; right: 10%; transform: rotate(15deg)"></div>
        <div class="coffee-stain" style="bottom: 20%; left: 15%; transform: rotate(-25deg)"></div>
        <div class="fold-line"></div>

<header class="px-6 sm:px-12 py-8 border-b-2 border-neutral-800 relative">
            <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-neutral-800 to-transparent opacity-20"></div>
            <div class="text-center">
                <div class="mb-2 text-xs tracking-widest text-neutral-600 uppercase">Vol. MMXXIV • No. 127 • Price: Priceless</div>
                <h1 class="font-fraktur text-5xl sm:text-7xl text-neutral-900 tracking-tight mb-2">The Daily Forum</h1>
                <div class="text-xs italic text-neutral-600">"Veritas in Colloquium"</div>
                <div class="flex justify-center items-center gap-4 mt-3 text-neutral-600">
                    <span class="text-sm">Est. MMXXIV</span>
                    <div class="w-1.5 h-1.5 rounded-full bg-neutral-400"></div>
                    <span class="text-sm">Sunday Edition</span>
                </div>
            </div>
        </header>

<main class="px-6 sm:px-12 py-8">
            
            <article class="mb-12">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="font-playfair font-black text-2xl sm:text-3xl text-neutral-900">Latest Discussions</h2>
                    <div class="text-xs text-neutral-600 italic">Page A1</div>
                </div>
                <div class="newspaper-border border-neutral-800 p-6 bg-white/50 ornate-corner">
                    <div class="flex items-start gap-6">
                        <div class="hidden sm:block">
                            <div class="w-12 h-12 rounded-full bg-neutral-200 flex items-center justify-center border-2 border-neutral-300">
                                <span class="font-playfair font-bold text-neutral-600">JD</span>
                            </div>
                        </div>
                        <div class="flex-1">
                            <h3 class="font-playfair font-bold text-xl text-neutral-900 border-b border-neutral-200 pb-2">The Art of Modern Conversation</h3>
                            <p class="mt-4 text-neutral-700 font-playfair leading-relaxed first-letter">In an age of digital communication, have we lost the nuances of face-to-face dialogue? A discussion on the evolution of human interaction in our modern society reveals concerning trends.</p>
                            <div class="mt-4 flex items-center gap-4 text-sm text-neutral-600 border-t border-neutral-200 pt-2">
                                <span class="italic">By John Doe</span>
                                <div class="w-1.5 h-1.5 rounded-full bg-neutral-400"></div>
                                <span>II Hours Past</span>
                                <div class="w-1.5 h-1.5 rounded-full bg-neutral-400"></div>
                                <span>XLII Replies</span>
                            </div>
                        </div>
                    </div>
                </div>
            </article>

<div class="grid gap-6">
                
                <article class="newspaper-border border-neutral-800 p-6 bg-white/50 hover:bg-white/80 transition-colors ornate-corner">
                    <div class="flex gap-6">
                        <div class="flex-1">
                            <h3 class="font-playfair font-bold text-lg text-neutral-900 border-b border-neutral-200 pb-2">The Rise of Artisanal Coffee Culture</h3>
                            <p class="mt-4 text-neutral-700 font-playfair first-letter">A fascinating exploration of how coffee has evolved from simple beverage to cultural phenomenon, transforming our daily rituals.</p>
                            <div class="mt-4 flex items-center gap-4 text-sm text-neutral-600 border-t border-neutral-200 pt-2">
                                <span class="italic">By Sarah Smith</span>
                                <div class="w-1.5 h-1.5 rounded-full bg-neutral-400"></div>
                                <span>IV Hours Past</span>
                            </div>
                        </div>
                        <div class="hidden sm:flex flex-col items-end justify-between text-neutral-600">
                            <span class="text-sm border-b border-neutral-200 pb-1">XXIII Replies</span>
                            <span class="text-xs italic">Last: I Hour Past</span>
                        </div>
                    </div>
                </article>

<article class="newspaper-border border-neutral-800 p-6 bg-white/50 hover:bg-white/80 transition-colors ornate-corner">
                    <div class="flex gap-6">
                        <div class="flex-1">
                            <h3 class="font-playfair font-bold text-lg text-neutral-900 border-b border-neutral-200 pb-2">Urban Gardens: A Return to Roots</h3>
                            <p class="mt-4 text-neutral-700 font-playfair first-letter">City dwellers are transforming concrete jungles into green havens. What mysterious force drives this remarkable transformation?</p>
                            <div class="mt-4 flex items-center gap-4 text-sm text-neutral-600 border-t border-neutral-200 pt-2">
                                <span class="italic">By Mark Johnson</span>
                                <div class="w-1.5 h-1.5 rounded-full bg-neutral-400"></div>
                                <span>VI Hours Past</span>
                            </div>
                        </div>
                        <div class="hidden sm:flex flex-col items-end justify-between text-neutral-600">
                            <span class="text-sm border-b border-neutral-200 pb-1">XV Replies</span>
                            <span class="text-xs italic">Last: II Hours Past</span>
                        </div>
                    </div>
                </article>
            </div>
        </main>

<footer class="px-6 sm:px-12 py-6 border-t border-neutral-800 text-center text-sm text-neutral-600 relative">
            <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-neutral-800 to-transparent opacity-20"></div>
            <p class="font-playfair italic">"All the Forum's News That's Fit to Print"</p>
            <div class="mt-2 flex justify-center items-center gap-4">
                <span>Copyright © MMXXIV</span>
                <div class="w-1.5 h-1.5 rounded-full bg-neutral-400"></div>
                <span class="font-fraktur">The Daily Forum</span>
            </div>
        </footer>
    </div>
</body>
</html>

Related Examples

Hello Acode Master! 👋
is a passionate software developer based in Rubavu. He considers himself the top developer in the area and is committed to solving real-world problems through technology.

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

554
Linkedin Post

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

4.3k
Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Author:
Indra

4 weeks ago

105
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Author:
Ayyamperumal S

6 months ago

948
Jobs recommended for you
This HTML page is a responsive, dark-mode-friendly job recommendation interface designed using Tailwind CSS. It displays job listings in a card format, each showing: A colorful header background. A company logo/profile image styled as a rounded thumbnail. A job title (e.g., Senior Product Designer). A company name. A location with an icon. Job type (e.g., Full-time). Time since posting (e.g., 2d ago).

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

401
Blog Article Template
blog article template

Author:
Anonymous

2 years ago

14.5k
simple responsive blog layout with sidebar

Author:
Isabella Kowalski

2 years ago

9.2k
Blog
To add new blog

Author:
Nikhil

3 months ago

309
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

5 months ago

691
content section

Author:
Crimson

8 months ago

875
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Author:
Hamza Atig

5 months ago

714
TailwindFlex – Creative Animated Home Experience
"Innovative Home with Tailwind Animated Background" "Animated Hero – TailwindFlex Design" "Smooth UI – Creative Motion with Tailwind CSS" "Home Harmony – Motion Meets Design" "TailwindFlex Home – Fluid Animation & UI"

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

714

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components