Border és shadow

<!-- Border vastagsága -->
<div class="border">1px border (alapértelmezett szín)</div>
<div class="border-2">2px border</div>
<div class="border-4">4px border</div>
<div class="border-8">8px border</div>

<!-- Border szín -->
<div class="border border-gray-200">Halvány szürke border</div>
<div class="border border-blue-500">Kék border</div>
<div class="border border-red-400">Piros border</div>

<!-- Oldanként külön -->
<div class="border-t border-gray-200">Csak felső border</div>
<div class="border-b">Csak alsó border</div>
<div class="border-x">Bal és jobb border</div>

<div class="rounded-none">Nincs lekerekítés</div>
<div class="rounded-sm">Enyhe lekerekítés (2px)</div>
<div class="rounded">Alap lekerekítés (4px)</div>
<div class="rounded-md">Közepes (6px)</div>
<div class="rounded-lg">Nagy (8px)</div>
<div class="rounded-xl">Extra nagy (12px)</div>
<div class="rounded-2xl">2x extra nagy (16px)</div>
<div class="rounded-3xl">3x extra nagy (24px)</div>
<div class="rounded-full">Teljes kör / kapszula forma</div>

<!-- Saranként külön -->
<div class="rounded-tl-lg">Csak bal felső sarok lekerekítve</div>
<div class="rounded-t-md">Csak felső két sarok</div>

<div class="shadow-none">Nincs árnyék</div>
<div class="shadow-sm">Enyhe árnyék</div>
<div class="shadow">Alap árnyék</div>
<div class="shadow-md">Közepes árnyék</div>
<div class="shadow-lg">Nagy árnyék</div>
<div class="shadow-xl">Extra nagy árnyék</div>
<div class="shadow-2xl">A legnagyobb árnyék</div>
<div class="shadow-inner">Befelé vetett árnyék</div>

<button class="focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
  Fókuszálható gomb
</button>