Blog, card

This tailwind example is contributed by Алла Телегина, on 20-Jan-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are blog page template, article page template,Article Card, Blog page card, Article card

Blog post page Blog Card

Author Алла Телегина

806

Fork Fullscreen

<div class="p-4 md:w-1/3">
                        <div class="h-full border-2 border-gray-200 border-opacity-60 shadow-xl shadow-gray-300 rounded-2xl overflow-hidden">
                            <img class="lg:h-48 md:h-36 w-full object-cover object-center" src="{{asset('images/history.jpg')}}" alt="блог">
                            <div class="p-6">
                                <h1 class="title-font text-lg font-semibold text-blue-950 mb-3">
                                    <div style="vertical-align: inherit;">
                                        <p class="group relative w-max">
                                            <span><a href="/story" class="text-2xl"><span style="vertical-align: inherit;" class="text-orange-600">И</span>стория Храма</a></span>
                                            <span class="absolute -bottom-1 left-1/2 w-0 transition-all h-0.5 bg-sky-600 group-hover:w-3/6"></span>
                                            <span class="absolute -bottom-1 right-1/2 w-0 transition-all h-0.5 bg-sky-600 group-hover:w-3/6"></span>
                                        </p>
                                    </div>
                                </h1>
                                <p class="leading-relaxed mb-3">
                                    <div style="vertical-align: inherit;">
                                    <input type="checkbox" id="toggle-description" class="hidden">
                                    <p id="c_description" class="mt-2 text-lg text-gray-800 break-words text-medium line-clamp-4 transition-all duration-300 ease-in-out">
                                        История прихода богата событиями, такими как строительство и реконструкции храма, особые
                                        богослужебные праздники, деятельность священнослужителей и активное участие верующих в жизни церкви. В течение многих лет
                                        приход служил местом для молитвы, общения и духовного роста верующих, а также оказывал помощь и поддержку нуждающимся в
                                        обществе. Первый камень в основание храма святого равноапостольного князя Владимира деревни Чижевщина был заложен 6 августа
                                        1891 года во время служения здесь священника Никанора Котовича.
                                    </p>
                                    <label for="toggle-description" id="toggle-btn" class="mt-2 text-gray-400 rounded-lg hover:text-blue-700 focus:outline-none cursor-pointer">
                                    </label>
                                    </div>
                                </p>

Related Examples

News Feed

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

10 months ago

1.5k
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

7 months ago

946
Twitter Post (Tweet) UI Mockup
A detailed static HTML and Tailwind CSS component replicating the user interface of a single Twitter post (Tweet). This mockup includes the user avatar, tweet header (name, handle, timestamp), tweet text with styled hashtags/mentions, optional media display, and the action bar with icons and counts (Reply, Retweet, Like, Views, Share). It is responsive, supports light and dark modes, and uses accurate iconography and hover states to closely resemble the real Twitter UI.

Author:
Hamza Atig

7 months ago

463
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

7 months ago

967
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

7 months ago

922
Card grid for blog Posts / Articles

Author:
Abhijit Sen

2 years ago

23.8k
Image Classification Models Response Grid
by AI Without Borders

Author:
wtfbrh

9 months ago

937
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)

5 months ago

818
Blog Template

Author:
Mr Robot

3 years ago

10.7k
Card with image full width
This component is a card designed for showcasing featured blog posts. It includes the post title, a captivating image, category links, and author details.

Author:
Mr Robot

2 years ago

13.4k
Tailwind responsive card grid

Author:
Piet Vriend

2 years ago

10.7k
Article List Section
A section displaying a list of articles with associated information.

Author:
Junclarkaizen Pagu

2 years ago

6.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components