Home
Ron Hicks
Blog page

Blog page

This tailwind example is contributed by Ron Hicks, on 03-Jan-2023. 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 Ron Hicks

11.5k

Fork Fullscreen

<div class="max-w-screen-xl mx-auto p-5 sm:p-10 md:p-16 relative">
    <div class="bg-cover bg-center text-center overflow-hidden"
        style="min-height: 500px; background-image: url('https://api.time.com/wp-content/uploads/2020/07/never-trumpers-2020-election-01.jpg?quality=85&amp;w=1201&amp;h=676&amp;crop=1')"
        title="Woman holding a mug">
    </div>
    <div class="max-w-3xl mx-auto">
        <div
            class="mt-3 bg-white rounded-b lg:rounded-b-none lg:rounded-r flex flex-col justify-between leading-normal">
            <div class="bg-white relative top-0 -mt-32 p-5 sm:p-10">
                <h1 href="#" class="text-gray-900 font-bold text-3xl mb-2">Revenge of the Never Trumpers</h1>
                <p class="text-gray-700 text-xs mt-2">Written By:
                    <a href="#"
                        class="text-indigo-600 font-medium hover:text-gray-900 transition duration-500 ease-in-out">
                        Ahmad Sultani
                    </a> In
                    <a href="#"
                        class="text-xs text-indigo-600 font-medium hover:text-gray-900 transition duration-500 ease-in-out">
                        Election
                    </a>,
                    <a href="#"
                        class="text-xs text-indigo-600 font-medium hover:text-gray-900 transition duration-500 ease-in-out">
                        Politics
                    </a>

</p>

<p class="text-base leading-8 my-5">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                    industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
                    and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
                    leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s
                    with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                </p>

<h3 class="text-2xl font-bold my-5">#1. What is Lorem Ipsum?</h3>

<blockquote class="border-l-4 text-base italic leading-8 my-5 p-5 text-indigo-600">Lorem Ipsum is simply
                    dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
                    dummy text ever since the 1500s
                </blockquote>

<a href="#"
                    class="text-xs text-indigo-600 font-medium hover:text-gray-900 transition duration-500 ease-in-out">
                    #Election
                </a>,
                <a href="#"
                    class="text-xs text-indigo-600 font-medium hover:text-gray-900 transition duration-500 ease-in-out">
                    #people
                </a>,
                <a href="#"
                    class="text-xs text-indigo-600 font-medium hover:text-gray-900 transition duration-500 ease-in-out">
                    #Election2020
                </a>,
                <a href="#"
                    class="text-xs text-indigo-600 font-medium hover:text-gray-900 transition duration-500 ease-in-out">
                    #trump
                </a>,<a href="#"
                    class="text-xs text-indigo-600 font-medium hover:text-gray-900 transition duration-500 ease-in-out">
                    #Joe
                </a>

</div>

</div>
    </div>
</div>

Related Examples

Blog Article Template
blog article template

Author:
Anonymous

2 years ago

14.6k
Blog page template

Author:
Ron Hicks

2 years ago

12.9k
Blog post sample

Author:
sql_guru

2 years ago

13.9k
Blog post template with responsive sidebar

Author:
R.P Ketan

2 years ago

11.7k
Minimal blog page

Author:
Ron Hicks

2 years ago

13k
Simple blog layout

Author:
Shakti

2 years ago

11.2k
Basic landing page template

Author:
Anonymous

2 years ago

11.5k
Blog Template

Author:
Mr Robot

3 years ago

10.7k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

2 days ago

40
Linkedin Post

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

1 year ago

4.4k
newPost

Author:
farisubuntu

1 year ago

1.9k
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Author:
Hamza Atig

6 months ago

875

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components