sveltekit and Tailwindcss

Community feedback

• 

  Saad Hisham•1,750

  @Saad-HishamPosted over 1 year ago

  Hey there!

  I just wanted to say that your solution is good✨, and I have some tips that might help make it even better!

  Firstly, to center the element on the screen, you might want to consider using flexbox:

  body {
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  

  Secondly, for improved accessibility, it's better to wrap your card inside the <main> tag instead of the <div>.

  Also, adding a gradient background can make it look even prettier:

  .flex.flex-col.rounded-3xl.bg-blue-800.items-center.text-center.p-10.w-2\/3.h-3\/3 {
      background: rgb(103,67,255);
      background: linear-gradient(180deg, rgba(103,67,255,1) 34%, rgba(49,44,235,1) 100%);
      width: 368px;
      border-radius: 2rem;
  }
  

  To match the design, you can add a little box shadow:

  .flex.flex-col.md\:flex.md\:flex-row.mx-auto.my-auto.items-center.w-3\/3.text-white.md\:pt-36 {
      box-shadow: 4px 4px 10px 0px rgba(229,233,244,0.75);
      -webkit-box-shadow: 4px 4px 10px 0px rgba(229,233,244,0.75);
      -moz-box-shadow: 4px 4px 10px 0px rgba(229,233,244,0.75);
      border-radius: 0rem 2rem 2rem 0rem;
  }
  

  And lastly, to match the design, you need to fix the sizes. I recommend using software like Photoshop to get the correct size. But you did a good job overall, and I can see a lot of effort went into it. Keep it up👌

  Marked as helpful

  0