Responsive article preview component using tailwind css

Community feedback

• 

  mofada•340

  @mofadaPosted 4 months ago

  First of all, congratulations on completing the challenge. I found some small problems, of course, this is just my own opinion

  I think the tailwind color naming should follow lowercase, like this text-color-blue-100, so you should define it like this

  colors: {
      'dark-grayish-blue': 'hsl(217, 19%, 35%)',
      // or like this
      dark:{
          grayish:{
              blue:'hsl(217, 19%, 35%)'
          }
      }
  }
  

  Then in the desktop you seem to have missed the triangle part, you can use svg icon or use css to draw it, like this:

  #tooltip:before {
      /*Triangle line*/
      position: absolute;
      bottom: -9px;
      left: 50%;
      transform: translateX(-50%);
      border-left: 12px solid transparent;
      border-right: 12px solid transparent;
      border-top: 12px solid hsl(217, 19%, 35%);
  }
  

  Finally, your tooltip prompt box seems to have a problem with the position. It does not appear where it should appear. Perhaps you can use js to get the coordinates and display them.

  Marked as helpful

  0