search

mertJF / tailblocks

Ready-to-use Tailwind CSS blocks.
https://tailblocks.cc
MIT License
8.72k stars 829 forks source link

Request: Team > grouped avatars list #31

Open scp-nm opened 4 years ago

scp-nm commented 4 years ago

Hi there, great collection of Tailwind blocks you've got, super work!

I have a request, and that's for a grouped avatar list. This could go into the Team collection.

These could be in a variety of styles (stacked, stacked truncated, grid) and most of these should be do-able with just Tailwind and potentially some custom CSS.

I've done something similar (using Vue, Vuetify) on CodePen, but this is about as far as I've been able to do: https://codepen.io/scp-nm/pen/rNVKBVO

The bit that I'm struggling with is getting the stacked avatars to stack 'correctly', i.e. left-most avatar fully visible and then subsequent avatars under the left-most. I've seen this is possible by reversing the list of avatars and using CSS flex, but this seems a bit hacky to me.

Hopefully someone might be up for the challenge 😝

Thanks again for a great repo.

scp-nm commented 4 years ago

To add onto this, I was inspired by the Atlas Kit (produced by Atlassian), but their implementation is a little clunky too (uses z-index which isn't that scalable).

scp-nm commented 4 years ago

Found another example, this time the Material UI library, they're also using z-index to achieve the same result as the Atlas Kit example.