<div id="root"></div>
#root {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 1fr 1fr 1fr;
}
.card {
  display: flex;
  justify-content: center;
  color: rgba(0,0,0,0.5);
  height: 200px;
  font-size: 1.2em;
  font-weight: 900;
  font-family: sans;
  align-items: center;
  border-radius: 4px;
  transition: transform 0.3s ease-in-out;
}
.card:hover {
  transform: scale(1.03);
  background-color: rgba(10,10,10,0.9);
  color: white;
  box-shadow: 0 0 8px 1px rgba(10,10,10,0.6);
}
const cursors = [
  'auto',
  'default',
  'none',
  'context-menu',	
  'help',
  'pointer',
  'progress',	
  'wait',
  'cell',
  'crosshair',
  'text',
  'vertical-text',	
  'alias',
  'copy',
  'move',
  'no-drop',	
  'not-allowed',	
  'grab',	
  'grabbing',
  'all-scroll',	
  'col-resize',	
  'row-resize',	
  'n-resize',	
  'e-resize',	
  's-resize',	
  'w-resize',	
  'ne-resize',	
  'nw-resize',	
  'se-resize',	
  'sw-resize',	
  'ew-resize',	
  'ns-resize',	
  'nesw-resize',	
  'nwse-resize',	
  'zoom-in',	
  'zoom-out',	
];

const root = document.getElementById('root');

for(let cursor of cursors) {
  let cursor_card = document.createElement('div');
  cursor_card.setAttribute('class', cursor +' card');
  cursor_card.innerHTML = cursor;
  cursor_card.style.cursor = cursor;
  root.appendChild(cursor_card);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.