Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
January 28, 2023 02:52 pm GMT

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, well show you how to create a modern profile card using the popular CSS framework, Tailwind CSS.

So, lets get started!

Step 1: Setting up the Tailwind CSS config file

Lets 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 upcoming 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 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;    }}

Step 2: Create the HTML structure

First, well create the HTML structure for our profile card. Well use a div container to hold the card, and within that, well 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! Youre 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 code of todays card play.tailwindcss.com

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, will be available in the upcoming Horizon UI Tailwind version which will be released by the end of February.


Original Link: https://dev.to/fredy/how-to-create-a-simple-modern-profile-card-using-tailwind-css-471b

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To