Shift

Shift the center of the box to set box in the center

Shift top

Class: .shift-t

<div class="bg-gray-lighter w-10 h-10">
    <div class="w-10 h-10 bg-blue-50 shift-t "></div>
</div>

Class: .shift-r

<div class="bg-gray-lighter w-10 h-10">
    <div class="w-10 h-10 bg-blue-50 shift-r "></div>
</div>

Class: .shift-b

<div class="bg-gray-lighter w-10 h-10">
    <div class="w-10 h-10 bg-blue-50 shift-b "></div>
</div>

Class: .shift-l

<div class="bg-gray-lighter w-10 h-10">
    <div class="w-10 h-10 bg-blue-50 shift-l "></div>
</div>

Class: .shift-tl

<div class="bg-gray-lighter w-10 h-10">
    <div class="w-10 h-10 bg-blue-50 shift-tl "></div>
</div>

Class: .shift-tr

<div class="bg-gray-lighter w-10 h-10">
    <div class="w-10 h-10 bg-blue-50 shift-tr "></div>
</div>

Class: .shift-bl

<div class="bg-gray-lighter w-10 h-10">
    <div class="w-10 h-10 bg-blue-50 shift-bl "></div>
</div>

Class: .shift-br

<div class="bg-gray-lighter w-10 h-10">
    <div class="w-10 h-10 bg-blue-50 shift-br "></div>
</div>

You can use .hover-shift-{direction}-{pixels} to shift an element. Here {direction} can be t,r,b or l for top, right, bottom and left respectively

.shift-{direction}-{pixels} will also work if you don't want to use with hover