Responsive article preview component using tailwind css

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.