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 Алла Телегина

328

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:
Samuel Abera

2 months ago

458
3 columns blog section
de columnis, columni, 3 columns

Author:
Anonymous

1 year ago

10.1k
progress bar

Author:
Md. Tofayel islam

3 months ago

407
google meet clone
Meeting application with fully responsive connect my web for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

2 months ago

377
Responsive Card

Author:
ᴀʀ!ᴀ

2 weeks ago

87
Blog page template

Author:
Ron Hicks

2 years ago

12.3k
Card responsive and dark mode grid

Author:
Cristian

5 months ago

957
Blog post sample

Author:
sql_guru

2 years ago

13.1k
Checkout Card
A modern and responsive checkout card built with HTML & Tailwind CSS, featuring a clean UI, smooth shadows, and interactive hover effects. It includes secure payment options, a clear pricing breakdown, and adapts seamlessly to all screen sizes. Perfect for e-commerce and digital platforms to enhance user experience.

Author:
Rajesh Maheshwari

1 month ago

298
SimpleGrid

Author:
wtfbrh

1 month ago

304
Simple Footer 3

Author:
Samuel Abera

4 months ago

993
Blog Post Showcase
a grid showcasing the blog posts with images and brief descriptions

Author:
Henrik R.

11 months ago

3.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components