Border Example

<!doctype html>
<title>Tailwind CSS Border Example</title>
<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-gray-50 p-8 space-y-12">

<div class="flex flex-wrap gap-8">
    <div class="w-32 h-32 bg-white border-2 border-slate-900 rounded-lg flex items-center justify-center text-xs font-mono">
      border-2
    </div>
    <div class="w-32 h-32 bg-white border-4 border-blue-500 rounded-lg flex items-center justify-center text-xs font-mono">
      border-4
    </div>
    <div class="w-32 h-32 bg-white border-8 border-rose-500 rounded-lg flex items-center justify-center text-xs font-mono">
      border-8
    </div>
  </div>

<div class="grid grid-cols-2 gap-4 max-w-sm">
    <div class="p-4 bg-white border-t-4 border-indigo-500 shadow-sm rounded">Top Border</div>
    <div class="p-4 bg-white border-b-4 border-emerald-500 shadow-sm rounded">Bottom Border</div>
    <div class="p-4 bg-white border-l-4 border-amber-500 shadow-sm rounded">Left Border</div>
    <div class="p-4 bg-white border-r-4 border-rose-500 shadow-sm rounded">Right Border</div>
  </div>

<div class="flex flex-wrap gap-6 items-center">
    <div class="w-20 h-20 bg-indigo-500 rounded-sm"></div>
    <div class="w-20 h-20 bg-indigo-500 rounded"></div>
    <div class="w-20 h-20 bg-indigo-500 rounded-lg"></div>
    <div class="w-20 h-20 bg-indigo-500 rounded-2xl"></div>
    <div class="w-20 h-20 bg-indigo-500 rounded-full"></div>
  </div>

</body>