8
10 Comments

How to create a Simple & Modern Profile Card using TailwindCSS in 2023

As we all know, Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It provides a wide range of low-level utility classes that make it easy to build complex designs by composing simple CSS classes. Also, now is one of the most popular CSS frameworks in the whole web development industry! ⚡️

Some of the benefits of using Tailwind CSS include:

  • Speed: Because Tailwind provides a wide variety of pre-defined CSS classes, it can help developers quickly build and prototype user interfaces without having to write custom CSS.

  • Consistency: By using the same set of classes throughout a project, developers can ensure that the design is consistent across different pages and components.

  • Customizability: Tailwind CSS is highly customizable, allowing developers to easily adjust the design to match their project's specific needs.

  • Accessibility: Tailwind CSS provides a set of classes that make it easy to implement accessibility best practices, such as providing sufficient contrast between text and background colors.

A profile card is a great way to showcase important information about an individual or organization on a website. In this article, we’ll show you how to create a modern profile card using the popular CSS framework, Tailwind CSS.

So, let’s get started!


Step 1: Setting up the Tailwind CSS config file

Let’s set up our project by creating the Tailwind CSS config file and adding base css. Here we will use some colors, shadows, and more from the Horizon UI template for Tailwind.

tailwind.config.js

module.exports = {
  darkMode: 'class',
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      fontFamily: {
        dm: ['DM Sans', 'sans-serif'],
      },
      boxShadow: {
        '3xl': '14px 17px 40px 4px',
      },
      borderRadius: {
        primary: '20px',
      },
    },
    colors: ({ colors }) => ({
      white: '#ffffff',
      lightSecondary: '#A3AED0',
      bluePrimary: '#2B3674',
      gray: {
        DEFAULT: colors.gray,
        50: '#f8f9fa',
        100: '#edf2f7',
        200: '#e9ecef',
        300: '#cbd5e0',
        400: '#a0aec0',
        500: '#adb5bd',
        600: '#a3aed0',
        700: '#707eae',
        800: '#252f40',
        900: '#1b2559',
      },
      navy: {
        50: '#d0dcfb',
        100: '#aac0fe',
        200: '#a3b9f8',
        300: '#728fea',
        400: '#3652ba',
        500: '#1b3bbb',
        600: '#24388a',
        700: '#1B254B',
        800: '#111c44',
        900: '#0b1437',
      }, 
      shadow: {
        500: 'rgba(112, 144, 176, 0.08)',
      },
    }),
  },
}

index.css

[@import](/import) url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap');
[@import](/import) url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
[@tailwind](/tailwind) base;
[@tailwind](/tailwind) components;
[@tailwind](/tailwind) utilities;

[@layer](/layer) base {
	html {
	  font-family: 'DM Sans', sans-serif;
	  font-feature-settings: 'kern';
	  -webkit-font-smoothing: antialiased;
	  letter-spacing: -0.5px;
	}
}

Step 2: Create the HTML structure

First, we’ll create the HTML structure for our profile card. We’ll use a div container to hold the card, and within that, we’ll add several divs to hold the different elements of our card, such as the background image, profile picture, name, and its statistics.

index.html

<div>

//Banner image

  <div style='background-image: url("https://i.ibb.co/FWggPq1/banner.png");'>

//Profile picture (separate div for future positioning)

   <div>
	<img src="https://i.ibb.co/6YbS9ff/avatar11.png" alt="" />
   </div>
  </div>

//General info

  <div>
    <h4>Adela Parkson</h4>
    <p>Product Manager</p>
  </div>
  <div>
    <div>
      <h3>17</h3>
      <p>Posts</p>
    </div>
    <div>
      <h3>9.7K</h3>
      <p>Followers</p>
    </div>
    <div>
      <h3>434</h3>
      <p>Following</p>
    </div>
  </div>
</div>


Step 3: Styling

Add Tailwind CSS classes so the card has its own identity.

