Blog, card

This tailwind example is contributed by Alla Telegina, on 20-Jan-2025. Component is made with Tailwind v3.4. 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 Alla Telegina

Tailwind v3.4 1.6k 6

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

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.4k
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
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.

Hamza Atig

1 year ago

1.3k
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.

Hamza Atig

1 year ago

1.7k
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.

Hamza Atig

1 year ago

1.8k
Card template

Raul antonio de la cruz hernandez

8 months ago

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

Sufyan jutt

7 months ago

827
Post Card
Clean card for post grid, Blog grid

Arshid Iqbal

1 week ago

93
Blog page template

Ron Hicks

3 years ago

14k
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"

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.7k
ProjectPage

V. Tym

11 months ago

980
card

Raul antonio de la cruz hernandez

8 months ago

516