نحوه ایجاد یک کارت پروفایل ساده و مدرن با استفاده از TailwindCSS در سال 2023

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)',
      },
    }),
  },
}

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

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

<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>

<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>