<div class="dark:!bg-navy-800 shadow-shadow-500 shadow-3xl rounded-primary relative mx-auto flex h-full w-full max-w-[550px] flex-col items-center bg-white bg-cover bg-clip-border p-[16px] dark:text-white dark:shadow-none">
  <div class="relative mt-1 flex h-32 w-full justify-center rounded-xl bg-cover" style='background-image: url("https://i.ibb.co/FWggPq1/banner.png");'>
    <div class="absolute -bottom-12 flex h-[88px] w-[88px] items-center justify-center rounded-full border-[4px] border-white bg-pink-400">
		<img class="h-full w-full rounded-full" src="https://i.ibb.co/6YbS9ff/avatar11.png" alt="" />
	</div>
  </div>
  <div class="mt-16 flex flex-col items-center">
    <h4 class="text-bluePrimary text-xl font-bold">Adela Parkson</h4>
    <p class="text-lightSecondary text-base font-normal">Product Manager</p>
  </div>
  <div class="mt-6 mb-3 flex gap-4 md:!gap-14">
    <div class="flex flex-col items-center justify-center">
      <h3 class="text-bluePrimary text-2xl font-bold">17</h3>
      <p class="text-lightSecondary text-sm font-normal">Posts</p>
    </div>
    <div class="flex flex-col items-center justify-center">
      <h3 class="text-bluePrimary text-2xl font-bold">9.7K</h3>
      <p class="text-lightSecondary text-sm font-normal">Followers</p>
    </div>
    <div class="flex flex-col items-center justify-center">
      <h3 class="text-bluePrimary text-2xl font-bold">434</h3>
      <p class="text-lightSecondary text-sm font-normal">Following</p>
    </div>
  </div>
</div>

Step 4: Hooray! You’re done! 🎉

All you have to do is integrate the card in your project. The final result should look like this:

Tailwind CSS React Profile Card - Horizon UI

If it helps you, here is a link with the full component today’s card 👉 Horizon UI Tailwind


In conclusion, creating a modern profile card with Tailwind CSS is a simple and efficient way to add a visually appealing element to your website or application. By utilizing the pre-designed classes and responsive design capabilities of Tailwind CSS, you can easily customize the layout and style of your profile card to fit the look and feel of your project.

More cards like the one we made, components like navbars, dropdowns, and so on, are available in Horizon UI Tailwind!

  1. 2

    How to set up your project and import TailwindCSS into your HTML?

    1. 1

      This is a good question, as Tailwind is a lot more complicated than standard css libraries like Bootstrap to set up. Once you do though, it is VERY nice.

      There are tutorials for any tech stack you may want to integrate it with. I have set it up with Laravel Mix and Vite in the past and the best advice I can give you is just to follow the guide for your specific framework: https://tailwindcss.com/docs/installation/framework-guides

    2. 1

      Here is an example of the HTML and TailwindCSS classes.

  2. 2

    Stunning design, keep it up @fredy!

  3. 1

    Awesome dude! Tailwind is the best : )

  4. 1

    Thanks for sharing. I love Tailwind CSS. I use it for my open source crm -https://www.iceburg.ca

  5. 1

    I just wanted to take a moment to express my sincere gratitude for your amazing work on Tailwind CSS. Your product has truly transformed the way we build responsive and attractive user interfaces, and it has made our development process so much more efficient and streamlined.

    The simplicity and flexibility of Tailwind CSS are truly remarkable, and we appreciate the thought and effort that you have put into creating such a wonderful tool for developers. https://brightscholarship.com/fully-funded-scholarship-in-canada-2023-24/

Trending on Indie Hackers
Competing with Product Hunt: a month later 33 comments Why do you hate marketing? 29 comments My Top 20 Free Tools That I Use Everyday as an Indie Hacker 19 comments $15k revenues in <4 months as a solopreneur 14 comments Use Your Product 13 comments How I Launched FrontendEase 13 comments