Profile card

tailwind Profile Card

This tailwind example is contributed by Md. Tofayel islam, on 15-Mar-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Card

Author Md. Tofayel islam

Tailwind v3.4 3.1k 6

Fork Fullscreen

<div class="max-w-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
    <a href="#">
        <img class="rounded-t-lg" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxfHxwZXJzb258ZW58MHwwfHx8MTcxMDUxNjkwM3ww&ixlib=rb-4.0.3&q=80&w=1080" alt="" />
    </a>
    <div class="p-5">
        <a href="#">
            <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
        </a>
        <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
        <a href="#" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
            Read more
             <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
            </svg>
        </a>
    </div>
</div>

Related Examples

Info Card
Information card with image

Brandon D

4 years ago

10.4k
E-commerce cards
E-commerce responsive cards with dark mode

Robert Chunga

2 years ago

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

Mr Robot

3 years ago

14.1k
Products Layout
An ecommerce store front product list layout

Developer Kwame

1 year ago

1.1k
Blog Card
A blog card with dark-mode

Robert Chunga

1 year ago

2.7k
Drinkware landing page

Maxim

1 year ago

2.1k
Responsive card grid
responsive card grid for articles

Mr Robot

3 years ago

16.6k
item - product card

ABDO-SY

1 year ago

1.6k
card2
card2

pablitodgb

1 year ago

963
Info cards

Samuel Dawson

3 years ago

11.6k
Features grid

Sophia Baker

3 years ago

10.9k
card bento

Raul antonio de la cruz hernandez

9 months ago

733