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

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