Effects Example

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

<div class="flex flex-wrap gap-8 justify-center">
    <div class="w-32 h-32 bg-white rounded-lg shadow-sm flex items-center justify-center text-xs font-semibold text-slate-400">shadow-sm</div>
    <div class="w-32 h-32 bg-white rounded-lg shadow flex items-center justify-center text-xs font-semibold text-slate-400">shadow</div>
    <div class="w-32 h-32 bg-white rounded-lg shadow-md flex items-center justify-center text-xs font-semibold text-slate-400">shadow-md</div>
    <div class="w-32 h-32 bg-white rounded-lg shadow-lg flex items-center justify-center text-xs font-semibold text-slate-400">shadow-lg</div>
    <div class="w-32 h-32 bg-white rounded-lg shadow-xl flex items-center justify-center text-xs font-semibold text-slate-400">shadow-xl</div>
    <div class="w-32 h-32 bg-white rounded-lg shadow-2xl flex items-center justify-center text-xs font-semibold text-slate-400">shadow-2xl</div>
  </div>

<div class="flex gap-4">
    <div class="w-24 h-24 bg-indigo-500 opacity-100 rounded-lg flex items-center justify-center text-white text-[10px]">100%</div>
    <div class="w-24 h-24 bg-indigo-500 opacity-75 rounded-lg flex items-center justify-center text-white text-[10px]">75%</div>
    <div class="w-24 h-24 bg-indigo-500 opacity-50 rounded-lg flex items-center justify-center text-white text-[10px]">50%</div>
    <div class="w-24 h-24 bg-indigo-500 opacity-25 rounded-lg flex items-center justify-center text-white text-[10px]">25%</div>
  </div>

<div class="max-w-xs space-y-4">
    <button class="w-full h-12 bg-white border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all">
      Click me
    </button>
    <button class="w-full h-12 bg-white border border-slate-300 rounded-md focus:outline-none focus:ring-4 focus:ring-rose-500 transition-all">
      Click me too!
    </button>
  </div>

</body>