QR CODE component using tailwind css

Community feedback

• 

  Alberto Ledesma•370

  @ledesmxPosted about 1 year ago

  Hi Baruti Baruani 👋

  Great job on your solution!

  Here are some recommendations for you:

  1. Use Semantics for the proper design of your code. I suggest to adding a <main></main> tag for your main content.
  2. There is a better approach to changing the background color in React. You can change the background color of the App component instead of the body tag inside the index.html file. In your App component's code add.

  return(
     <main className="bg-primary-blue">
        {/*Your code here*/}
     </main>
  );
  

  3. Use Flexbox to center your content. Now that all your content is surrounded by this main tag. You can easly center your content by adding flex min-h-[100vh] items-center

  Code to remove:

  /*Remove the class attribute in the body tag*/
  class="bg-primary-blue">
  

  Code to add:

  const App = () => {
    return (
      <main className="flex min-h-[100vh] items-center bg-primary-blue">
       {/* Here your code */}
      </main>
    );
  };
  export default App;
  

  Lastly, if you want to know other ways to import Google Fonts with Tailwind CSS check out this blog: https://dev.to/thomasvanholder/add-a-custom-tailwind-css-fonts-to-your-website-1nn6

  I also recommend you to check the documentation: https://tailwindcss.com/docs/font-family

  I hope this helps a little.

  Well done for the rest.

  Marked as helpful

  0

  ---

  

  Baruti Baruani•90

  @Baruti-1Posted about 1 year ago

  Thanks a lot for your useful feedback. I'm working on it.

  0