00:00 Alright let's do this and as a reminder right now if I hover over the tiles nothing at all happens and the focus tiles are the default ones. So let's start with the hover style. So remember the background color is this highlight at 7% opacity and besides the obvious rotation here

00:16 it looks like the background is a little bit more intense. Yep 10%. So on hover we want to rotate the tile by 6 degrees and we want to change the opacity to 10%. Now scroll down to the

00:29 individual logo tile anchor tag right there and so we have this BG highlight 7% and then on hover we want to go BG highlight and this time we don't have to go arbitrary value because 10% is one of

00:44 the possible values out of the box. So if I save that we should just see a slight increase in the background color on hover and sure enough we do. This is a good start. So the next thing we're going to do is the rotation by 6 degrees also on hover. Let's do that. Here hover we want to

01:02 rotate the element by 6 degrees but I believe that this rotate here will rotate 6 degrees clockwise which will turn it to the right. Yep that looks kind of cool but looking at the design

01:18 we want to rotate it to the left so we need to do minus rotate 6 and I can add the minus before the rotate and now we're going counterclockwise just like we want. So this is kind of cool and jittery it's kind of has a fun effect but I thought we could even if the designers didn't

01:35 suggest add a little transition they might be delighted with that so let's just add here a transition utility and by itself it's going to take care of adding a nice smooth 150 milliseconds transition I believe is the default we can see that on hover yep 150 and you can change that

01:54 with duration so let's do something silly duration 500 this is going to be way too long and this looks a little bit unresponsive and sloppy tired so let's go back to 150 which was actually pretty good so we can get rid of the duration and hopefully the designers appreciate

02:15 the nice little touch whoop gotta save again there we go those are the hover styles done let's now tackle the focus styles I will zoom in a bit inside my design so we can see clearer

02:30 so we once again want a two pixel border but we're talking about ring utilities and you can see here it's actually using box shadow this is the drop shadow and it has a spread of two which is this

02:42 offset of two you can see behind between the seven percent background highlight and the ring there is this two pixel little white gap which is a ring offset in tailwind so it's going to create a first

02:58 box shadow two pixel white and then around it another box shadow of two pixels highlights just like we want so let's start by undoing the default focus styles with focus outline none and so now you cannot see anything even the element is in focus but we'll replace that with focus ring two

03:18 like before and focus ring highlight so we're getting there but we need to add the offset and we can do that with focus ring offset and once again we can choose the amount of offsets we want two pixels so we'll go with ring offset two and just like that we have our beautiful

03:37 ring styles that are perfectly matching the design and i'm pretty sure that the designers will be impressed with it you can even see the nice transition as it appears which makes it look really cool i think they're going to be happy with the work we've done something super cool good job