Submitted over 1 year ago

Qr code component with Tailwind

Talisson•190

@talissoncosta

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

The second small project working with Tailwind CSS, now I see how it is powerful and how you get used to the syntax. It just come on your mind and you just need to make it happen.

Any tip is really welcome :D

Community feedback

Shaxboz•1,230

@shakhboz-shukhratPosted over 1 year ago

Hello there👋! Congratulations on completing this challenge!

The code seems to be fine but there is a small typo in line 5. Instead of "displays site properly based on user's device", it should be "displays the site properly based on the user's device". Here's the corrected code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Frontend Mentor | QR code component</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main>
    <div class="flex bg-blue-100 w-full min-h-screen">
      <div class="flex flex-col m-auto bg-white gap-4 max-w-xs pt-3 pl-3 pr-3 pb-6 rounded-2xl filter:drop-shadow(4px 4px 4pxpx rgb(0 0 0 / 0.1));">
        <img class="m-auto rounded-xl" width="256" height="256" src="./images/image-qr-code.png" alt="QR Code"/>
        <div class="flex flex-col gap-4 w-64 m-auto pl-2 pr-2">
          <h1 class="font-bold text-lg text-center">Improve your front-end skills by building projects</h1>
          <div class="text-center text-gray-400 text-sm">
            Scan the QR code to visit Frontend Mentor and take your coding skills to the next level
          </div>
        </div>
      </div>
    </div>
  </main>
  <footer class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="https://talissoncosta.github.io/">Talisson Costa</a>.
  </footer>
</body>
</html>

Anyway, your solution is great. Hope you will find this helpful. Happy coding!

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