Blog page template

This tailwind example is contributed by Ron Hicks, on 23-Dec-2022. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are blog page template, article page template

Blog post page

Author Ron Hicks

Tailwind v3.4 14k 18

Fork Fullscreen

<a href="#"
                    class="text-xs text-indigo-600 uppercase font-medium hover:text-gray-900 transition duration-500 ease-in-out">
                    Election
                </a>,
                <a href="#"
                    class="text-xs text-indigo-600 uppercase font-medium hover:text-gray-900 transition duration-500 ease-in-out">
                    Politics
                </a>
                <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>
                </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

Anonymous

3 years ago

15.8k
Blog post sample

sql_guru

3 years ago

15.1k
Blog page

Ron Hicks

3 years ago

12.9k
Blog post template with responsive sidebar

R.P Ketan

3 years ago

12.6k
Minimal blog page

Ron Hicks

3 years ago

14.1k
Simple blog layout

Shakti

3 years ago

12.1k
Blog Template

Mr Robot

4 years ago

11.1k
ProjectPage

V. Tym

10 months ago

980
blog card
template de blog

Raul antonio de la cruz hernandez

8 months ago

520
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.

Hamza Atig

1 year ago

2.1k
simple responsive blog layout with sidebar

Isabella Kowalski

3 years ago

10.4k
3D Card
Made a 3d card using tailwind css and the js

Sufyan jutt

7 months ago

825