tailwindbeginnermit

Tailwind Profile Card

A team member profile card.

4.3k1.0k1.1k545

About this module

A profile card with avatar, social icons and hover lift using Tailwind utilities.

#tailwind#card#profile#avatar

Source code

Installation

  1. 1

    Install Tailwind

    Add Tailwind to your project.

    npm install -D tailwindcss @tailwindcss/vite
  2. 2

    Wire up the plugin

    Add `@tailwindcss/vite` to your Vite config or the PostCSS plugin to your build.

  3. 3

    Import the CSS

    Add `@import "tailwindcss";` at the top of your main CSS file.

  4. 4

    Paste the markup

    Copy the markup into a component or template and it is ready to go.

Usage

  1. 1

    Copy the markup

    Paste the HTML below into a component or template.

  2. 2

    Verify Tailwind is set up

    Ensure Tailwind's CSS entry point is imported in your app.

Overview
Frameworktailwind
Difficultybeginner
Licensemit
Versionv1.0.0
Features
  • Pure utility classes
  • Responsive out of the box
  • Dark mode with `dark:` variants
Traits
  • ResponsiveYes
  • Dark modeYes
  • AccessibleYes
  • Production readyYes
Dependencies
tailwindcss@^4.0.0
Browser support
  • Chrome 90+
  • Firefox 90+
  • Safari 15+
  • Edge 90+

Related modules

Command Palette

Search modules and jump anywhere