Submitted 2 months ago

Card Feature Using Tailwind CSS

#tailwind-css

kunal90803•490

@kunal90803

Preview site View code

This is a solution for...Four card feature section

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

proud of completing full project using TAILWIND CSS

What specific areas of your project would you like help with?

Trying Tailwind CSS for the first Time. Any feedback would meant a lot.

Community feedback

Piyush Solanki•180

@PiyushSolanki-hubPosted 2 months ago

Hi👋 @kunal90803 Your web page looks good but the font Poppins is not applying on your page. You can follow these steps to apply it in your page.

in your head tag paste the font links

<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
</head>

go to your tailwind.config.js and add your font

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['index.html'],
  theme: {
    extend: {
      fontFamily:{
        'Poppins':['Poppins','serif'],
      }
    },
  },
  plugins: [],
}

Hope this helps you😊👍

Marked as helpful

kunal90803•490

@kunal90803Posted 2 months ago

@PiyushSolanki-hub Thanks a lot for your advice. Surely gonna implement in my future projects.

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord