Background Example

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

<div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
    <div class="h-16 bg-blue-500 rounded-lg flex items-center justify-center text-white text-xs font-bold">bg-blue-500</div>
    <div class="h-16 bg-emerald-500 rounded-lg flex items-center justify-center text-white text-xs font-bold">bg-emerald-500</div>
    <div class="h-16 bg-rose-500 rounded-lg flex items-center justify-center text-white text-xs font-bold">bg-rose-500</div>
    <div class="h-16 bg-amber-500 rounded-lg flex items-center justify-center text-white text-xs font-bold">bg-amber-500</div>
  </div>

<div class="h-32 bg-gradient-to-r from-cyan-500 to-blue-500 rounded-2xl shadow-lg flex items-center justify-center text-white font-black text-2xl tracking-tighter">
    GRADIENT BACKGROUND
  </div>

<div class="h-64 bg-cover bg-center rounded-xl flex items-end p-6 border-4 border-white shadow-xl bg-[url('/pix/samples/22l.jpg')]">
    <div class="bg-black/50 backdrop-blur-md p-4 rounded-lg w-full">
      <p class="text-white font-medium text-sm">Background Image with Overlay</p>
    </div>
  </div>

</body>