Toggle navigation
☰
HTML
CSS
Scripting
Database
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tailwind CSS Interactivity Example</title> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="bg-slate-100 p-8 font-sans space-y-10"> <!-- 1. Cursor & Pointer Events --> <div class="bg-white rounded-2xl shadow-md p-6"> <h2 class="text-lg font-bold text-slate-800 mb-1">Cursors</h2> <p class="text-sm text-slate-500 mb-4">Hover each box to see different cursor styles.</p> <div class="flex flex-wrap gap-3"> <div class="cursor-pointer bg-blue-100 text-blue-800 px-4 py-2 rounded-lg text-sm font-mono">cursor-pointer</div> <div class="cursor-wait bg-amber-100 text-amber-800 px-4 py-2 rounded-lg text-sm font-mono">cursor-wait</div> <div class="cursor-not-allowed bg-red-100 text-red-800 px-4 py-2 rounded-lg text-sm font-mono">cursor-not-allowed</div> <div class="cursor-grab bg-green-100 text-green-800 px-4 py-2 rounded-lg text-sm font-mono">cursor-grab</div> <div class="cursor-crosshair bg-violet-100 text-violet-800 px-4 py-2 rounded-lg text-sm font-mono">cursor-crosshair</div> <div class="cursor-text bg-slate-100 text-slate-800 px-4 py-2 rounded-lg text-sm font-mono">cursor-text</div> <div class="cursor-zoom-in bg-cyan-100 text-cyan-800 px-4 py-2 rounded-lg text-sm font-mono">cursor-zoom-in</div> </div> </div> <!-- 2. User Select --> <div class="bg-white rounded-2xl shadow-md p-6"> <h2 class="text-lg font-bold text-slate-800 mb-1">User Select</h2> <p class="text-sm text-slate-500 mb-4">Try to select the text in each box.</p> <div class="grid grid-cols-1 sm:grid-cols-3 gap-4"> <div class="select-none bg-slate-50 border border-dashed border-slate-300 rounded-xl p-4 text-center"> <p class="text-xs font-mono text-slate-500 mb-1">select-none</p> <p class="font-medium">This text cannot be selected.</p> </div> <div class="select-text bg-slate-50 border border-dashed border-slate-300 rounded-xl p-4 text-center"> <p class="text-xs font-mono text-slate-500 mb-1">select-text</p> <p class="font-medium">This text can be selected normally.</p> </div> <div class="select-all bg-slate-50 border border-dashed border-slate-300 rounded-xl p-4 text-center"> <p class="text-xs font-mono text-slate-500 mb-1">select-all</p> <p class="font-medium">One click selects all of this text.</p> </div> </div> </div> <!-- 3. Pointer Events --> <div class="bg-white rounded-2xl shadow-md p-6"> <h2 class="text-lg font-bold text-slate-800 mb-1">Pointer Events</h2> <p class="text-sm text-slate-500 mb-4">The second button has <code class="bg-slate-100 px-1 rounded text-xs">pointer-events-none</code>.</p> <div class="flex gap-4"> <button class="bg-blue-600 text-white px-5 py-2 rounded-lg font-medium hover:bg-blue-700 transition-colors">Normal Button</button> <button class="pointer-events-none opacity-50 bg-blue-600 text-white px-5 py-2 rounded-lg font-medium">Disabled (pointer-events-none)</button> </div> </div> <!-- 4. Resize --> <div class="bg-white rounded-2xl shadow-md p-6"> <h2 class="text-lg font-bold text-slate-800 mb-1">Resize</h2> <p class="text-sm text-slate-500 mb-4">Drag the bottom-right corner of this textarea to resize it.</p> <textarea class="resize w-full border border-slate-300 rounded-lg p-3 text-sm text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500" rows="3">This textarea is resizable in both directions using the `resize` utility.</textarea> </div> <!-- 5. Scroll Behavior --> <div class="bg-white rounded-2xl shadow-md p-6"> <h2 class="text-lg font-bold text-slate-800 mb-1">Overflow & Scroll</h2> <p class="text-sm text-slate-500 mb-4">The box below uses <code class="bg-slate-100 px-1 rounded text-xs">overflow-y-auto</code> with <code class="bg-slate-100 px-1 rounded text-xs">scroll-smooth</code>.</p> <div class="overflow-y-auto scroll-smooth max-h-36 border border-slate-200 rounded-xl p-4 space-y-2 text-sm text-slate-600"> <p>Line 1 — scroll down to see more content below.</p> <p>Line 2 — still going...</p> <p>Line 3 — a bit further.</p> <p>Line 4 — keep scrolling.</p> <p>Line 5 — almost there.</p> <p>Line 6 — you made it!</p> </div> </div> <!-- 6. Appearance & Accent Color --> <div class="bg-white rounded-2xl shadow-md p-6"> <h2 class="text-lg font-bold text-slate-800 mb-1">Accent Color</h2> <p class="text-sm text-slate-500 mb-4">Use <code class="bg-slate-100 px-1 rounded text-xs">accent-{color}</code> to theme native form controls.</p> <div class="flex flex-col gap-3"> <label class="flex items-center gap-3"> <input type="checkbox" checked class="accent-blue-600 w-5 h-5"> <span class="text-sm">accent-blue-600</span> </label> <label class="flex items-center gap-3"> <input type="checkbox" checked class="accent-pink-500 w-5 h-5"> <span class="text-sm">accent-pink-500</span> </label> <label class="flex items-center gap-3"> <input type="range" class="accent-emerald-500 w-48"> <span class="text-sm">accent-emerald-500 (range)</span> </label> </div> </div> </body> </html>
