social media dashboard using TailwindCSS and vanilla JavaScript

Hey Sagar,

Good work on this solution!

border-color does not allow you to use gradient color, instead, you can use border-image 😎. e.g. border-image: linear-gradient(45deg, hsl(37, 97%, 70%) ,hsl(329, 70%, 58%)) 1;

Check out this documentation for more details: https://developer.mozilla.org/en-US/docs/Web/CSS/border-image

Me personally prefer use ::before or ::after for those small design elements (arrows, borders, icons etc, you don't have to think about the border as a border 🤯).

A gradient border would be something like this:

.card::before {
  width: 100%;
  height: 4px;
  background: linear-gradient(45deg, hsl(37, 97%, 70%) ,hsl(329, 70%, 58%));
}

Hope this helped.

Happy coding 😆

Great job!

Just a small thing that I've noticed in your css, always add custom classes before @tailwind utilities directive. This currently has no effect on your code but it's a good practice in case you decide to '@apply' tailwind utilities in your custom classes.

More information can be found here: https://tailwindcss.com/docs/extracting-components

Hi Sagar,

This looks really nice. It would be amazing if you made it more accessible though - especially that dark mode toggle. It's inaccessible to assistive technology at the moment because no native form elements have been used. There are lots of accessible patterns for toggles out there if you look them up. I'd recommend using a checkbox in this case where there is only one label (so checked = dark mode)

Good luck