Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

<div class="[mask-type:luminance] [content-visibility:auto]">
  Arbitrary CSS properties
</div>

<div class="overflow-x-auto flex gap-4 [scroll-snap-type:x_mandatory]">
  <div class="shrink-0 w-80 [scroll-snap-align:start] bg-white rounded-xl p-4">Slide 1</div>
  <div class="shrink-0 w-80 [scroll-snap-align:start] bg-white rounded-xl p-4">Slide 2</div>
  <div class="shrink-0 w-80 [scroll-snap-align:start] bg-white rounded-xl p-4">Slide 3</div>
</div>

<ul class="[&>li]:py-2 [&>li]:border-b [&>li]:border-gray-200 [&>li:last-child]:border-0">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

<div class="grid grid-cols-3 gap-2 [&>*:nth-child(3n+1)]:bg-blue-50 [&>*:nth-child(3n+2)]:bg-green-50 [&>*:nth-child(3n)]:bg-rose-50">
  <div class="p-3 rounded">A</div>
  <div class="p-3 rounded">B</div>
  <div class="p-3 rounded">C</div>
</div>

<div class="{{ $status === 'active' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}
            px-2 py-1 rounded-full text-xs font-semibold">
  Status badge
</div>