Home
Robert Chunga
Blog Card

Blog Card

A blog card with dark-mode

This tailwind example is contributed by Robert Chunga, on 09-Dec-2024. Component is made with Tailwind CSS v3. It supports dark mode.

Card

Author Robert Chunga

1.8k

Fork Fullscreen

<div class="bg-gray-200 dark:bg-gray-800 flex items-center p-8">
    <div class="py-8 px-4 mx-auto max-w-screen-xl h-screen lg:py-16 lg:px-6">
        
        <div class="bg-white w-96 p-4 border-2 border-gray-300 dark:border-gray-500 shadow-lg rounded-xl dark:bg-slate-700">
            
            <div>
                <a href="#">
                    <img class="rounded-lg" src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw1fHx0ZWNobm9sb2d5fGVufDB8MHx8fDE3MTk1OTg4Njd8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="image" />
                </a>
            </div>
            
            
            <div class="capitalize text-purple-900 font-semibold my-4 bg-purple-200 w-fit px-3 rounded-lg">
                <p>article</p>
            </div>
            
            
            <div class="text-2xl font-bold my-2 dark:text-white">
                <a href="#">
                    <h2>Getting started with tailwind</h2>
                </a>
            </div>
            
            
            <div class="dark:text-gray-400">
                <p>Getting started with Tailwind CSS is easy: install it via npm, configure your settings, and start building responsive, utility-first designs with minimal custom CSS.</p>
            </div>
            
            
            <div class="flex items-cente">
                
                <div class="mt-4">
                    <img class="w-12 h-12 object-cover rounded-full" src="https://images.unsplash.com/photo-1624188327913-e0c59aaaa3ae?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw2fHxibGFjayUyMG1hbnxlbnwwfDB8fHwxNzE5NjAxMzQ2fDA&ixlib=rb-4.0.3&q=80&w=1080" alt="image" />
                </div>
                
                
                <div class="block mt-3.5">
                    
                    <div class="capitalize text-lg font-semibold pl-4 dark:text-white">
                        <h3>robert chunga</h3>
                    </div>
                    
                    
                    <div class="capitalize text-sm text-gray-400 pl-4">
                        <p>Aug 15, 2021 · 16 min read</p>
                    </div>
                    
                </div>
                
            </div>
            
        </div>
        
    </div>
</div>

Related Examples

Chats Message Screen in neomorphism
light/dark chat screen

Author:
Akram Khan

1 year ago

2k
Pagination
It's my first project which i made him in the using tailwind css and html

Author:
Sufyan jutt

2 months ago

116
Product / Service Card
Example of a card that can be used as a blog, product, or service card with reviews.

Author:
Noob

3 years ago

17.8k
Card blog
Targeta para blog

Author:
Raul antonio de la cruz hernandez

2 months ago

146
Contact us form with map
Contact us form with map

Author:
Chithira Kumar M

2 years ago

12.3k
3D Amazing Product Card
Here's a stunning 3D product card with hover effects, 3D rotation, and a clean modern design using HTML, CSS (Tailwind), and a bit of JavaScript for the interactive 3D effect:

Author:
Nicole Shalom

8 months ago

1.2k
User profile card

Author:
Mr Robot

3 years ago

11.5k
Card template

Author:
Raul antonio de la cruz hernandez

3 weeks ago

35
cards order
odering samethng

Author:
Uwase Alliance

8 months ago

997
Responsive card grid
responsive card grid for articles

Author:
Mr Robot

3 years ago

15.7k
split bg 2

Author:
Anonymous

7 months ago

306
Frontend Template Open Source Code Website
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Author:
Rathanak Phan

7 months ago

988

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components