sample tailwind + html

by oktaviardi pratama

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss-browser/4.1.13/index.global.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/4.1.13/lib.min.js"></script>

<div class="grid grid-cols-3 gap-4 bg-gray-100">
  <div class="bg-green-50">50</div>
  <div class="bg-green-100">100</div>
  <div class="bg-green-200 ">200</div>
  <div class="bg-green-300 ">300</div>
  <div class="bg-green-400">400</div>
  <div class="bg-green-500">500</div>
  <div class="bg-green-600">600</div>
  <div class="bg-green-700">700</div>
  <div class="bg-green-800">800</div>
  <div class="bg-green-900">900</div>
  <div class="bg-green-950">950</div>
</div>


<p class="text-blue-600/100 dark:text-sky-400/100">The quick brown fox...</p>
<p class="text-blue-600/75 dark:text-sky-400/75">The quick brown fox...</p>
<p class="text-blue-600/50 dark:text-sky-400/50">The quick brown fox...</p>
<p class="text-blue-600/25 dark:text-sky-400/25">The quick brown fox...</p>