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