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

image

pablitodgb

1 year ago

883
Admin dashboard cards
Card groups for showing stats/info.

Gopi Yadav

3 years ago

22.4k
What is Webby
Webby is a PHP Framework built on top of Codeigniter 3 for easy PHP web application development using both HMVC and MVC patterns.

Developer Kwame

2 years ago

2.6k
Responsive Gradient Cards

JUGENDRA GANGWAR

3 weeks ago

43
Feature Showcase + Cards
Responsive section with cards aligned using grid layout.

ABDO-SY

1 year ago

3.3k
Products cards w/ hover effect
Example of product card grid with product image, pricing and a hover effect FORKED FROM: https://tailwindflex.com/noob_dev/products-card-grid

threehymns

3 years ago

20.2k
Card Item Financieros
Item Financiero

Ameth Galarcio

2 years ago

2.8k
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Ayyamperumal S

10 months ago

1.1k
omerlinkStream
omerlinkStream

Omer fils ELENGA

10 months ago

1.3k
cards
cards with background animation

Anonymous

3 years ago

12.6k
Patient card

Anonymous

2 years ago

2.8k
sidebar dash
sidebar dash

Omer fils ELENGA

10 months ago

983