Submitted 10 months ago

QR code component using TailwindCSS

Muhammad Noman•230

@BitWizCoder

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Community feedback

solvman•1,650

@solvmanPosted 10 months ago

Great job!

One suggestion is to use the font that is specified for the project. It looks like they require Outfit font. It is straightforward to add this font to your project:

Embed this code into <head> element of your index.html

<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=Outfit:[email protected]&display=swap" rel="stylesheet">

Extend your tailwind.config.js with the font-family config:

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        outfit: ['"Outfit"', ...defaultTheme.fontFamily.sans]
      }
    }
  },
}

You can then start using your new font throughout your site:

<body class="font-outfit">...</body>

Otherwise, very well done! I wish you the best of luck!

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