bg-blue :Tailwind CSS Background Color class
The bg-blue classes provide background colors from light to dark blue, ranging from bg-blue-50 to bg-blue-950.
bg-blue (Blue Background Shades)
The bg-blue classes provide background colors from light to dark blue, ranging from bg-blue-50 to bg-blue-950.
Example Code
html
<div class="flex flex-col items-center space-y-5 p-8 rounded-t-md"> <div class="bg-blue-50 text-gray-500 border p-4 rounded-md text-center w-80 font-bold"> bg-blue-50</div><div class="bg-blue-100 text-gray-500 border p-4 rounded-md text-center w-80 font-bold"> bg-blue-100</div><div class="bg-blue-200 text-gray-500 border p-4 rounded-md text-center w-80 font-bold"> bg-blue-200</div><div class="bg-blue-300 text-gray-500 border p-4 rounded-md text-center w-80 font-bold"> bg-blue-300</div><div class="bg-blue-400 text-white border p-4 rounded-md text-center w-80 font-bold"> bg-blue-400</div> <div class="bg-blue-500 text-white p-4 rounded-md text-center w-80 font-bold"> bg-blue-500</div><div class="bg-blue-600 text-white border p-4 rounded-md text-center w-80 font-bold"> bg-blue-600</div><div class="bg-blue-700 text-white border p-4 rounded-md text-center w-80 font-bold"> bg-blue-700</div><div class="bg-blue-800 text-white border p-4 rounded-md text-center w-80 font-bold"> bg-blue-800</div><div class="bg-blue-900 text-white border p-4 rounded-md text-center w-80 font-bold"> bg-blue-900</div><div class="bg-blue-950 text-white border p-4 rounded-md text-center w-80 font-bold"> bg-blue-950</div></div>Preview
bg-blue-50
bg-blue-100
bg-blue-200
bg-blue-300
bg-blue-400
bg-blue-500
bg-blue-600
bg-blue-700
bg-blue-800
bg-blue-900
bg-blue-950
Windframe is a drag and drop builder for rapidly building tailwind css websites and UIs
Start building stunning tailwind UIs!
