---
title: "💭 Build UIs that don't suck - YouTube"
description: "!https://www.youtube.com/watch?v=-h9rH539x1k"
date: 2025-04-15
published: true
tags:
  - tailwindcss
  - webdev
  - css
  - thought
template: link
---


<div class="embed-card embed-card-external embed-card-provider-youtube">
  <div class="embed-card-rich">
<lite-youtube videoid="-h9rH539x1k" title="Build UIs that don&#39;t suck" playlabel="Play: Build UIs that don&#39;t suck"></lite-youtube>
  </div>
</div>


How to make an entire clickable without presenting the entire content of the card as the link title.  These videos are great, I've ran into these types of problems so many times, and definitely did not know about things like isolate to keep the z-index scoped to one element.

* isolate - scope z-index inside this element so that it does not leak out.
* [.relative [.absolute, inset-0, z-10]] - the inset zero is a modern shorthand for zeroing all sides, top-0, right-0, bottom-0, left-0.

!!! note

    This post is a <a href="/thoughts/" class="wikilink" data-title="Thoughts" data-description="These are generally my thoughts on a web page or some sort of url, except a rare few don&#39;t have a link. These are dual published off of my..." data-date="2024-04-01">thought</a>. It's a short note that I make
    about someone else's content online <a href="/tags/thoughts/" class="hashtag-tag" data-tag="thoughts" data-count=2 data-reading-time=3 data-reading-time-text="3 minutes">#thoughts</a>