Interactivity

Control user interaction cues like the cursor and element opacity.

Cursor

Change the cursor to provide feedback to the user.

• .cursor-pointer - Shows a pointer (hand) cursor.
• .cursor-not-allowed - Shows a "not allowed" cursor.
• .cursor-grab - Shows a "grab" cursor.

Example

.cursor-pointer

.cursor-not-allowed

<div class="cursor-pointer">...</div>
<div class="cursor-not-allowed">...</div>

Opacity

Control the opacity of an element.

• .opacity-100 - Opacity: 1
• .opacity-75 - Opacity: 0.75
• .opacity-50 - Opacity: 0.5
• .opacity-25 - Opacity: 0.25
• .opacity-0 - Opacity: 0

Example

.opacity-75

.opacity-50

<div class="opacity-75">...</div>
<div class="opacity-50">...</div>